今天我们来学习如何使用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); } }到这里,我们就成功的实现了图片绕中心旋转的代码,效果如下:希望这篇文章对你有所帮助,谢谢阅读!