[分享]css做一个线旋转

CSS旋转效果可以给网页带来更多生动、活泼的效果，同时也可以提升用户体验。下面，本文将介绍如何使用CSS实现线旋转的效果。.yourelement { width: 2px; height: 100p...

CSS旋转效果可以给网页带来更多生动、活泼的效果，同时也可以提升用户体验。下面，本文将介绍如何使用CSS实现线旋转的效果。

.your-element {
    width: 2px;
    height: 100px;
    position: relative;
    margin: 0 auto;
    animation:rotate 5s linear infinite;
    -webkit-animation:rotate 5s linear infinite;
}

@keyframes rotate {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@-webkit-keyframes rotate {
    0% { -webkit-transform: rotate(0deg); }
    100% { -webkit-transform: rotate(360deg); }
} 

以上代码使用CSS的动画效果，实现了一个竖直的线条不停地旋转。我们在CSS样式表中定义了 .your-element 类，设置了其 width 为 2px，height 为 100px。并设置了相对定位，使其在其父元素中水平居中。

接下来，我们在该元素中设置了一个动画效果：rotate。在该动画效果中，我们定义了两个关键帧，0% 和 100%。0% 表示动画开始时该元素的状态，100% 表示动画结束时该元素的状态。在这里，我们在 0% 和 100% 处分别设置了 transform: rotate(0deg) 和 transform: rotate(360deg)。这样，在动画执行时，该元素就会按照我们设置的位置进行旋转。

最后，我们在该元素的样式中添加了 animation 属性，定义了它的动画名称、动画时长、动画速度、和动画次数。其中，infinite 表示动画无限循环播放。

通过以上代码，我们就成功地实现了一个线条旋转的效果。你可以根据自己的实际需求，灵活进行修改和调整。