css3实现边旋转边移动

CSS3是一种非常强大的前端技术，在实现网页效果和动画方面有很大的优势。今天我们将向大家介绍如何使用CSS3来实现边旋转边移动的效果。

.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 来实现边旋转边移动的效果了。我们可以调整动画的持续时间，运动轨迹等属性，来创建出更多更精彩的动画效果。

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