一款利用html5和css3动画排列人物头像的实例演示

一款利用html5和css3动画排列人物头像的实例演示

　　今天给大家分享一款html5和css3动画排列人物头像演示。

这款实例页面初始时，只有中间的美女图，然后出现微笑图，紧接着出现小的人物图，慢慢的以动画的形式排列到页面中形成一个圆环。

效果图如下：

　　实现的代码。

　　html代码：

XML/HTML Code复制内容到剪贴板

1. <div class='stage'>  
2.         <div class='image'>  
3.             <img src="https://pbs.twimg.com/profile_images/529224080751202304/UNLt5nUZ_400x400.jpeg">  
4.             <div class='smiley'>  
5.                 <svg width="30px" height="30px">  
6.                     <path fill="#effedd" d="M15,0C6.7,0,0,6.7,0,15c0,8.3,6.7,15,15,15s15-6.7,15-15C30,6.7,23.3,0,15,0z M20.5,8c1.4,0,2.5,1.1,2.5,2.5c0,1.4-1.1,2.5-2.5,2.5S18,11.9,18,10.5C18,9.1,19.1,8,20.5,8z M10.5,8c1.4,0,2.5,1.1,2.5,2.5c0,1.4-1.1,2.5-2.5,2.5S8,11.9,8,10.5C8,9.1,9.1,8,10.5,8z M15,26c-5,0-9-4-9-9h3c0,3.3,2.7,6,6,6s6-2.7,6-6h3C24,22,20,26,15,26z" /></svg>  
7.             </div>  
8.         </div>  
9.         <figure class='avatar'>  
10.         </figure>  
11.         <figure class='avatar'>  
12.         </figure>  
13.         <figure class='avatar'>  
14.         </figure>  
15.         <figure class='avatar'>  
16.         </figure>  
17.         <figure class='avatar'>  
18.         </figure>  
19.         <figure class='avatar'>  
20.         </figure>  
21.         <figure class='avatar'>  
22.         </figure>  
23.         <figure class='avatar'>  
24.         </figure>  
25.     </div>  

　　css3代码：

CSS Code复制内容到剪贴板

1. .stage {   
2.   position: absolute;   
3.   top: 0;   
4.   rightright: 0;   
5.   bottombottom: 0;   
6.   left: 0;   
7.   margin: auto;   
8.   height: 460px;   
9.   width: 480px;   
10. }   
11.   
12. .avatar {   
13.   position: absolute;   
14.   top: 0;   
15.   rightright: 0;   
16.   bottombottom: 0;   
17.   left: 0;   
18.   margin: auto;   
19.   height: 64px;   
20.   width: 64px;   
21.   background-repeat: no-repeat;   
22.   background-size: cover;   
23.   border-radius: 50%;   
24.   -webkit-transform-origin: center;   
25.       -ms-transform-origin: center;   
26.           transform-origin: center;   
27. }   
28. .avatar:before {   
29.   content: '';   
30.   position: absolute;   
31.   top: -8%;   
32.   rightright: -8%;   
33.   height: 17.06667px;   
34.   width: 17.06667px;   
35.   background: #bec4bc;   
36.   border-radius: 50%;   
37.   border: 3px solid white;   
38. }   
39. .avatar:nth-of-type(1) {   
40.   -webkit-animation: ani1 2s 0.1s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;   
41.           animation: ani1 2s 0.1s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;   
42. }   
43. @-webkit-keyframes ani1 {   
44.   0%, 20% {   
45.     -webkit-transform: rotate(45deg) translate(0) rotate(-45deg);   
46.             transform: rotate(45deg) translate(0) rotate(-45deg);   
47.   }   
48.   34%, 100% {   
49.     -webkit-transform: rotate(45deg) translate(208px) rotate(-45deg);   
50.             transform: rotate(45deg) translate(208px) rotate(-45deg);   
51.   }   
52. }   
53. @keyframes ani1 {   
54.   0%, 20% {   
55.     -webkit-transform: rotate(45deg) translate(0) rotate(-45deg);   
56.             transform: rotate(45deg) translate(0) rotate(-45deg);   
57.   }   
58.   34%, 100% {   
59.     -webkit-transform: rotate(45deg) translate(208px) rotate(-45deg);   
60.             transform: rotate(45deg) translate(208px) rotate(-45deg);   
61.   }   
62. }   
63. .avatar:nth-of-type(2) {   
64.   -webkit-animation: ani2 2s 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;   
65.           animation: ani2 2s 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;   
66. }   
67. @-webkit-keyframes ani2 {   
68.   0%, 20% {   
69.     -webkit-transform: rotate(90deg) translate(0) rotate(-90deg);   
70.             transform: rotate(90deg) translate(0) rotate(-90deg);   
71.   }   
72.   34%, 100% {   
73.     -webkit-transform: rotate(90deg) translate(208px) rotate(-90deg);   
74.             transform: rotate(90deg) translate(208px) rotate(-90deg);   
75.   }   
76. }   
77. @keyframes ani2 {   
78.   0%, 20% {   
79.     -webkit-transform: rotate(90deg) translate(0) rotate(-90deg);   
80.             transform: rotate(90deg) translate(0) rotate(-90deg);   
81.   }   
82.   34%, 100% {   
83.     -webkit-transform: rotate(90deg) translate(208px) rotate(-90deg);   
84.             transform: rotate(90deg) translate(208px) rotate(-90deg);   
85.   }   
86. }   
87. .avatar:nth-of-type(3) {   
88.   -webkit-animation: ani3 2s 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;   
89.           animation: ani3 2s 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;   
90. }   
91. @-webkit-keyframes ani3 {   
92.   0%, 20% {   
93.     -webkit-transform: rotate(135deg) translate(0) rotate(-135deg);   
94.             transform: rotate(135deg) translate(0) rotate(-135deg);   
95.   }   
96.   34%, 100% {   
97.     -webkit-transform: rotate(135deg) translate(208px) rotate(-135deg);   
98.             transform: rotate(135deg) translate(208px) rotate(-135deg);   
99.   }   
100. }   
101. @keyframes ani3 {   
102.   0%, 20% {   
103.     -webkit-transform: rotate(135deg) translate(0) rotate(-135deg);   
104.             transform: rotate(135deg) translate(0) rotate(-135deg);   
105.   }   
106.   34%, 100% {   
107.     -webkit-transform: rotate(135deg) translate(208px) rotate(-135deg);   
108.             transform: rotate(135deg) translate(208px) rotate(-135deg);   
109.   }   
110. }   
111. .avatar:nth-of-type(4) {   
112.   -webkit-animation: ani4 2s 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;   
113.           animation: ani4 2s 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;   
114. }   
115. @-webkit-keyframes ani4 {   
116.   0%, 20% {   
117.     -webkit-transform: rotate(180deg) translate(0) rotate(-180deg);   
118.             transform: rotate(180deg) translate(0) rotate(-180deg);   
119.   }   
120.   34%, 100% {   
121.     -webkit-transform: rotate(180deg) translate(208px) rotate(-180deg);   
122.             transform: rotate(180deg) translate(208px) rotate(-180deg);   
123.   }   
124. }   
125. @keyframes ani4 {   
126.   0%, 20% {   
127.     -webkit-transform: rotate(180deg) translate(0) rotate(-180deg);   
128.             transform: rotate(180deg) translate(0) rotate(-180deg);   
129.   }   
130.   34%, 100% {   
131.     -webkit-transform: rotate(180deg) translate(208px) rotate(-180deg);   
132.             transform: rotate(180deg) translate(208px) rotate(-180deg);   
133.   }   
134. }   
135. .avatar:nth-of-type(5) {   
136.   -webkit-animation: ani5 2s 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;   
137.           animation: ani5 2s 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;   
138. }   
139. @-webkit-keyframes ani5 {   
140.   0%, 20% {   
141.     -webkit-transform: rotate(225deg) translate(0) rotate(-225deg);   
142.             transform: rotate(225deg) translate(0) rotate(-225deg);   
143.   }   
144.   34%, 100% {   
145.     -webkit-transform: rotate(225deg) translate(208px) rotate(-225deg);   
146.             transform: rotate(225deg) translate(208px) rotate(-225deg);   
147.   }   
148. }   
149. @keyframes ani5 {   
150.   0%, 20% {   
151.     -webkit-transform: rotate(225deg) translate(0) rotate(-225deg);   
152.             transform: rotate(225deg) translate(0) rotate(-225deg);   
153.   }   
154.   34%, 100% {   
155.     -webkit-transform: rotate(225deg) translate(208px) rotate(-225deg);   
156.             transform: rotate(225deg) translate(208px) rotate(-225deg);   
157.   }   
158. }   
159. .avatar:nth-of-type(6) {   
160.   -webkit-animation: ani6 2s 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;   
161.           animation: ani6 2s 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;   
162. }   
163. @-webkit-keyframes ani6 {   
164.   0%, 20% {   
165.     -webkit-transform: rotate(270deg) translate(0) rotate(-270deg);   
166.             transform: rotate(270deg) translate(0) rotate(-270deg);   
167.   }   
168.   34%, 100% {   
169.     -webkit-transform: rotate(270deg) translate(208px) rotate(-270deg);   
170.             transform: rotate(270deg) translate(208px) rotate(-270deg);   
171.   }   
172. }   
173. @keyframes ani6 {   
174.   0%, 20% {   
175.     -webkit-transform: rotate(270deg) translate(0) rotate(-270deg);   
176.             transform: rotate(270deg) translate(0) rotate(-270deg);   
177.   }   
178.   34%, 100% {   
179.     -webkit-transform: rotate(270deg) translate(208px) rotate(-270deg);   
180.             transform: rotate(270deg) translate(208px) rotate(-270deg);   
181.   }   
182. }   
183. .avatar:nth-of-type(7) {   
184.   -webkit-animation: ani7 2s 0.7s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;   
185.           animation: ani7 2s 0.7s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;   
186. }   
187. @-webkit-keyframes ani7 {   
188.   0%, 20% {   
189.     -webkit-transform: rotate(315deg) translate(0) rotate(-315deg);   
190.             transform: rotate(315deg) translate(0) rotate(-315deg);   
191.   }   
192.   34%, 100% {   
193.     -webkit-transform: rotate(315deg) translate(208px) rotate(-315deg);   
194.             transform: rotate(315deg) translate(208px) rotate(-315deg);   
195.   }   
196. }   
197. @keyframes ani7 {   
198.   0%, 20% {   
199.     -webkit-transform: rotate(315deg) translate(0) rotate(-315deg);   
200.             transform: rotate(315deg) translate(0) rotate(-315deg);   
201.   }   
202.   34%, 100% {   
203.     -webkit-transform: rotate(315deg) translate(208px) rotate(-315deg);   
204.             transform: rotate(315deg) translate(208px) rotate(-315deg);   
205.   }   
206. }   
207. .avatar:nth-of-type(8) {   
208.   -webkit-animation: ani8 2s 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;   
209.           animation: ani8 2s 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;   
210. }   
211. @-webkit-keyframes ani8 {   
212.   0%, 20% {   
213.     -webkit-transform: rotate(360deg) translate(0) rotate(-360deg);   
214.             transform: rotate(360deg) translate(0) rotate(-360deg);   
215.   }   
216.   34%, 100% {   
217.     -webkit-transform: rotate(360deg) translate(208px) rotate(-360deg);   
218.             transform: rotate(360deg) translate(208px) rotate(-360deg);   
219.   }   
220. }   
221. @keyframes ani8 {   
222.   0%, 20% {   
223.     -webkit-transform: rotate(360deg) translate(0) rotate(-360deg);   
224.             transform: rotate(360deg) translate(0) rotate(-360deg);   
225.   }   
226.   34%, 100% {   
227.     -webkit-transform: rotate(360deg) translate(208px) rotate(-360deg);   
228.             transform: rotate(360deg) translate(208px) rotate(-360deg);   
229.   }   
230. }   
231. .avatar:nth-of-type(4):before, .avatar:nth-of-type(2):before {   
232.   -webkit-animation: bounce 3s 1.8s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards, colorchange 1s 1.8s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;   
233.           animation: bounce 3s 1.8s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards, colorchange 1s 1.8s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;   
234. }   
235. .avatar:nth-of-type(7):before {   
236.   -webkit-animation: bounce 3s 2s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards, colorchange 1s 2s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;   
237.           animation: bounce 3s 2s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards, colorchange 1s 2s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;   
238. }   
239. .avatar:nth-of-type(3):before {   
240.   -webkit-animation: bounce 3s 2.8s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards, colorchange 1s 2.8s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;   
241.           animation: bounce 3s 2.8s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards, colorchange 1s 2.8s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;   
242. }   
243. .avatar:nth-of-type(1):before {   
244.   -webkit-animation: bounce 3s 3s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards, colorchange 1s 3s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;   
245.           animation: bounce 3s 3s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards, colorchange 1s 3s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;   
246. }   
247. .avatar:nth-of-type(6):before {   
248.   -webkit-animation: bounce 3s 3.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards, colorchange 1s 3.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;   
249.           animation: bounce 3s 3.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards, colorchange 1s 3.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;   
250. }   
251. .avatar:nth-of-type(5):before {   
252.   -webkit-animation: bounce 3s 3.8s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards, colorchange 1s 3.8s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;   
253.           animation: bounce 3s 3.8s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards, colorchange 1s 3.8s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;   
254. }   
255. .avatar:nth-of-type(8):before {   
256.   -webkit-animation: bounce 3s 4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards, colorchange 1s 4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;   
257.           animation: bounce 3s 4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards, colorchange 1s 4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;   
258. }   
259.   
260. .image {   
261.   position: absolute;   
262.   top: 0;   
263.   rightright: 0;   
264.   bottombottom: 0;   
265.   left: 0;   
266.   margin: auto;   
267.   height: 220px;   
268.   width: 220px;   
269. }   
270. .image img {   
271.   position: relative;   
272.   height: 220px;   
273.   width: 220px;   
274.   border-radius: 50%;   
275.   z-index: 1;   
276. }   
277. .image:before {   
278.   position: absolute;   
279.   top: 0;   
280.   rightright: 0;   
281.   bottombottom: 0;   
282.   left: 0;   
283.   margin: auto;   
284.   content: '';   
285.   height: 100%;   
286.   width: 100%;   
287.   background: #f9fff7;   
288.   border: 3px solid #e7f5d1;   
289.   border-radius: 50%;   
290.   -webkit-animation: pulse 1s 1.4s ease-out;   
291.           animation: pulse 1s 1.4s ease-out;   
292.   -webkit-animation-iteration-count: 3;   
293.           animation-iteration-count: 3;   
294. }   
295. .image .smiley {   
296.   position: absolute;   
297.   top: -8px;   
298.   rightright: -8px;   
299.   height: 64px;   
300.   width: 64px;   
301.   background: #b5e763;   
302.   border-radius: 50%;   
303.   border: 5px solid white;   
304.   -webkit-animation: bounce 5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;   
305.           animation: bounce 5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;   
306.   -webkit-transform-origin: center;   
307.       -ms-transform-origin: center;   
308.           transform-origin: center;   
309.   z-index: 1;   
310. }   
311. .image .smiley svg {   
312.   position: absolute;   
313.   top: 0;   
314.   rightright: 0;   
315.   bottombottom: 0;   
316.   left: 0;   
317.   margin: auto;   
318.   -webkit-animation: bounce 5s 0.075s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;   
319.           animation: bounce 5s 0.075s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;   
320. }   
321.   
322. @-webkit-keyframes bounce {   
323.   0% {   
324.     -webkit-transform: scale(0);   
325.             transform: scale(0);   
326.   }   
327.   5% {   
328.     -webkit-transform: scale(1.5);   
329.             transform: scale(1.5);   
330.   }   
331.   10%, 100% {   
332.     -webkit-transform: scale(1);   
333.             transform: scale(1);   
334.   }   
335. }   
336.   
337. @keyframes bounce {   
338.   0% {   
339.     -webkit-transform: scale(0);   
340.             transform: scale(0);   
341.   }   
342.   5% {   
343.     -webkit-transform: scale(1.5);   
344.             transform: scale(1.5);   
345.   }   
346.   10%, 100% {   
347.     -webkit-transform: scale(1);   
348.             transform: scale(1);   
349.   }   
350. }   
351. @-webkit-keyframes pulse {   
352.   0% {   
353.     -webkit-transform: scale(0.1, 0.1);   
354.             transform: scale(0.1, 0.1);   
355.     opacity: 0.0;   
356.   }   
357.   50% {   
358.     opacity: 1.0;   
359.   }   
360.   100% {   
361.     -webkit-transform: scale(3);   
362.             transform: scale(3);   
363.     opacity: 0.0;   
364.   }   
365. }   
366. @keyframes pulse {   
367.   0% {   
368.     -webkit-transform: scale(0.1, 0.1);   
369.             transform: scale(0.1, 0.1);   
370.     opacity: 0.0;   
371.   }   
372.   50% {   
373.     opacity: 1.0;   
374.   }   
375.   100% {   
376.     -webkit-transform: scale(3);   
377.             transform: scale(3);   
378.     opacity: 0.0;   
379.   }   
380. }   
381. @-webkit-keyframes colorchange {   
382.   0% {   
383.     background: #bec4bc;   
384.   }   
385.   100% {   
386.     background: #b5e763;   
387.   }   
388. }   
389. @keyframes colorchange {   
390.   0% {   
391.     background: #bec4bc;   
392.   }   
393.   100% {   
394.     background: #b5e763;   
395.   }   
396. }   
397. .avatar:nth-of-type(1) {   
398.   background-image: url("128.jpg");   
399. }   
400.   
401. .avatar:nth-of-type(2) {   
402.   background-image: url("rasagy.jpg");   
403. }   
404.   
405. .avatar:nth-of-type(3) {   
406.   background-image: url("geeftvorm.jpg");   
407. }   
408.   
409. .avatar:nth-of-type(4) {   
410.   background-image: url("VinThomas.jpg");   
411. }   
412.   
413. .avatar:nth-of-type(5) {   
414.   background-image: url("ladylexy.jpg");   
415. }   
416.   
417. .avatar:nth-of-type(6) {   
418.   background-image: url("claudioguglieri.jpg");   
419. }   
420.   
421. .avatar:nth-of-type(7) {   
422.   background-image: url("jina.jpg");   
423. }   
424.   
425. .avatar:nth-of-type(8) {   
426.   background-image: url("peterme.jpg");   
427. }  

　　好了以上就是今天介绍的html5和css3动画排列人物头像代码演示，谢谢阅读，希望能帮到大家，请继续关注脚本之家，我们会努力分享更多优秀的文章。