console
console.log(1)
setTimeout(()=>{
console.log(2)
},0)
new Promise((resolve)=>{
console.log(3)
resolve()
}).then(()=>{
console.log(4)
})
console.log(5)
<div class="road">
<div class="taxi">
<div class="light_beam"></div>
<span>
<strong></strong>
<em></em>
</span>
</div>
</div>
body{
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
.road{
width:700px;
height: 150px;
border-radius: 150px;
background-color: #333;
position: relative;
display: flex;
align-items: center;
justify-content: center;
}
.road::after{
content: '';
width: 100%;
height: 4px;
background-image: linear-gradient(90deg,#fff,#fff 50%,transparent 50%,transparent 100%);
background-size:50px;
animation: animated_road 0.123s linear infinite;
}
@keyframes animated_road{
0%{
background-position: 50px 0;
}
100%{
background-position: 0px 0;
}
}
.taxi{
position: absolute;
width: 200px;
height: 80px;
background: #f4b603;
border-radius: 10px;
left: 50px;
box-shadow: -10px 10px rgba(0, 0, 0, 0.25);
}
.taxi::before{
content: '';
position: absolute;
top: 12px;
left: 2px;
width: 5px;
height: 15px;
background-color: #fc3c25;
border-radius: 2px;
box-shadow: 0 42px #fc3c25;
}
.taxi::after{
content: '';
position: absolute;
top: 10px;
right: 2px;
width: 6px;
height: 16px;
background-color: #fff;
border-radius: 2px;
box-shadow: 0 44px #fff;
}