<div class="traffic-light">
<div class="left red">➔</div>
<div id="countdown">10</div>
<div class="up green">➔</div>
</div>
<div class="road">
<div class="common line subtend">
<div class="mark">↱</div>
</div>
<div class="common top subtend">
<div class="mark">↑</div>
</div>
<div class="separate"></div>
<div class="common line">
<div class="mark">↰</div>
</div>
<div class="common">
<div class="mark">↱</div>
</div>
</div>
HTML
格式化
支持Emmet，输入 p 后按 Tab键试试吧！
<head> <script src="https://cdn... </head>
<body>
</body>
CSS
格式化
/* 示例代码 */
body {
text-align: center;
background:#333;
display:flex;
justify-content:center;
align-items:center;
perspective:1000px;
}
.road{
width:200px;
height:400px;
border:1px #fff solid;
transform: rotateX(45deg);
-webkit-transform: rotateX(45deg); /* Safari and Chrome */
display:flex;
flex-direction:row;
position:relative;
.common{
border-right-color:transparent;
flex:1;
position:relative;
display:flex;
justify-content:center;
flex-wrap:wrap;
.mark{
color:#fff;
font-size:30px;
margin:30px 0;
height:40px;
}
&:hover{
background:green;
}
}
.subtend{
.mark{
transform:rotate(180deg);
}
}
.line{
border-right:1px dashed #fff;
}
.separate{
flex-basis:2px;
border: 1px solid yellow;
flex-grow:0;
border-top:none;
border-bottom:none;
}
&::before{
content:"";
position:absolute;
width:100%;
height:40px;
top:-40px;
border:1px solid #fff;
background:repeating-linear-gradient(90deg,#fff,transparent 1%,transparent 4%);
}
}
.traffic-light{
width:100px;
border:1px solid #fff;
display:flex;
justify-content:space-around;
background:#000;
#countdown{
border-radius:0;
border-color:transparent;
}
div{
width:30px;
height:30px;
border:1px solid #fff;
border-radius:50%;
color:#fff;
font-size:28px;
display:flex;
justify-content:center;
align-items:center;
color:green;
}
.green{
color:green;
}
.red{
color:red;
}
.left{
transform:rotate(180deg);
}
.up{
transform:rotate(-90deg);
}
}
.red{
color:red;
}
JS
格式化
// 示例代码
let n = 10;
setInterval(()=>{
if(n<2)n=10
n--
$("#countdown").text(n)
},1000)