<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="" content="">
<title></title>
<style type="text/css" media="all">
body{
background: black;
}
#main{
height: 50vw;
width: 50vw;
position: relative;
display: flex;
place-items: center;
justify-content: center;
margin: 6rem;
border: 4px solid white;
background: yellow;
}
span{
position: absolute;
box-shadow:0px 0px 4px 4px green;
}
span:nth-child(1){
height: 90%;
width: 90%;
background: blue;
animation: rotate 2s infinite linear;
animation-delay: .4s;
}
span:nth-child(2){
height: 80%;
width: 80%;
background: red;
animation: rotate 2s infinite linear;
animation-delay: .8s;
}
span:nth-child(3){
height: 70%;
width: 70%;
background: green;
animation: rotate 2s infinite linear;
animation-delay: 1.2s;
}
span:nth-child(4){
height: 60%;
width: 60%;
background: orange;
animation: rotate 2s infinite linear;
animation-delay: 1.6s;
}
span:nth-child(5){
height: 50%;
width: 50%;
background: pink;
animation: rotate 2s infinite linear;
animation-delay: 2s;
}
@keyframes rotate{
0%{
transform: rotate(0deg);
}
50%{
transform: rotate(180deg);
}
100%{
transform: rotate(0deg);
}
}
</style>
</head>
<body>
<div id="main">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</body>
</html>
Comments
Post a Comment