css3旋转的直线 |css阻止鼠标滚动

css 元素定位，css边界的代码，上下图片拼接css，css样式可以继承吗，CSS图片环绕右下角，css实现tab切换标签页，css阻止鼠标滚动 css3旋转的直线 |css阻止鼠标滚动

.line {
width: 100px;
height: 2px;
background-color: black;
transform-origin: 0 0;
transform: rotate(45deg);
}

以上代码中，大家创建了一个名为“line”的元素，设置了它的宽度为100px，高度为2px，并将背景色设置为黑色。接着，大家使用“transform-origin”属性将旋转的中心点设置在了左上角，默认情况下中心点是元素的中心。最后，大家使用“transform”属性对该元素进行旋转，旋转角度为45度。

如果你想让旋转后的直线沿着某个轨迹移动，可以添加动画效果。以下是一个简单的动画示例：

.line {
width: 100px;
height: 2px;
background-color: black;
transform-origin: 0 0;
animation: move 2s linear infinite;
}
@keyframes move {
0% {
transform: rotate(0deg) translateX(0px);
}
100% {
transform: rotate(360deg) translateX(100px);
}
}

在以上代码中，大家使用“@keyframes”规则定义了一个名为“move”的动画，该动画从旋转角度为0度的状态开始，到旋转角度为360度、向右移动100px的状态结束。大家将该动画应用到了“line”元素上，设置了动画时长为2秒，动画速度为线性，并设置为无限循环。

CSS3的旋转效果可以让大家创建出令人惊艳的视觉效果，希望以上两个示例能够帮助你了解旋转直线的实现方法和动画效果。