css3人物走动 |css 画一个十字

.person {
position: absolute;
left: 0;
top: 0;
animation: walk 2s infinite;
transform-origin: center bottom;
}
@keyframes walk {
0% {
transform: rotate(0) translateX(0);
}
50% {
transform: rotate(10deg) translateX(100px);
}
100% {
transform: rotate(0) translateX(0);
}
}

以上代码的效果是，一个绝对定位的元素从左侧不断向右侧行进。下面大家解释这些代码具体实现了哪些功能。

首先定义了一个class名为`person`，用于后面对元素调用。在对该元素位置进行规定之后，通过animation来指定该元素展示的动画效果，其中`walk`是大家为该元素起的名字，2s表示动画播放的周期，infinite表示该动画可以一直循环播放。

transform-origin可以规定元素变换的原点，这里大家规定了元素的原点为中心点底部，以使得元素转动时更加自然。

后面的关键帧定义了元素从左侧开始到达右侧的完整过程，50%时元素进行了一定程度的旋转和位移，以使得元素看起来更加自然。

以上就是如何利用CSS3完成人物走动效果的介绍，通过这种方法，设计师可以在网页中添加更多流畅的动态元素，使得网页的整体效果更加出色。