blinkLight
blinkLight
<style>
@keyframes blinkLight{
0%,100%{border-color:white}
25%{border-color:blue}
50%{border-color:yellow}
75%{border-color:red}
}
#box {
width:80px;height:80px;
margin:60px auto;
border:8px dotted white;
border-radius:50% 50% 0 0;
padding:4px;
background:black;
animation:blinkLight 2s linear infinite;
}
#circle{
border-radius:inherit;
background-color:white;
height:100%
}
</style>
<div id="box">
<div id="circle"></div>
</div>
blinkLight
<style>
@keyframes blinkLight{
0%,100%{border-color:white}
25%{border-color:blue}
50%{border-color:yellow}
75%{border-color:red}
}
#box {
width:80px;height:80px;
margin:60px auto;
border:8px dotted white;
border-radius:50% 50% 0 0;
padding:4px;
background:black;
animation:blinkLight 2s linear infinite;
}
#circle{
border-radius:50%;
background-color:white;
height:100%
}
</style>
<div id="box">
<div id="circle"></div>
</div>