css3设置一条线旋转 |css的边界属性

.line {
position: absolute;
left: 50%;
top: 50%;
width: 3px;
height: 80px;
margin-top: -40px;
transform-origin: top;
animation: rotate 2s linear infinite;
}
@keyframes rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}

以上代码中，大家先定义了一个名为.line的CSS类，将其定位在页面的中心位置。大家设置了它的宽度为3像素、高度为80像素，并将其上端作为旋转的起点。大家还设置了其动画的时间为2秒，线性运动，并作为无限循环运行。

在上面的代码中，大家创建了一个名为rotate的动画，并将它应用到.line类中。在这个动画中，大家定义了旋转的起点和终点（从0度到360度）。

总的来说，以上代码实现了一个非常简单的旋转效果，可以非常容易地添加到任何网页中。这里需要注意的是，大家使用了transform-origin属性来将旋转的起点设置在线条的上端，这是非常重要的。