css 让背景图片不停旋转
时间: 2023-07-23 18:29:29 浏览: 321
CSS3实现的为图片添加旋转背景特效源码.zip
要让背景图片不停旋转,可以使用 CSS3 的动画效果。具体实现方法如下:
1. 使用 background-image 属性设置背景图片;
2. 使用 animation 属性设置动画,其中包括动画名称、持续时间、动画方式等;
3. 使用 transform 属性设置旋转效果。
代码示例:
```
/* 设置背景图片 */
body {
background-image: url('your-image-url');
background-repeat: no-repeat;
background-size: cover;
}
/* 设置动画 */
@keyframes rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
/* 应用动画 */
body {
animation-name: rotate;
animation-duration: 5s; /* 持续时间为 5 秒 */
animation-iteration-count: infinite; /* 无限循环 */
animation-timing-function: linear; /* 线性动画,保证匀速旋转 */
}
```
这样就可以让背景图片不停地旋转了。
阅读全文