CSS3动画片人物绘画

在网页设计中，动画是让网页更加生动丰富的一个重要元素。而CSS3动画作为一种常用的网页设计工具，受到了广泛的使用。本文将要介绍的是CSS3动画片人物绘画。

首先，我们需要准备好一张“静止”的图片，作为动画的基础。在这张图片上，将需要动的部分用不同颜色区分出来，比如：用红色表示头部，用蓝色表示左臂，用黄色表示右臂等等。接下来，我们需要使用CSS3的keyframes属性，来指定动画的每个阶段应该呈现的样式。

#character{
    position: absolute;
    top: 100px;
    left: 100px;
    width: 200px;
    height: 300px;
    background-image: url('static_img/character.png');
    background-size: cover;
    animation-name: move;
    animation-duration: 3s;
    animation-iteration-count: infinite;
}

@keyframes move {
    0% {
        background-position: 0px 0px;
    }
    25% {
        background-position: -200px 0px;
        transform: rotate(30deg);
    }
    50% {
        background-position: -400px 0px;
        transform: rotate(60deg);
    }
    75% {
        background-position: -600px 0px;
        transform: rotate(-30deg);
    }
    100% {
        background-position: -800px 0px;
        transform: rotate(0deg);
    }
}

在上面的代码中，我们首先使用id选择器将这个人物的样式进行了定义，并将其定位到了页面的指定位置。接着，在动画的开始位置（0%）时，将图片的background-position设置为0，即使用原始的图片。随后，在进行25%的动画阶段时，将图片向左移动200px，同时将其顺时针旋转30度。在接下来的50%和75%动画阶段时，我们分别将人物再向左移动200px，并分别对其进行60度和-30度的旋转。而在完成动画后的100%位置时，我们将人物回复到初始状态，即将background-position设置为-800px，同时将旋转角度设为0。最后，我们在character样式的animation-name属性中指定动画的名称，即move，并设置相应的动画时间和动画重复次数，在这里我们将动画循环无限次。

以上就是使用CSS3动画片人物绘画的基本方法和样式代码。通过这种方法，我们可以动态地呈现出一张原本静态且单调的图片，给人们带来更加生动、有趣的视觉体验。