淘先锋技术网

首页 1 2 3 4 5 6 7
今天我们来学习如何使用CSS让图片绕中心旋转。这个效果可以为网页增添不少趣味和动感。 首先,要让图片绕中心旋转,我们需要将图片的位置移动到中心点。我们可以使用CSS的transform属性来实现。代码如下:
img{
transform: translate(-50%, -50%);
position: absolute;
top: 50%;
left: 50%;
}
上面的代码中,我们使用了translate函数来将图片向左上方移动50%的宽度和高度(也就是向中心点移动,因为图片是绝对定位)。 接下来,我们需要给图片添加旋转动画。我们可以使用CSS的animation属性来实现。代码如下:
img{
animation: spin 2s linear infinite;
}
@keyframes spin {
from {
transform:rotate(0deg);
}
to {
transform:rotate(360deg);
}
}
在上面的代码中,我们创建了一个名为spin的动画,设置了它的持续时间为2秒,以线性的方式(linear)无限循环播放。在@keyframes规则中,我们设置了旋转动画从0度旋转到360度旋转。 最终的代码实现就像这样:
p {
text-align: center;
}
img{
transform: translate(-50%, -50%);
position: absolute;
top: 50%;
left: 50%;
animation: spin 2s linear infinite;
}
@keyframes spin {
from {
transform:rotate(0deg);
}
to {
transform:rotate(360deg);
}
}
到这里,我们就成功的实现了图片绕中心旋转的代码,效果如下:

旋转图片

希望这篇文章对你有所帮助,谢谢阅读!