请写一个html自动旋转一圈图片的代码
以下是一个使用CSS的自动旋转一圈图片的代码:
<!DOCTYPE html>
<html>
<head>
<title>自动旋转一圈图片</title>
<style>
img {
animation: rotate 2s linear infinite;
}
@keyframes rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
</style>
</head>
<body>
<img src="https://via.placeholder.com/200x200" alt="旋转的图片">
</body>
</html>
在上面的代码中,我们使用了CSS中的animation属性来实现图片的旋转动画,并使用了@keyframes规则来定义旋转的起始和结束状态。这个动画将会持续2秒,并且会无限循环执行。你可以替换img元素中的src属性来使用你自己的图片。
原文地址: https://www.cveoy.top/t/topic/hmWX 著作权归作者所有。请勿转载和采集!