[css] 第390天使用css写一个红绿灯交替的动画效果 #2352

haizhilin2013 · 2020-05-09T20:37:35Z

第390天使用css写一个红绿灯交替的动画效果

zhongwuhuang · 2020-07-23T09:49:03Z

<title>Document</title> <style> .box{ margin: 0 auto; width: 80px; border-radius: 40px; border: 3px solid #333; background-color: #333; display: flex; align-items: center; justify-content: space-between; flex-direction: column; } .light{ width: 50px; height: 50px; border-radius: 50%; margin: 10px 0; background: #000; opacity: .1; } .red{ background: #ff0000; animation: 12s red infinite; } .yellow{ background: #ffff00; animation: 12s yellow infinite; } .green{ background: #31da38; animation: 12s green infinite; } @Keyframes red{ 0%{opacity: 1;} 30%{opacity: 1;} 33%{opacity: .1;} } @Keyframes yellow{ 0%{opacity: .1;} 33%{opacity: .1;} 36%{opacity: 1;} 63%{opacity: 1;} 66%{opacity: .1;} } @Keyframes green{ 0%{opacity: .1;} 66%{opacity: .1;} 69%{opacity: 1;} 97%{opacity: 1;} 100%{opacity: .1;} } </style>

zhaofeipeter · 2020-07-25T08:13:08Z

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

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<style>
body {
margin: 0;
/* 绝对定位使height: 100%生效 /
position: absolute;
height: 100%;
width: 100%;
}
/ 背景图使用margin auto实现垂直水平居中 /
.wrap {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
width: 500px;
height: 350px;
background: rgb(97, 170, 189);
}
/ 灯框架 /
.traffic-light {
/ 居中代码 /
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
text-align: center;

/ 绘制图案 /
width: 300px;
height: 90px;
background: #282f2f;
border-radius: 50px;
box-shadow: 0 0 0 2px #eee inset;
}
.traffic-light::after {
/ 居中代码 /
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);

content: '';
display: inline-block;
width: 70px;
height: 70px;
border-radius: 50%;

animation: traffic-light 5s linear 0s infinite;
}

@Keyframes traffic-light {
from {
background: transparent; / 黄灯 /

box-shadow:
-85px 0 0 0 transparent, / 红灯 /
85px 0 0 0 transparent, / 绿灯 /
-85px 0 15px 0 transparent, / 红灯光影 /
0px 0 15px 0 transparent, / 黄灯光影 /
85px 0 15px 0 transparent; / 绿灯光影 /
}
25% {
background: transparent; / 黄灯 /

box-shadow:
-85px 0 0 0 rgb(247, 78, 26), / 红灯 /
85px 0 0 0 transparent, / 绿灯 /
-85px 0 15px 0 rgb(247, 78, 26), / 红灯光影 /
0px 0 15px 0 transparent, / 黄灯光影 /
85px 0 15px 0 transparent; / 绿灯光影 /
}
50% {
background: rgb(231, 183, 78); / 黄灯 /

box-shadow:
-85px 0 0 0 transparent, / 红灯 /
85px 0 0 0 transparent, / 绿灯 /
-85px 0 15px 0 transparent, / 红灯光影 /
0px 0 15px 0 rgb(231, 183, 78), / 黄灯光影 /
85px 0 15px 0 transparent; / 绿灯光影 /
}
75% {
background: transparent; / 黄灯 /

box-shadow:
-85px 0 0 0 transparent, / 红灯 /
85px 0 0 0 rgb(38, 175, 84), / 绿灯 /
-85px 0 15px 0 transparent, / 红灯光影 /
0px 0 15px 0 transparent, / 黄灯光影 /
85px 0 15px 0 rgb(38, 175, 84); / 绿灯光影 /
}
to {
background: transparent; / 黄灯 /

box-shadow:
-85px 0 0 0 transparent, / 红灯 /
85px 0 0 0 transparent, / 绿灯 /
-85px 0 15px 0 transparent, / 红灯光影 /
0px 0 15px 0 transparent, / 黄灯光影 /
85px 0 15px 0 transparent; / 绿灯光影 */
}
}
</style>
</head>
<body>
<div class="wrap">
<div class="traffic-light"></div>
</div>
</body>
</html>

haizhilin2013 added the css css label May 9, 2020

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[css] 第390天使用css写一个红绿灯交替的动画效果 #2352

[css] 第390天使用css写一个红绿灯交替的动画效果 #2352

haizhilin2013 commented May 9, 2020

zhongwuhuang commented Jul 23, 2020

zhaofeipeter commented Jul 25, 2020

[css] 第390天 使用css写一个红绿灯交替的动画效果 #2352

[css] 第390天 使用css写一个红绿灯交替的动画效果 #2352

Comments

haizhilin2013 commented May 9, 2020

zhongwuhuang commented Jul 23, 2020

zhaofeipeter commented Jul 25, 2020

[css] 第390天使用css写一个红绿灯交替的动画效果 #2352

[css] 第390天使用css写一个红绿灯交替的动画效果 #2352