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

网络
初秋的风似一支七彩的画笔，走到哪里，哪里就披上秋的盛装，五光十色的鲜花和着七彩的蝴蝶，迎着丰收的景象。五彩缤纷的鲜花撒满大地，丰收的果园一派欣欣向荣的景象，金黄色的稻谷堆满仓，大地一片喜气洋洋。

　　今天给大家分享一款html5和css3动画排列人物头像演示。这款实例页面初始时，只有中间的美女图，然后出现微笑图，紧接着出现小的人物图，慢慢的以动画的形式排列到页面中形成一个圆环。效果图如下：

　　实现的代码。

　　html代码：

XML/HTML Code复制内容到剪贴板
  1. <divclass='stage'>
  2. <divclass='image'>
  3. <imgsrc="https://pbs.twimg.com/profile_images/529224080751202304/UNLt5nUZ_400x400.jpeg">
  4. <divclass='smiley'>
  5. <svgwidth="30px"height="30px">
  6. <pathfill="#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,0zM20.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,8zM10.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,8zM15,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. <figureclass='avatar'>
  10. </figure>
  11. <figureclass='avatar'>
  12. </figure>
  13. <figureclass='avatar'>
  14. </figure>
  15. <figureclass='avatar'>
  16. </figure>
  17. <figureclass='avatar'>
  18. </figure>
  19. <figureclass='avatar'>
  20. </figure>
  21. <figureclass='avatar'>
  22. </figure>
  23. <figureclass='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:3pxsolidwhite;
  38. }
  39. .avatar:nth-of-type(1){
  40. -webkit-animation:ani12s0.1scubic-bezier(0.175,0.885,0.32,1.275)forwards;
  41. animation:ani12s0.1scubic-bezier(0.175,0.885,0.32,1.275)forwards;
  42. }
  43. @-webkit-keyframesani1{
  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. @keyframesani1{
  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:ani22s0.2scubic-bezier(0.175,0.885,0.32,1.275)forwards;
  65. animation:ani22s0.2scubic-bezier(0.175,0.885,0.32,1.275)forwards;
  66. }
  67. @-webkit-keyframesani2{
  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. @keyframesani2{
  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:ani32s0.3scubic-bezier(0.175,0.885,0.32,1.275)forwards;
  89. animation:ani32s0.3scubic-bezier(0.175,0.885,0.32,1.275)forwards;
  90. }
  91. @-webkit-keyframesani3{
  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. @keyframesani3{
  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:ani42s0.4scubic-bezier(0.175,0.885,0.32,1.275)forwards;
  113. animation:ani42s0.4scubic-bezier(0.175,0.885,0.32,1.275)forwards;
  114. }
  115. @-webkit-keyframesani4{
  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. @keyframesani4{
  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:ani52s0.5scubic-bezier(0.175,0.885,0.32,1.275)forwards;
  137. animation:ani52s0.5scubic-bezier(0.175,0.885,0.32,1.275)forwards;
  138. }
  139. @-webkit-keyframesani5{
  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. @keyframesani5{
  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:ani62s0.6scubic-bezier(0.175,0.885,0.32,1.275)forwards;
  161. animation:ani62s0.6scubic-bezier(0.175,0.885,0.32,1.275)forwards;
  162. }
  163. @-webkit-keyframesani6{
  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. @keyframesani6{
  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:ani72s0.7scubic-bezier(0.175,0.885,0.32,1.275)forwards;
  185. animation:ani72s0.7scubic-bezier(0.175,0.885,0.32,1.275)forwards;
  186. }
  187. @-webkit-keyframesani7{
  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. @keyframesani7{
  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:ani82s0.8scubic-bezier(0.175,0.885,0.32,1.275)forwards;
  209. animation:ani82s0.8scubic-bezier(0.175,0.885,0.32,1.275)forwards;
  210. }
  211. @-webkit-keyframesani8{
  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. @keyframesani8{
  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:bounce3s1.8scubic-bezier(0.175,0.885,0.32,1.275)forwards,colorchange1s1.8scubic-bezier(0.175,0.885,0.32,1.275)forwards;
  233. animation:bounce3s1.8scubic-bezier(0.175,0.885,0.32,1.275)forwards,colorchange1s1.8scubic-bezier(0.175,0.885,0.32,1.275)forwards;
  234. }
  235. .avatar:nth-of-type(7):before{
  236. -webkit-animation:bounce3s2scubic-bezier(0.175,0.885,0.32,1.275)forwards,colorchange1s2scubic-bezier(0.175,0.885,0.32,1.275)forwards;
  237. animation:bounce3s2scubic-bezier(0.175,0.885,0.32,1.275)forwards,colorchange1s2scubic-bezier(0.175,0.885,0.32,1.275)forwards;
  238. }
  239. .avatar:nth-of-type(3):before{
  240. -webkit-animation:bounce3s2.8scubic-bezier(0.175,0.885,0.32,1.275)forwards,colorchange1s2.8scubic-bezier(0.175,0.885,0.32,1.275)forwards;
  241. animation:bounce3s2.8scubic-bezier(0.175,0.885,0.32,1.275)forwards,colorchange1s2.8scubic-bezier(0.175,0.885,0.32,1.275)forwards;
  242. }
  243. .avatar:nth-of-type(1):before{
  244. -webkit-animation:bounce3s3scubic-bezier(0.175,0.885,0.32,1.275)forwards,colorchange1s3scubic-bezier(0.175,0.885,0.32,1.275)forwards;
  245. animation:bounce3s3scubic-bezier(0.175,0.885,0.32,1.275)forwards,colorchange1s3scubic-bezier(0.175,0.885,0.32,1.275)forwards;
  246. }
  247. .avatar:nth-of-type(6):before{
  248. -webkit-animation:bounce3s3.2scubic-bezier(0.175,0.885,0.32,1.275)forwards,colorchange1s3.2scubic-bezier(0.175,0.885,0.32,1.275)forwards;
  249. animation:bounce3s3.2scubic-bezier(0.175,0.885,0.32,1.275)forwards,colorchange1s3.2scubic-bezier(0.175,0.885,0.32,1.275)forwards;
  250. }
  251. .avatar:nth-of-type(5):before{
  252. -webkit-animation:bounce3s3.8scubic-bezier(0.175,0.885,0.32,1.275)forwards,colorchange1s3.8scubic-bezier(0.175,0.885,0.32,1.275)forwards;
  253. animation:bounce3s3.8scubic-bezier(0.175,0.885,0.32,1.275)forwards,colorchange1s3.8scubic-bezier(0.175,0.885,0.32,1.275)forwards;
  254. }
  255. .avatar:nth-of-type(8):before{
  256. -webkit-animation:bounce3s4scubic-bezier(0.175,0.885,0.32,1.275)forwards,colorchange1s4scubic-bezier(0.175,0.885,0.32,1.275)forwards;
  257. animation:bounce3s4scubic-bezier(0.175,0.885,0.32,1.275)forwards,colorchange1s4scubic-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. .imageimg{
  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:3pxsolid#e7f5d1;
  289. border-radius:50%;
  290. -webkit-animation:pulse1s1.4sease-out;
  291. animation:pulse1s1.4sease-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:5pxsolidwhite;
  304. -webkit-animation:bounce5scubic-bezier(0.175,0.885,0.32,1.275)forwards;
  305. animation:bounce5scubic-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.smileysvg{
  312. position:absolute;
  313. top:0;
  314. rightright:0;
  315. bottombottom:0;
  316. left:0;
  317. margin:auto;
  318. -webkit-animation:bounce5s0.075scubic-bezier(0.175,0.885,0.32,1.275)forwards;
  319. animation:bounce5s0.075scubic-bezier(0.175,0.885,0.32,1.275)forwards;
  320. }
  322. @-webkit-keyframesbounce{
  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. @keyframesbounce{
  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-keyframespulse{
  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. @keyframespulse{
  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-keyframescolorchange{
  382. 0%{
  383. background:#bec4bc;
  384. }
  385. 100%{
  386. background:#b5e763;
  387. }
  388. }
  389. @keyframescolorchange{
  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动画排列人物头像代码演示，谢谢阅读，希望能帮到大家，请继续关注，我们会努力分享更多优秀的文章。