这篇文章主要讲解了“怎么用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实现动画分成人物头像这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是亿速云，小编将为大家推送更多相关知识点的文章，欢迎关注！
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
