css实现红绿灯
2021-01-17 08:14
标签:opacity column between type space html ini view viewport css实现红绿灯 标签:opacity column between type space html ini view viewport 原文地址:https://www.cnblogs.com/zwhbk/p/13367663.htmlDOCTYPE html>
html lang="en">
head>
meta charset="UTF-8">
meta name="viewport" content="width=device-width, initial-scale=1.0">
title>Documenttitle>
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: #008000;
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>
head>
body>
div class="box">
div class="light red">div>
div class="light yellow">div>
div class="light green">div>
div>
body>
html>