SOURCE

<!-- <view class="bee">
  <view class="l-eye">
  </view>
    <view class="body">
    </view>
    <view class="body2">
    </view>
  <view class="l-eye">
  </view>
  <view class="l-ear1">
  </view>
  <view class="l-ear2">
  </view>
  <view class="body3">
  </view>
  <view class="body4">
  </view>
  <view class="tail">
  </view>
  <view class="wingl">
  </view>
  <view class="wingl2">
  </view>
  <view class="wingr">
  </view>
  <view class="wingl3">
  </view>
</view> -->
    <view class="l-edit">
        <view class="l-dot">

        </view>
        <view class="l-bottom">

        </view>
    </view>

    <view class="l-add">
        <view class="l-adot">
        </view>
        <view class="l-vv">

        </view>
        <view class="l-hh">

        </view>
    </view>


    <view class="l-pe">
        <view class="l-pe1">
        </view>
        <view class="l-pe2">
        </view>
        <view class="l-pe3">
        </view>
        <view class="l-pe4">
        </view>
    </view>
    <view class="l-yzb">
        <view class="l-dot">
        </view>
        <view class="l-bottom">

        </view>
        <view class="l-back">
        </view>
        <view class="l-p">
        </view>
    </view>

:root {
  --leftMargin: 100px;
  --baseWidth: 400px;
  --baseHeight: 800px;
  --backgroundC:#080808;
  --contentC:#ffc000;
  --editWidth: 50px;
}

.l-pe{ // 百事logo
  top: 0px;
  position: fixed;
  width: var(--editWidth);
  height: var(--editWidth);
  left:  calc(var(--editWidth)*6);
  background-color:#00ffff;
  border-radius: 100%; 
  border-right: 6px solid #fff;
  border-top: 6px solid #fff;
  border-left: 6px solid #fff;
  border-bottom: 6px solid #fff;
} 

.l-pe .l-pe1{ // 宇智波家族徽章
  top: 0px;
  position: absolute;
  width: calc(var(--editWidth));
  height: calc(var(--editWidth)/2);
  left:  -0px;
  top:10px;
  transform:rotate(-8deg);
  background-color:#fff;
  border-radius: 50% 0  50% 0; 
} 
.l-pe .l-pe2{ // 
  top: 0px;
  position: absolute;
  width: calc(var(--editWidth)*2);
  height: calc(var(--editWidth)*2);
  left:  -50px;
  top:-64px;
  background-color:#ff0000;
  border-radius: 100%; 
} 

.l-pe .l-pe3{ //  
  top: 0px;
  position: absolute;
  width: var(--editWidth);
  height: var(--editWidth);
  left:  -60px;
  top:-60px;
  /* background-color:#00ffff; */
  border-radius: 100%; 
  border-right: 60px solid #fff;
  border-top: 60px solid #fff;
  border-left: 60px solid #fff;
  border-bottom: 60px solid #fff;
} 
.l-yzb{ // 宇智波家族徽章
  top: 0px;
  position: fixed;
  width: var(--editWidth);
  height: var(--editWidth);
  left:  calc(var(--editWidth)*3);
  background-color:#ff0000;
  border-radius: 100%; 
} 
.l-yzb .l-back {
  position: absolute;
  width: var(--editWidth);
  height: var(--editWidth); 
  border-radius: 100%;
  border-right: 40px solid var(--backgroundC);
  border-top: 40px solid var(--backgroundC);
  border-left: 40px solid var(--backgroundC);
  border-bottom: 40px solid var(--backgroundC);
  left:-40px;
  top:-40px;
}
.l-yzb .l-dot {
  position: absolute;
  width: var(--editWidth);
  height: var(--editWidth);
  left:-4px;
  top:30px;
  background-color: #ffffff;
  border-radius: 100%;
  border-right: 4px solid var(--backgroundC);
  border-top: 4px solid var(--backgroundC);
  border-left: 4px solid var(--backgroundC);
  border-bottom: 4px solid var(--backgroundC);
}
.l-yzb .l-p {
  position: absolute;
  width: 8px;
  height: 30px;
  left:20px;
  top:45px;
  background-color: #ffffff;
}

.l-add{
  top: 0px;
  position: fixed;
  width: var(--editWidth);
  height: var(--editWidth);
  left:  var(--editWidth);
  background-color: var(--backgroundC);
  border-radius: 100%;
}
.l-add .l-adot{
  animation:bounce-pen  2s infinite; 
  left: calc(var(--editWidth)*9/20);
  top: calc(var(--editWidth)*1/8);
  position: absolute;
  width: calc(var(--editWidth)/10);
  height: calc(var(--editWidth)/10);
  background-color: var(--contentC);
  border-radius:   100%;
}
.l-add .l-vv{
  
  position: absolute;
  width: calc(var(--editWidth)/10);
  height: calc(var(--editWidth)*6/10);
  left: calc(var(--editWidth)*9/20);
  top:calc(var(--editWidth)/4);
  background-color: var(--contentC);
  border-radius: 0 0 calc(var(--editWidth)/20) calc(var(--editWidth)/20);
}
.l-add .l-hh{
  
  position: absolute;
  height: calc(var(--editWidth)/10);
  width: calc(var(--editWidth)*2/3);
  top: calc(var(--editWidth)*9/20);
  left:calc(var(--editWidth)/6);
  background-color: var(--contentC);
  border-radius: calc(var(--editWidth)/20) calc(var(--editWidth)/20) calc(var(--editWidth)/20) calc(var(--editWidth)/20);
}

.l-edit{
  top: 0px;
  position: fixed;
  width: var(--editWidth);
  height: var(--editWidth);
  left: 0px;
  background-color: var(--backgroundC);
  border-radius: 100%;
  transform:rotate(30deg);
  transform-origin:50% 50%;
}

.l-edit .l-dot{
  animation:bounce-pen  2s infinite; 
  left: calc(var(--editWidth)*9/20);
  top: calc(var(--editWidth)*2/7);
  position: absolute;
  width: calc(var(--editWidth)/10);
  height: calc(var(--editWidth)/10);
  background-color: var(--contentC);
  border-radius:   100%;
}
.l-edit .l-bottom{
  left: calc(var(--editWidth)*9/20);
  top: calc(var(--editWidth)*3/7);
  position: absolute;
  width: calc(var(--editWidth)/10);
  height: calc(var(--editWidth)*2/5);
  background-color: var(--contentC);
  border-radius: 0 0 calc(var(--editWidth)/12) calc(var(--editWidth)/12);
  /* transform:scaleY(1.5); */
}



/* 弹跳 */
@-webkit-keyframes bounce-pen{
    0%,20%,50%,80%,100%{-webkit-transform:translateY(0);}
    40%{-webkit-transform:translateY(-6px);}
    60%{-webkit-transform:translateY(-3px);}
}