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

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

　　实现的代码。

　　html代码：

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代码：

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;