代码实现:
<!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度所以变为向上移动了
成品展示