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

　　今天给大家分享一款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. }
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. }
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. }
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. }
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. }
401. .avatar:nth-of-type(2) {
402. background-image: url("rasagy.jpg");
403. }
405. .avatar:nth-of-type(3) {
406. background-image: url("geeftvorm.jpg");
407. }
409. .avatar:nth-of-type(4) {
410. background-image: url("VinThomas.jpg");
411. }
413. .avatar:nth-of-type(5) {
414. background-image: url("ladylexy.jpg");
415. }
417. .avatar:nth-of-type(6) {
418. background-image: url("claudioguglieri.jpg");
419. }
421. .avatar:nth-of-type(7) {
422. background-image: url("jina.jpg");
423. }
425. .avatar:nth-of-type(8) {
426. background-image: url("peterme.jpg");
427. }

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