旋转灯的实现

梦里随心

已于 2024-08-01 18:00:51 修改

阅读量136

点赞数 2

文章标签： css css3 html

于 2024-07-31 20:06:00 首次发布

本文链接：https://blog.csdn.net/m0_73745236/article/details/140813003

版权

代码实现：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>旋转灯</title>
    <style>
        div {
            position: relative;
            top: 300px;
            left: 33%;
            width: 600px;
            height: 60px;
            background: linear-gradient(135deg, black 25%, white 25%, white 50%, black 50%, black 75%, white 75%);
            background-size: 100px 100px;
            animation: move 0.5s linear infinite;
            transform: rotateZ(90deg);
            border: 1px solid #000;
        }

        @keyframes move {
            from {
                background-position: 0 0;
            }

            to {
                background-position: -100px 0;
            }
        }
    </style>
</head>

<body>
    <div></div>
</body>

</html>

注：

1. position: relative; 设置元素的定位方式为相对定位，相对于其正常位置进行定位。这允许使用 top、left 等属性调整元素在页面中的位置。

2. top: 300px; left: 33%; 这些属性在相对定位的基础上，将元素向下移动300像素，并水平偏移其容器宽度的33%。

3. width: 600px; height: 60px; 指定元素的宽度和高度，定义了元素的尺寸。

4. background 定义元素的背景。使用 linear-gradient 创建了一个从左上角到右下角的线性渐变，生成黑白条纹图案。渐变定义为：black 25%, white 25%, white 50%, black 50%, black 75%, white 75%，表示每个颜色的过渡点，以百分比表示。这里，黑色和白色在25%、50%、75%的位置交替出现，形成条纹。

5. background-size: 100px 100px; 设置背景图像的尺寸，使每个背景图像单元的宽度和高度为100像素。这样，条纹的宽度和间隔被定义为100像素。

6. animation: move 0.5s linear infinite; 定义动画属性，使用名称为 move 的关键帧动画。动画持续时间为0.5秒，运动方式为线性（匀速），并且无限循环。

7. transform: rotateZ(90deg); 使用 transform 属性将元素旋转90度。rotateZ 表示绕Z轴旋转，旋转90度使得原本对角线的条纹变为水平条纹。

8. border: 1px solid #000; 添加一个黑色的1像素宽的实线边框，给元素一个边框轮廓。

9. @keyframes move 定义关键帧动画 move，指定背景图像的移动方式。
from { background-position: 0 0; } 动画开始时，背景位置设置为(0, 0)。
to { background-position: -100px 0; } 动画结束时，背景位置设置为(-100px, 0)，表示背景图像向左移动100像素，但是由于旋转了90度所以变为向上移动了

成品展示