<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="" content="">
<title></title>
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
color: white;
}
body{
background: linear-gradient(45deg, tomato, #69c9af, #00ffff, orange);
min-height: 100vh;
min-width: 100vw;
}
.main{
height: 100vh;
width: 100vw;
display: flex;
justify-content: center;
align-items: center;
position: relative;
flex-direction: column;
}
.div{
height: auto;
width: auto;
text-shadow: -2px 18px 6px rgba(33,29,29,0.9);;
}
.dot:nth-child(odd){
animation: anim1 2s linear infinite;
}
.dot:nth-child(even){
animation: anim2 2s linear infinite;
}
.dot{
height: 2rem;
width: 2rem;
border-radius: 50%;
border: 2px solid white;
position: absolute;
transform: scale(0);
animation-duration: calc(1s*var(--i));
}
.dot:nth-child(1){
left: 5%;
top: 5%;
}
.dot:nth-child(2){
left: 25%;
top: 75%;
animation-delay: 1s;
}
.dot:nth-child(3){
left: 65%;
top: 35%;
animation-delay: 2s;
}
.dot:nth-child(4){
left: 45%;
animation-delay: 3s;
top: 5%;
}
.dot:nth-child(5){
animation-delay: 4s;
left: 5%;
top: 85%;
}
.dot:nth-child(6){
animation-delay: 5s;
left: 5%;
top: 58%;
}
.dot:nth-child(7){
animation-delay: 6s;
left: 5%;
top: 5%;
}
.dot:nth-child(8){
left: 5%;
animation-delay: 7s;
top: 15%;
}
.dot:nth-child(9){
animation-delay: 8s;
left: 85%;
top: 85%;
}
.dot:nth-child(10){
animation-delay: 9s;
left: 15%;
top: 85%;
}
.span{
height: 30%;
width: 30%;
position: absolute;
border: 2px solid white;
margin-left: 60%;
margin-top: 22%;
border-radius: 50%;
}
@keyframes anim1{
0%{
transform: scale(0) rotate(0deg);
}
90%{
transform: scale(3) rotate(280deg) translateX(80px);
opacity: 0;
}
100%{
transform: scale(0) rotate(0deg);
opacity: 0;
}
}
@keyframes anim2{
0%{
transform: scale(1) rotate(0deg);
}
90%{
transform: scale(3) rotate(280deg) translateX(-80px);
opacity: 0;
}
100%{
transform: scale(1) rotate(0deg);
opacity: 0;
}
}
</style>
</head>
<body>
<div class="main">
<div class="div"><h1>Animated</h1></div>
<div class="div"><h1>background</h1></div>
<div class="dot"><div class="span"></div></div>
<div class="dot"><div class="span" style="--i:1;"></div></div>
<div class="dot"><div class="span" style="--i:2;"></div></div>
<div class="dot"><div class="span" style="--i:3;"></div></div>
<div class="dot"><div class="span" style="--i:4;"></div></div>
<div class="dot"><div class="span" style="--i:5;"></div></div>
<div class="dot"><div class="span" style="--i:6;"></div></div>
<div class="dot"><div class="span" style="--i:7;"></div></div>
<div class="dot"><div class="span" style="--i:8;"></div></div>
<div class="dot"><div class="span" style="--i:9;"></div></div>
<div class="dot"><div class="span" style="--i:10;"></div></div>
</div>
</body>
</html>
Comments
Post a Comment