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>
