HTML
<body>
<div class="code_master">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</body>
</html>
CSS
body{
margin: 0;
padding: 0;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
.code_master{
position: relative;
width: 600px;
height: 600px;
display: flex;
align-items: center;
justify-content: center;
}
.code_master span{
position: absolute;
animation: animate 10s linear infinite;
}
.code_master span:nth-child(1){
animation-delay: 0s;
}
.code_master span:nth-child(2){
animation-delay: 1s;
}
.code_master span:nth-child(3){
animation-delay: 2s;
}
.code_master span:nth-child(4){
animation-delay: 3s;
}
.code_master span:nth-child(5){
animation-delay: 4s;
}
.code_master span:nth-child(6){
animation-delay: 5s;
}
.code_master span:nth-child(7){
animation-delay: 6s;
}
.code_master span:nth-child(8){
animation-delay: 7s;
}
.code_master span:nth-child(9){
animation-delay: 8s;
}
.code_master span:nth-child(10){
animation-delay: 9s;
}
@keyframes animate{
0%{
width: 0;
height: 0;
opacity: 1;
box-shadow: inset 0 0 20px rgba(0,0,0,.5);
}
100%{
width: 100%;
height: 100%;
opacity: 0;
box-shadow: inset 0 0 50px rgba(0,0,0,1);
}
}
0 comments:
Post a Comment