CSS
* {
box-sizing: border-box;
margin: 0;
padding: 0;
*:before, *:after {
content: '';
position: absolute;
box-sizing: border-box;
}
}
body {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100vh;
background:radial-gradient(ellipse at center, rgba(0,26,51,1) 0%, rgba(0,0,0,1) 100%);
}
.container {
position: relative;
height: 10vmin;
width: auto;
}
.container span {
display: inline-block;
font-size: 3em;
margin-left: 2vmin;
color: #fff;
}
.container span:after {
width: 2vmin;
height: 2vmin;
background-color: red;
}
.container span:nth-child(1) {
animation: first 4s linear infinite;
}
.container span:nth-child(2) {
animation: second 4s linear infinite;
}
.container span:nth-child(3) {
animation: first 4s linear infinite;
}
.container span:nth-child(4) {
animation: second 4s linear infinite;
}
@keyframes first {
0%,15%,30%,45%,60%,75%,100% {
transform: rotate(0deg) translateY(6vmin);
}
5%,20%,35%,50%,65%,80%,95% {
transform: rotate(15deg) translateY(-6vmin);
}
10%,25%,40%,55%,70%,85%,90% {
transform: rotate(-15deg) translateY(6vmin);
}
}
@keyframes second {
0%,15%,30%,45%,60%,75%,100% {
transform: rotate(0deg) translateY(-6mvin);
}
5%,20%,35%,50%,65%,80%,95% {
transform: rotate(15deg) translateY(6vmin);
}
10%,25%,40%,55%,70%,85%,90% {
transform: rotate(-15deg) translateY(-6vmin);
}
}
