css旋转动画持续 |css3 按钮动态效果

/* 要旋转的元素 */
.rotate {
width: 100px;
height: 100px;
background-color: blue;
/* 使元素绕z轴旋转 */
transform: rotateZ(0deg);
/* 使元素平滑过渡，持续时间为3秒 */
transition: transform 3s ease;
}
/* 鼠标悬停时，使元素旋转 */
.rotate:hover {
transform: rotateZ(360deg);
}

以上代码演示了一个简单的CSS旋转动画。大家首先创建一个div元素，并为其添加一个旋转属性。接下来，大家将动画的持续时间设置为3秒，并为元素添加一个:hover伪类，当鼠标悬停在元素上时，元素将绕着z轴旋转360度。

大家还可以进一步控制动画的速度，让元素的旋转速度加快或减慢。可以通过改变transition属性中的ease参数来实现：

/* 慢速旋转 */
.rotate {
transition: transform 3s ease-in;
}
/* 快速旋转 */
.rotate {
transition: transform 3s ease-out;
}
/* 先慢后快旋转 */
.rotate {
transition: transform 3s ease-in-out;
}

除了控制持续时间和速度之外，还可以通过其他CSS属性来修改旋转动画。例如，大家可以更改旋转的原点，让元素按照其他轴旋转，或者通过添加其他动画效果来增强旋转动画。总之，CSS旋转动画是一个非常有趣和灵活的动态效果，可以让网站更加生动活泼。