css 图片刷新旋转 |给div写css

.rotate-img {
transition: all 1s ease-in-out;
}
.rotate-img:hover {
transform: rotate(360deg);
}

上面的代码会让鼠标移动到图片上时，图片以360度的速度自动旋转。

你也可以添加类似下面的代码，让图片实现随机刷新的功能：

.refresh-img {
animation-name: spin;
animation-duration: 2s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
@keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}

这样，你的图片就能够不断地随机刷新。如果你想让图片只在鼠标悬停时随机刷新，可以添加下面这行代码：

.refresh-img:hover {
animation-name: spin;
animation-duration: 2s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}

现在，无论是在旋转还是刷新方面，你的网页都会比以前更具有生气了。