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>
浙公网安备 33010602011771号