CSS3动画片人物简笔画

CSS3动画是一种基于CSS3技术的动画效果，在制作网页时可以增加更加丰富的视觉效果，使网页更加生动、有趣。下面将介绍如何使用CSS3动画制作一个简单的片人物简笔画。

.p_body{
    width: 100px;
    height: 150px;
    position: absolute;
    top: 200px;
    left: calc(50% - 50px);
    animation: bodyMove 2s infinite alternate;
}
.p_head{
    width: 60px;
    height: 60px;
    position: absolute;
    top: 120px;
    left: calc(50% - 30px);
    border-radius: 50% 50% 0 0;
    animation: headMove 2s infinite alternate;
}
.p_face{
    width: 20px;
    height: 20px;
    background-color: white;
    position: absolute;
    top: 40px;
    left: calc(50% - 10px);
    border-radius: 50%;
    animation: faceMove 2s infinite alternate;
}
@keyframes bodyMove{
0%{
    transform: rotateZ(0deg);
}
100%{
    transform: rotateZ(2deg);
}
}
@keyframes headMove{
0%{
    transform: rotateZ(-20deg);
}
100%{
    transform: rotateZ(20deg);
}
}
@keyframes faceMove{
0%{
    transform: translateX(-10px);
}
50%{
    transform: translateX(10px);
}
100%{
    transform: translateX(-10px);
}
}
    

通过上述代码，我们可以看到一个片人物的简笔画动画，整个人物分为三个部分：身体、头部和脸部。其中，每个部分都设置了对应的CSS属性并设置动画效果，通过transform属性来实现旋转和平移动画效果。

值得一提的是，动画的设置还可以设置循环播放、自动反转、动画延迟等多种效果，可以根据需要自行设置。同时，还可以使用CSS3的transition动画效果和JavaScript等技术结合使用，制作更为复杂的动画效果。

总之，CSS3动画是一种非常强大的网页动画制作技术，能够使网页更加生动、有趣。对于网页制作人员来说，掌握CSS3动画技术是非常重要的一项技能。

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