欢迎来到DIVCSS5查找CSS资料与学习DIV CSS布局技术！
CSS手册 CSS3手册 CSS论坛 CSS培训 CSS任务 网闻
DIVCSS5培训 系统快速学会CSS布局技术！
DIVCSS5首页 > HTML入门 >

某个利用html5和css3动画分布人物头像的实例演示

今天给大家分享一个html5和css3动画分成人物头像演示。这种实例页面初始时，只有中间的美女图，然后出现微笑图，紧接着出现小的人物图，慢慢的以动画的形式排列到页面中形成一个圆环。效果图如下：
 
　　实现的代码。
　　html代码：
XML / HTML代码将内容复制到文本
< div class = 'stage' >   
        < div class = '图像' >   
            < img src = “ https://pbs.twimg.com/profile_images/529224080751202304/UNLt5nUZ_400x400.jpeg” >   
            < div class = '笑脸' >   
                < svg宽度= “ 30px”高度= “ 30px” >    
                    < 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 >     
            </ div >  
        </ div >  
        <图类= '头像' >   
        </图>  
        <图类= '头像' >   
        </图>  
        <图类= '头像' >   
        </图>  
        <图类= '头像' >   
        </图>  
        <图类= '头像' >   
        </图>  
        <图类= '头像' >   
        </图>  
        <图类= '头像' >   
        </图>  
        <图类= '头像' >   
        </图>  
    </ div >  
　　css3代码：
CSS代码将内容复制到文本
.stage {   
  职位： 绝对;   
  最高：0;   
  右右：0;   
  底部底部：0;   
  左：0;   
  保证金： 自动;   
  高度：  460px ;   
  宽度：  480px ;   
}   
  
.avatar {   
  职位： 绝对;   
  最高：0;   
  右右：0;   
  底部底部：0;   
  左：0;   
  保证金： 自动;   
  高度：  64px ;   
  宽度：  64px ;   
  背景重复： 不重复；   
  背景-大小：封面；   
  边界半径：50％;   
  -webkit-transform-origin：  center ;   
      -ms-transform-origin：  center ;   
          transform-origin：  center ;   
}   
.avatar：之前{   
  内容：  '' ;   
  职位： 绝对;   
  最高：-8％;   
  对对：-8％;   
  高度：17. 06667px ;   
  宽度：17. 06667px ;   
  背景：  ＃bec4bc ;   
  边界半径：50％;   
  边框：  3px纯白色;     
}   
.avatar：nth-​​of-type（1）{   
  -webkit-animation：ani1 2s 0.1s cube-bezier（0.175，0.885，0.32，1.275）转发;   
          动画：ani1 2s 0.1s cube-bezier（0.175，0.885，0.32，1.275）转发；   
}   
@ -webkit-keyframes ani1 {   
  0％，20％{   
    -webkit-transform：旋转（45deg）转换（0）旋转（-45deg）;   
            转换：rotate（45deg）translate（0）rotate（-45deg）;   
  }   
  34％，100％{   
    -webkit-transform：旋转（45deg）转换（208px ）旋转（-45deg）;   
            变换：rotate（45deg），translate（208px ），rotate（-45deg）;   
  }   
}   
@keyframes ani1 {   
  0％，20％{   
    -webkit-transform：旋转（45deg）转换（0）旋转（-45deg）;   
            转换：rotate（45deg）translate（0）rotate（-45deg）;   
  }   
  34％，100％{   
    -webkit-transform：旋转（45deg）转换（208px ）旋转（-45deg）;   
            变换：rotate（45deg），translate（208px ），rotate（-45deg）;   
  }   
}   
.avatar：nth-​​of-type（2）{   
  -webkit-animation：ani2 2s 0.2s立方贝塞尔（0.175，0.885，0.32，1.275）转发;   
          动画：ani2 2s 0.2s三次方贝塞尔（0.175，0.885，0.32，1.275）转发；   
}   
@ -webkit-keyframes ani2 {   
  0％，20％{   
    -webkit-transform：旋转（90deg）转换（0）旋转（-90deg）;   
            变换：旋转（90度）平移（0）旋转（-90度）;   
  }   
  34％，100％{   
    -webkit-transform：旋转（90deg）转换（208px ）旋转（-90deg）;   
            变换：rotate（90deg），translate（208px ），rotate（-90deg）;   
  }   
}   
@keyframes ani2 {   
  0％，20％{   
    -webkit-transform：旋转（90deg）转换（0）旋转（-90deg）;   
            变换：旋转（90度）平移（0）旋转（-90度）;   
  }   
  34％，100％{   
    -webkit-transform：旋转（90deg）转换（208px ）旋转（-90deg）;   
            变换：rotate（90deg），translate（208px ），rotate（-90deg）;   
  }   
}   
.avatar：nth-​​of-type（3）{   
  -webkit-animation：ani3 2s 0.3s cube-bezier（0.175，0.885，0.32，1.275）转发;   
          动画：ani3 2s 0.3s cube-bezier（0.175，0.885，0.32，1.275）转发；   
}   
@ -webkit-keyframes ani3 {   
  0％，20％{   
    -webkit-transform：旋转（135deg）转换（0）旋转（-135deg）;   
            变换：旋转（135度）平移（0）旋转（-135度）;   
  }   
  34％，100％{   
    -webkit-transform：旋转（135deg）转换（208px ）旋转（-135deg）;   
            变换：rotate（135deg）平移（208px ）rotate（-135deg）;   
  }   
}   
@keyframes ani3 {   
  0％，20％{   
    -webkit-transform：旋转（135deg）转换（0）旋转（-135deg）;   
            变换：旋转（135度）平移（0）旋转（-135度）;   
  }   
  34％，100％{   
    -webkit-transform：旋转（135deg）转换（208px ）旋转（-135deg）;   
            变换：rotate（135deg）平移（208px ）rotate（-135deg）;   
  }   
}   
.avatar：nth-​​of-type（4）{   
  -webkit-animation：ani4 2s 0.4s cube-bezier（0.175，0.885，0.32，1.275）转发;   
          动画：ani4 2s 0.4s立方贝塞尔曲线（0.175、0.885、0.32、1.275）向前；   
}   
@ -webkit-keyframes ani4 {   
  0％，20％{   
    -webkit-transform：旋转（180deg）转换（0）旋转（-180deg）;   
            变换：旋转（180度）平移（0）旋转（-180度）;   
  }   
  34％，100％{   
    -webkit-transform：旋转（180deg）转换（208px ）旋转（-180deg）;   
            变换：rotate（180deg）平移（208px ）rotate（-180deg）;   
  }   
}   
@keyframes ani4 {   
  0％，20％{   
    -webkit-transform：旋转（180deg）转换（0）旋转（-180deg）;   
            变换：旋转（180度）平移（0）旋转（-180度）;   
  }   
  34％，100％{   
    -webkit-transform：旋转（180deg）转换（208px ）旋转（-180deg）;   
            变换：rotate（180deg）平移（208px ）rotate（-180deg）;   
  }   
}   
.avatar：nth-​​of-type（5）{   
  -webkit-animation：ani5 2s 0.5s cube-bezier（0.175，0.885，0.32，1.275）转发;   
          动画：ani5 2s 0.5s cube-bezier（0.175，0.885，0.32，1.275）转发；   
}   
@ -webkit-keyframes ani5 {   
  0％，20％{   
    -webkit-transform：旋转（225deg）转换（0）旋转（-225deg）;   
            变换：rotate（225deg）translate（0）rotate（-225deg）;   
  }   
  34％，100％{   
    -webkit-transform：旋转（225deg）转换（208px ）旋转（-225deg）;   
            变换：rotate（225deg），translate（208px ），rotate（-225deg）;   
  }   
}   
@keyframes ani5 {   
  0％，20％{   
    -webkit-transform：旋转（225deg）转换（0）旋转（-225deg）;   
            变换：rotate（225deg）translate（0）rotate（-225deg）;   
  }   
  34％，100％{   
    -webkit-transform：旋转（225deg）转换（208px ）旋转（-225deg）;   
            变换：rotate（225deg），translate（208px ），rotate（-225deg）;   
  }   
}   
.avatar：nth-​​of-type（6）{   
  -webkit-animation：ani6 2s 0.6s立方贝塞尔（0.175，0.885，0.32，1.275）转发;   
          动画：ani6 2s 0.6s立方贝塞尔曲线（0.175、0.885、0.32、1.275）向前；   
}   
@ -webkit-keyframes ani6 {   
  0％，20％{   
    -webkit-transform：旋转（270deg）转换（0）旋转（-270deg）;   
            变换：旋转（270度）平移（0）旋转（-270度）;   
  }   
  34％，100％{   
    -webkit-transform：旋转（270deg ）转换（208px ）旋转（-270deg）;   
            变换：rotate（270deg ），translate（208px ），rotate（-270deg）;   
  }   
}   
@keyframes ani6 {   
  0％，20％{   
    -webkit-transform：旋转（270deg）转换（0）旋转（-270deg）;   
            变换：旋转（270度）平移（0）旋转（-270度）;   
  }   
  34％，100％{   
    -webkit-transform：旋转（270deg ）转换（208px ）旋转（-270deg）;   
            变换：rotate（270deg ），translate（208px ），rotate（-270deg）;   
  }   
}   
.avatar：nth-​​of-type（7）{   
  -webkit-animation：ani7 2s 0.7s cube-bezier（0.175，0.885，0.32，1.275）转发;   
          动画：ani7 2s 0.7s立方贝塞尔曲线（0.175、0.885、0.32、1.275）向前；   
}   
@ -webkit-keyframes ani7 {   
  0％，20％{   
    -webkit-transform：旋转（315deg）转换（0）旋转（-315deg）;   
            变换：旋转（315度）平移（0）旋转（-315度）;   
  }   
  34％，100％{   
    -webkit-transform：旋转（315deg）转换（208px ）旋转（-315deg）;   
            变换：rotate（315deg）平移（208px ）rotate（-315deg）;   
  }   
}   
@keyframes ani7 {   
  0％，20％{   
    -webkit-transform：旋转（315deg）转换（0）旋转（-315deg）;   
            变换：旋转（315度）平移（0）旋转（-315度）;   
  }   
  34％，100％{   
    -webkit-transform：旋转（315deg）转换（208px ）旋转（-315deg）;   
            变换：rotate（315deg）平移（208px ）rotate（-315deg）;   
  }   
}   
.avatar：nth-​​of-type（8）{   
  -webkit-animation：ani8 2s 0.8s cube-bezier（0.175，0.885，0.32，1.275）转发;   
          动画：ani8 2s 0.8s三次方贝塞尔（0.175，0.885，0.32，1.275）向前；   
}   
@ -webkit-keyframes ani8 {   
  0％，20％{   
    -webkit-transform：旋转（360deg）转换（0）旋转（-360deg）;   
            变换：旋转（360度）平移（0）旋转（-360度）;   
  }   
  34％，100％{   
    -webkit-transform：旋转（360deg）转换（208px ）旋转（-360deg）;   
            变换：rotate（360deg），translate（208px ），rotate（-360deg）;   
  }   
}   
@keyframes ani8 {   
  0％，20％{   
    -webkit-transform：旋转（360deg）转换（0）旋转（-360deg）;   
            变换：旋转（360度）平移（0）旋转（-360度）;   
  }   
  34％，100％{   
    -webkit-transform：旋转（360deg）转换（208px ）旋转（-360deg）;   
            变换：rotate（360deg），translate（208px ），rotate（-360deg）;   
  }   
}   
.avatar：nth-​​of-type（4）：之前，.avatar：nth-​​of-type（2）：before {   
  -webkit-animation：反弹3s 1.8s立方贝塞尔（0.175，0.885，0.32，1.275）向前，换色1s 1.8s立方贝塞尔（0.175，0.885，0.32，1.275）向前;   
          动画：跳动3s 1.8s立方贝塞尔（0.175，0.885，0.32，1.275）前锋，换色1s 1.8s立方贝塞尔（0.175，0.885，0.32，1.275）前锋；   
}   
.avatar：nth-​​of-type（7）：之前{   
  -webkit-animation：向前跳3s 2s立方贝塞尔（0.175，0.885，0.32，1.275），换色1s 2s立方贝塞尔（0.175，0.885，0.32，1.275）前;   
          动画：前跳3s 2s立方贝塞尔（0.175，0.885，0.32，1.275）向前，换色1s 2s立方贝塞尔（0.175，0.885，0.32，1.275）向前；   
}   
.avatar：nth-​​of-type（3）：之前{   
  -webkit-animation：弹跳3s 2.8s立方贝塞尔（0.175，0.885，0.32，1.275）前锋，colorchange 1s 2.8s立方贝塞尔（0.175，0.885，0.32，1.275）前锋;   
          动画：前跳3秒2.8秒立方贝塞尔（0.175，0.885，0.32，1.275），换色1秒2.8秒立方贝塞尔（0.175，0.885，0.32，1.275）；   
}   
.avatar：nth-​​of-type（1）：之前{   
  -webkit-animation：向前跳3s 3s立方贝塞尔（0.175，0.885，0.32，1.275），换色1s 3s立方贝塞尔（0.175，0.885，0.32，1.275）;   
          动画：前跳3s 3s三次方贝塞尔（0.175，0.885，0.32，1.275）前进，换色1s 3s三次方贝塞尔（0.175，0.885，0.32，1.275）前进；   
}   
.avatar：nth-​​of-type（6）：之前{   
  -webkit-animation：弹跳3s 3.2s立方贝塞尔（0.175，0.885，0.32，1.275）向前，换色1s 3.2s立方贝塞尔（0.175，0.885，0.32，1.275）向前;   
          动画：前跳3s 3.2s立方贝塞尔（0.175，0.885，0.32，1.275）向前，换色1s 3.2s立方贝塞尔（0.175，0.885，0.32，1.275）向前；   
}   
.avatar：nth-​​of-type（5）：之前{   
  -webkit-animation：反弹3s 3.8s立方贝塞尔（0.175，0.885，0.32，1.275）前锋，colorchange 1s 3.8s立方贝塞尔（0.175，0.885，0.32，1.275）前锋;   
          动画：前跳3秒3.8秒立方贝塞尔（0.175，0.885，0.32，1.275），变色1秒3.8秒立方贝塞尔（0.175，0.885，0.32，1.275）前；   
}   
.avatar：nth-​​of-type（8）：之前{   
  -webkit-animation：向前跳3s 4s立方贝塞尔（0.175，0.885，0.32，1.275），换色1s 4s立方贝塞尔（0.175，0.885，0.32，1.275）;   
          动画：前跳3s 4s立方贝塞尔（0.175，0.885，0.32，1.275）向前，换色1s 4s立方贝塞尔（0.175，0.885，0.32，1.275）前；   
}   
  
。图片 {   
  职位： 绝对;   
  最高：0;   
  右右：0;   
  底部底部：0;   
  左：0;   
  保证金： 自动;   
  高度：  220px ;   
  宽度：  220px ;   
}   
.image img {   
  职位： 相对;   
  高度：  220px ;   
  宽度：  220px ;   
  边界半径：50％;   
  z索引：1；   
}   
.image：之前{   
  职位： 绝对;   
  最高：0;   
  右右：0;   
  底部底部：0;   
  左：0;   
  保证金： 自动;   
  内容：  '' ;   
  高度：100％;   
  宽度：100％;   
  背景：  ＃f9fff7 ;   
  边框：  3px实线＃e7f5d1 ;     
  边界半径：50％;   
  -webkit-animation：脉冲1s 1.4s缓解；   
          动画：脉冲1秒1.4秒缓和；   
  -webkit-animation-iteration-count：3；   
          animation-iteration-count：3；   
}   
.image .smiley {   
  职位： 绝对;   
  顶部：-8px ;   
  右右：-8px ;   
  高度：  64px ;   
  宽度：  64px ;   
  背景：  ＃b5e763 ;   
  边界半径：50％;   
  边框：  5px纯白色;     
  -webkit-animation：向前弹跳5s立方贝塞尔曲线（0.175，0.885，0.32，1.275）;   
          动画：向前弹起5秒立方贝塞尔（0.175，0.885，0.32，1.275）；   
  -webkit-transform-origin：  center ;   
      -ms-transform-origin：  center ;   
          transform-origin：  center ;   
  z索引：1；   
}   
.image .smiley svg {   
  职位： 绝对;   
  最高：0;   
  右右：0;   
  底部底部：0;   
  左：0;   
  保证金： 自动;   
  -webkit-animation：弹跳5秒0.075s立方贝塞尔曲线（0.175，0.885，0.32，1.275）;   
          动画：前跳5秒0.075秒立方贝塞尔（0.175，0.885，0.32，1.275）；   
}   
  
@ -webkit-keyframes反弹{   
  0％{   
    -webkit-transform：scale（0）;   
            变换：标度（0）;   
  }   
  5％{   
    -webkit-transform：scale（1.5）;   
            转换：scale（1.5）;   
  }   
  10％，100％{   
    -webkit-transform：scale（1）;   
            转换：scale（1）;   
  }   
}   
  
@keyframes反弹{   
  0％{   
    -webkit-transform：scale（0）;   
            变换：标度（0）;   
  }   
  5％{   
    -webkit-transform：scale（1.5）;   
            转换：scale（1.5）;   
  }   
  10％，100％{   
    -webkit-transform：scale（1）;   
            转换：scale（1）;   
  }   
}   
@ -webkit-keyframes脉冲{   
  0％{   
    -webkit-transform：scale（0.1，0.1）;   
            转换：scale（0.1，0.1）;   
    不透明度：0.0;   
  }   
  50％{   
    透明度：1.0；   
  }   
  100％{   
    -webkit-transform：scale（3）;   
            转换：scale（3）;   
    不透明度：0.0;   
  }   
}   
@keyframes脉冲{   
  0％{   
    -webkit-transform：scale（0.1，0.1）;   
            转换：scale（0.1，0.1）;   
    不透明度：0.0;   
  }   
  50％{   
    透明度：1.0；   
  }   
  100％{   
    -webkit-transform：scale（3）;   
            转换：scale（3）;   
    不透明度：0.0;   
  }   
}   
@ -webkit-keyframes colorchange {   
  0％{   
    背景：  ＃bec4bc ;   
  }   
  100％{   
    背景：  ＃b5e763 ;   
  }   
}   
@keyframes colorchange {   
  0％{   
    背景：  ＃bec4bc ;   
  }   
  100％{   
    背景：  ＃b5e763 ;   
  }   
}   
.avatar：nth-​​of-type（1）{   
  背景图片：  url （“ 128.jpg” ）;   
}   
  
.avatar：nth-​​of-type（2）{   
  背景图片：  url （“ rasagy.jpg” ）;   
}   
  
.avatar：nth-​​of-type（3）{   
  背景图片：  url （“ geeftvorm.jpg” ）;   
}   
  
.avatar：nth-​​of-type（4）{   
  背景图片：  url （“ VinThomas.jpg” ）;   
}   
  
.avatar：nth-​​of-type（5）{   
  背景图片：  url （“ ladylexy.jpg” ）;   
}   
  
.avatar：nth-​​of-type（6）{   
  背景图片：  url （“ claudioguglieri.jpg” ）;   
}   
  
.avatar：nth-​​of-type（7）{   
  背景图片：  url （“ jina.jpg” ）;   
}   
  
.avatar：nth-​​of-type（8）{   
  背景图片：  url （“ peterme.jpg” ）;   
}  9161

如需转载，请注明文章出处和来源网址：http://www.divcss5.com/html/h60963.shtml

必备CSS教程Essential CSS Tutorials
必备HTML基础教程Essential HTML Tutorials
最新文章 NEWS
CSS 特效 CSS EFFECTS
相关文章 RELATED
热点文章 HOT