怎么用html5和css3实现动画分成人物头像

这篇文章主要讲解了“怎么用html5和css3实现动画分成人物头像”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“怎么用html5和css3实现动画分成人物头像”吧！

　　实现的代码。

　　html代码：

XML / HTML代码将内容复制到文本

< div class = 'stage' >   

        < div class = '图像' >   

            < img src = “ https://cache.yisu.com/upload/information/20220117/488/21350.jpg” >   

            < 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-9h4c0,3.3,2.7,6,6,6s6-2.7,6-6h4C24,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

感谢各位的阅读，以上就是“怎么用html5和css3实现动画分成人物头像”的内容了，经过本文的学习后，相信大家对怎么用html5和css3实现动画分成人物头像这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是亿速云，小编将为大家推送更多相关知识点的文章，欢迎关注！