二维码防伪系统

新闻中心

各种活动实时推动

css控制图片循环转圈代码

发布时间:2024-10-13 点击次数:228

CSS本身不支持图片的循环旋转动画,但是可以通过结合HTML和CSS实现。以下是一个简单的例子,展示如何使用CSS keyframes和animation属性来实现图片循环旋转的效果:

HTML代码:

<div class="rotate-container">
  <img src="path-to-your-image.jpg" alt="Rotating Image" class="rotating-image">
</div>

CSS代码:

.rotate-container {
  width: 200px; /* 设置容器宽度 */
  height: 200px; /* 设置容器高度 */
  position: relative; /* 设置定位 */
}
 
.rotating-image {
  width: 100%; /* 设置图片宽度 */
  height: auto; /* 图片高度自适应 */
  animation: rotate 5s linear infinite; /* 应用动画 */
}
 
@keyframes rotate {
  from {
    transform: rotate(0deg); /* 开始旋转 */
  }
  to {
    transform: rotate(360deg); /* 结束旋转 */
  }
}

copy © 2025 星澜网络 All Rights Reserved

备案号:鲁ICP备2023015769号