CSS3动画片简笔画动物

CSS3动画片是一种利用CSS3技术制作的动画片。使用CSS3可以制作出各种炫酷的动画效果，其中之一就是简笔画动物。

.animal{
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: #f90;
    position: absolute;
    animation: ani 2s forwards;
}
.animal:before{
    content: "";
    display: block;
    width: 30px;
    height: 30px;
    background: #fff;
    border-radius: 50%;
    position: absolute;
    top: 30px;
    left: 15px;
}
.animal:after{
    content: "";
    display: block;
    width: 30px;
    height: 30px;
    background: #fff;
    border-radius: 50%;
    position: absolute;
    top: 30px;
    right: 15px;
}
@keyframes ani{
0%{
     transform: scale(1);
 }
30%{
     transform: scale(1.3);
}
50%{
     transform: rotate(20deg);
}
60%{
     transform: rotate(-20deg);
}
80%{
     transform: scale(1.2);
}
100%{
     transform: translateY(-500px);
 }
}
    

上面的代码是制作简笔画动物的关键，其中的".animal"是动物的样式，设置了宽度、高度、边框圆角、背景颜色等。使用":before"和":after"选择器分别添加了动物的眼睛。通过"@keyframes"定义了动画的关键帧，即动画状态的变化，最后在"animation"属性中将动画应用到了动物上。

通过更改关键帧的属性值，可以制作出不同的动画效果。例如，当我们将"transform: translateY(-500px); "修改为"transform: translateY(-200px); "时，动物将向上方移动的距离就会减小。

相信未来CSS3动画片在动画领域会有越来越广泛的应用，我们可以尝试使用CSS3制作更多有趣的动画效果。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！