css3实现边旋转边移动 |css新文章

.box {
width: 100px;
height: 100px;
position: relative;
animation: moveAndRotate 3s linear infinite;
}
@keyframes moveAndRotate {
0% {
left: 0;
top: 0;
transform: rotate(0deg);
}
25% {
left: 200px;
top: 0;
transform: rotate(90deg);
}
50% {
left: 200px;
top: 200px;
transform: rotate(180deg);
}
75% {
left: 0;
top: 200px;
transform: rotate(270deg);
}
100% {
left: 0;
top: 0;
transform: rotate(360deg);
}
}

首先，大家创建一个 div 容器，设置它的宽度和高度，并将 position 属性设置为 relative，以便让它相对于父容器进行移动。然后，大家使用 CSS3 中的 animation 属性来定义一个名为 moveAndRotate 的动画。

大家在 keyframes 规则中定义了动画的运动轨迹，从 0% 开始，让它在容器的左上角开始，没有旋转。接着，在 25% 的位置，大家让容器的 left 属性设置为 200px，top 属性保持为 0，同时将 rotate 属性设置为 90deg，这样它就会顺时针旋转90度。在 50% 的位置，大家使容器向右下角移动，rotate 属性设为 180deg，继续逆时针旋转。在 75% 的位置，大家让容器回到左下角，同时旋转 270 度。最后，当动画完成时，大家使容器回到原来的位置，并旋转 360 度，回到起始位置。

通过这段代码，大家已经成功地使用 CSS3 来实现边旋转边移动的效果了。大家可以调整动画的持续时间，运动轨迹等属性，来创建出更多更精彩的动画效果。