css动画小车红绿灯
时间: 2024-04-22 16:19:51 浏览: 17
CSS动画可以用来创建各种效果,包括红绿灯的动画效果。下面是一个简单的CSS动画小车红绿灯的实现示例:
HTML代码:
```html
<div class="traffic-light">
<div class="light red"></div>
<div class="light yellow"></div>
<div class="light green"></div>
</div>
```
CSS代码:
```css
.traffic-light {
width: 100px;
height: 300px;
background-color: black;
border-radius: 10px;
position: relative;
}
.light {
width: 80px;
height: 80px;
border-radius: 50%;
margin: 10px auto;
}
.red {
background-color: red;
}
.yellow {
background-color: yellow;
}
.green {
background-color: green;
}
/* 动画效果 */
@keyframes light-animation {
0% {
opacity: 0.3;
}
50% {
opacity: 1;
}
100% {
opacity: 0.3;
}
}
.red,
.yellow,
.green {
animation: light-animation 3s infinite;
}
.yellow {
animation-delay: 2s;
}
.green {
animation-delay: 4s;
}
```
这段代码创建了一个黑色背景的小车红绿灯,通过CSS动画实现了红、黄、绿三个灯的闪烁效果。其中,`@keyframes`定义了动画的关键帧,`animation`属性指定了动画的名称、持续时间和循环次数,`animation-delay`属性指定了动画的延迟时间。