css3 画小蜜蜂

「爱情、让人受尽委屈。」 2023-06-10 10:29 13阅读 0赞

1 <!doctype html>
     2 <html>
     3 <head>
     4 <meta charset="utf-8">
     5 <title>css3 bee</title>
     6 <style>
     7 .wrapper{ 
     8 width:390px;
     9 height:304px;
     10 display:flex;
     11 -webkit-box-orient:vertical;
     12 -webkit-box-direction:normal;
     13 flex-direction:column;
     14 -webkit-box-align:center;
     15 -ms-flex-align:center;
     16 align-items:center;
     17 
     18 }
     19 
     20 .bee-body{ 
     21 position: relative;
     22 margin: 136px 130px 38px 130px;
     23 min-width: 130px;
     24 background: #ffca31;
     25 height: 130px;
     26 width: 130px;
     27 border-radius: 50%;
     28 background-size: 97px 64px, cover, cover, cover;
     29 background-image:linear-gradient(to bottom,transparent 50%, #292929 50%)/*身上的黑色条纹*/,radial-gradient(circle at 51% 36%, #ffd764 47%, rgba(0, 0, 0, 0) 47%), 30 radial-gradient(circle at 51% 53%, #ffd764 55%, rgba(0, 0, 0, 0) 55%),radial-gradient(circle at 60% 53%, #ffebb1 60%,rgba(0,0,0,0) 60%);
     31     
     32     /*头 和 触角的原点*/
     33 box-shadow:35px -105px 0 -44px #FFD764,-35px -105px 0 -44px #FFD764,/*眼睛黄色*/
     34 32px -105px 0 -41px #ffebb1,-38px -105px 0 -41px #ffebb1,/*眼睛黄色外圈*/
     35 -3px -90px 0 -19px #ffd764,-2px -95px 0 -18px #ffebb1,-10px -94px 0 -17px #ffca31,/*头和头的外圈*/
     36 -40px -183px 0 -56px #262626,40px -183px 0 -56px #262626,/*触角的●*/
     37 -39px -185px 0 -55px #505050,41px -185px 0 -55px #505050,/*触角的●的二层*/
     38 -40px -185px 0 -52px #363636,40px -185px 0 -52px #363636;/*触角的●的三层*/
     39     }
     40     
     41 .bee-body:before{ 
     42 position:absolute;
     43 content:'';
     44 background-color:linear-gradient(to botom,transparent 50%,#434343 50%);
     45 background: -webkit-linear-gradient(top, transparent 50%, #434343 50%);
     46 width:130px;
     47 height:130px;
     48 right:0;
     49 bottom:0;
     50 background-size:130px 65px;
     51 border-radius:50%;
     52 -webkit-clip-path:ellipse(41% at 50% 50%);
     53 clip-path:ellipse(41% at 50% 50%);
     54         }
     55         
     56         /*尾巴*/
     57 .bee-body:after{ 
     58 position:absolute;
     59 content:'';
     60 width:30px;
     61 height:30px;
     62 bottom: -28px;
     63 left: 50px;
     64 background:linear-gradient(to right, #292929 50%, #363636 50%);
     65 clip-path:polygon(0 0,50% 100%,100% 0);
     66             }
     67             
     68         /*触角*/
     69 .antenae{ 
     70 position:relative;
     71 width:65px;
     72 height:65px;
     73 border-left:8px solid #363636;
     74 border-radius:50%;
     75 left: 75px;
     76 top: -125px;
     77 box-sizing: border-box;
     78 z-index: -2;
     79 -webkit-transform:scaleY(-20deg);
     80 transform:skewY(-20deg);
     81             }
     82 .antenae:before{ 
     83 content:'';
     84 position:absolute;
     85 width:65px;
     86 height:65px;
     87 border-right:8px solid #363636;
     88 border-radius:50%;
     89 left: -95px;
     90 top:-36px;
     91 box-sizing: border-box;
     92 z-index: -2;
     93 -webkit-transform:scaleY(45deg);
     94 transform:skewY(45deg);
     95             }
     96             
     97         /*眼睛*/
     98 .blink{ 
     99 position:relative;
    100             }
    101 .blink:before,.blink:after{ 
    102 content:'';
    103 position:absolute;
    104 width:46px;
    105 height:46px;
    106 top: -64px;
    107 border-radius:50%;
    108 background-color:#f0f0f0;
    109 clip-path: ellipse(50% 20% at 50% 50%);
    110 -webkit-animation: blink 10s linear infinite;
    111 animation: blink 10s linear infinite;
    112             }
    113             
    114 .blink:before{ 
    115 left: 4px;
    116 background-image:radial-gradient(circle at 70% 44%,#Fff 10%,rgba(0,0,0,0) 12%), 117 radial-gradient(circle at 67% 48%,#363636 18%,rgba(0,0,0,0) 20%), 118 radial-gradient(circle at 65% 49%,#434343 20%,rgba(0,0,0,0) 29%), 119 radial-gradient(circle at 65% 50%,#292929 30%,rgba(0,0,0,0) 32%), 120 radial-gradient(ellipse at 55% 58%, #f8f8ff 50%, rgba(0, 0, 0, 0) 50%), 121 radial-gradient(circle at 80% 71%, #ffffff 67%, rgba(0, 0, 0, 0) 65%);
    122             }        
    123 .blink:after{ 
    124 right: 9px;
    125 background-image: radial-gradient(circle at 35% 44%,#Fff 11%,rgba(0,0,0,0) 13%), 126 radial-gradient(circle at 47% 48%,#363636 23%,rgba(0,0,0,0) 24%), 127 radial-gradient(circle at 45% 49%,#434343 30%,rgba(0,0,0,0) 33%), 128 radial-gradient(circle at 45% 50%,#292929 33%,rgba(0,0,0,0) 35%), 129 radial-gradient(ellipse at 55% 58%, #f8f8ff 50%, rgba(0, 0, 0, 0) 48%), 130 radial-gradient(circle at 73% 65%, #ffffff 67%, rgba(0, 0, 0, 0) 65%);
    131         }
    132         
    133         /*嘴巴*/
    134 .mouth{ 
    135 position:absolute;
    136 width:20px;
    137 height:20px;
    138 border-radius:50%;
    139 left: 50px;
    140 top: -20px;
    141 box-sizing:border-box;
    142 border-bottom:5px solid #363636;
    143             }
    144             
    145     /*翅膀*/        
    146 .bee-left{ 
    147 position:absolute;
    148 width:140px;
    149 height:100px;
    150 left: -110px;
    151 top: -82px;
    152 background-color:#f8f8ff;
    153 transform:skewY(30deg);
    154 border-radius:26px 108px 35px 60px;
    155 box-shadow:inset 2px 35px 0px 6px #fff;
    156 z-index:-1;
    157         }
    158 .bee-left:after{ 
    159 content:'';
    160 position:absolute;
    161 width:100px;
    162 height:120px;
    163 left: 40px;
    164 bottom: -95px;
    165 background-color:#F0F0F0;
    166 border-radius:135px 36px 135px 50px;
    167 box-shadow:inset 13px 15px 1px -7px #fff, inset 18px 18px 3px 6px #f6f6f6;
    168         }
    169 .bee-right{ 
    170 position:absolute;
    171 width:140px;
    172 height:100px;
    173 left:92px;
    174 top: -82px;
    175 background-color:#f8f8ff;
    176 transform:skewY(-30deg);
    177 border-radius:108px 38px 75px 60px;
    178 box-shadow:inset 2px 35px 0px 6px #fff;
    179 z-index:-1;
    180         }
    181 .bee-right:after{ 
    182 content:'';
    183 position:absolute;
    184 width:100px;
    185 height:120px;
    186 right: 25px;
    187 bottom: -100px;
    188 background-color:#F0F0F0;
    189 border-radius:46px 184px 100px 185px;
    190 box-shadow:inset -13px 15px 1px -7px #fff, inset -18px 18px 3px 6px #f6f6f6;
    191         }
    192         
    193 /*眨眼睛*/    
    194 @-webkit-keyframes blink { 
    195 0% { 196 -webkit-clip-path: ellipse(50% 50% at 50% 50%);
    197 clip-path: ellipse(50% 50% at 50% 50%);
    198   }
    199 9% { 
    200 -webkit-clip-path: ellipse(50% 50% at 50% 50%);
    201 clip-path: ellipse(50% 50% at 50% 50%);
    202   }
    203 10% { 
    204 -webkit-clip-path: ellipse(50% 5% at 50% 50%);
    205 clip-path: ellipse(50% 5% at 50% 50%);
    206   }
    207 11% { 
    208 -webkit-clip-path: ellipse(50% 50% at 50% 50%);
    209 clip-path: ellipse(50% 50% at 50% 50%);
    210   }
    211 30% { 
    212 -webkit-clip-path: ellipse(50% 50% at 50% 50%);
    213 clip-path: ellipse(50% 50% at 50% 50%);
    214   }
    215 31% { 
    216 -webkit-clip-path: ellipse(50% 5% at 50% 50%);
    217 clip-path: ellipse(50% 5% at 50% 50%);
    218   }
    219 32% { 
    220 -webkit-clip-path: ellipse(50% 50% at 50% 50%);
    221 clip-path: ellipse(50% 50% at 50% 50%);
    222   }
    223 33% { 
    224 -webkit-clip-path: ellipse(50% 50% at 50% 50%);
    225 clip-path: ellipse(50% 50% at 50% 50%);
    226   }
    227 34% { 
    228 -webkit-clip-path: ellipse(50% 5% at 50% 50%);
    229 clip-path: ellipse(50% 5% at 50% 50%);
    230   }
    231 35% { 
    232 -webkit-clip-path: ellipse(50% 50% at 50% 50%);
    233 clip-path: ellipse(50% 50% at 50% 50%);
    234   }
    235 50% { 
    236 -webkit-clip-path: ellipse(50% 50% at 50% 50%);
    237 clip-path: ellipse(50% 50% at 50% 50%);
    238   }
    239 60% { 
    240 -webkit-clip-path: ellipse(50% 20% at 50% 50%);
    241 clip-path: ellipse(50% 20% at 50% 50%);
    242   }
    243 61% { 
    244 -webkit-clip-path: ellipse(50% 20% at 50% 50%);
    245 clip-path: ellipse(50% 20% at 50% 50%);
    246   }
    247 69% { 
    248 -webkit-clip-path: ellipse(50% 20% at 50% 50%);
    249 clip-path: ellipse(50% 20% at 50% 50%);
    250   }
    251 70% { 
    252 -webkit-clip-path: ellipse(50% 50% at 50% 50%);
    253 clip-path: ellipse(50% 50% at 50% 50%);
    254   }
    255 79% { 
    256 -webkit-clip-path: ellipse(50% 50% at 50% 50%);
    257 clip-path: ellipse(50% 50% at 50% 50%);
    258   }
    259 80% { 
    260 -webkit-clip-path: ellipse(50% 5% at 50% 50%);
    261 clip-path: ellipse(50% 5% at 50% 50%);
    262   }
    263 81% { 
    264 -webkit-clip-path: ellipse(50% 50% at 50% 50%);
    265 clip-path: ellipse(50% 50% at 50% 50%);
    266   }
    267 100% { 
    268 -webkit-clip-path: ellipse(50% 50% at 50% 50%);
    269 clip-path: ellipse(50% 50% at 50% 50%);
    270   }
    271 } 272 </style>
    273 </head>
    274 
    275 <body style="background-color:#AFF;">
    276 <div class="wrapper">
    277   <div class="bee">
    278       <div class="bee-body">
    279         <div class="blink"></div>
    280         <div class="antenae"></div>
    281         <div class="mouth"></div>
    282         <div class="bee-left"></div>
    283         <div class="bee-right"></div>
    284     </div>
    285   </div>
    286  </div>
    287  
    288 
    289 </body>
    290 </html>

![1009780-20180823182750992-1107965223.png][]

更多专业前端知识，请上 **【猿2048】www.mk2048.com**

[1009780-20180823182750992-1107965223.png]: /images/20230531/083089464d164c94910072c9e0dd8e5d.png