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

　　今天给大家分享一款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.