Bách khoa toàn thư mở Wikipedia
.wrapper{
position: relative;
display: block;
height: 100vh;
background: linear-gradient(180deg,#04fafd 5%,#119dff 50%,#030423);
overflow: hidden;
}
.wrapper .title{
text-align: center;
font-family: sans-serif;
top: 50%;
left: 50%;
transform:translate(-50%,-50%);
position: absolute;
letter-spacing: 1px;
word-spacing: 2px;
color: #fff;
font-size: 40px;
font-weight: 600;
text-transform: uppercase;
}
.wrapper div{
height: 60px;
width: 60px;
border: 2px solid rgba(255, 255, 255, 0.7);
border-radius: 50px;
position: absolute;
top: 10%;
left: 10%;
animation: animate2 4s linear infinite;
}
div .dot{
height: 10px;
width: 10px;
border-radius: 50px;
background: rgba(255,255,255,0.5);
position: absolute;
top: 20%;
right: 20%;
}
.wrapper div:nth-child(1){
top: 20%;
left: 20%;
animation: animate2 15s linear infinite;
}
.wrapper div:nth-child(2){
top: 60%;
left: 80%;
animation: animate2 10s linear infinite;
}
.wrapper div:nth-child(3){
top: 40%;
left: 40%;
animation: animate2 5s linear infinite;
}
.wrapper div:nth-child(4){
top: 66%;
left: 30%;
animation: animate2 7s linear infinite;
}
.wrapper div:nth-child(5){
top: 90%;
left: 10%;
animation: animate2 9s linear infinite;
}
.wrapper div:nth-child(6){
top: 30%;
left: 60%;
animation: animate2 5s linear infinite;
}
.wrapper div:nth-child(7){
top: 70%;
left: 20%;
animation: animate2 8s linear infinite;
}
.wrapper div:nth-child(8){
top: 75%;
left: 60%;
animation: animate2 10s linear infinite;
}
.wrapper div:nth-child(9){
top: 50%;
left: 50%;
animation: animate2 6s linear infinite;
}
.wrapper div:nth-child(10){
top: 45%;
left: 20%;
animation: animate2 10s linear infinite;
}
.wrapper div:nth-child(11){
top: 10%;
left: 90%;
animation: animate2 15s linear infinite;
}
.wrapper div:nth-child(12){
top: 20%;
left: 70%;
animation: animate2 7s linear infinite;
}
.wrapper div:nth-child(13){
top: 20%;
left: 35%;
animation: animate2 4s linear infinite;
}
.wrapper div:nth-child(14){
top: 60%;
left: 5%;
animation: animate2 6s linear infinite;
}
.wrapper div:nth-child(15){
top: 95%;
left: 88%;
animation: animate2 10s linear infinite;
}
.wrapper div:nth-child(16){
top: 30%;
left: 5%;
animation: animate2 7s linear infinite;
}
.wrapper div:nth-child(17){
top: 10%;
left: 45%;
animation: animate2 11s linear infinite;
}
.wrapper div:nth-child(18){
top: 8%;
left: 95%;
animation: animate2 6s linear infinite;
}
.wrapper div:nth-child(19){
top: 40%;
left: 75%;
animation: animate2 9s linear infinite;
}
.wrapper div:nth-child(20){
top: 75%;
left: 10%;
animation: animate2 8s linear infinite;
}
@keyframes animate2{
0%{
transform: scale(0) translateY(0) rotate(70deg);
}
100%{
transform: scale(1.3) translateY(-100px) rotate(360deg);
}
}
@media screen and (max-width: 874px){
.wrapper .title{
font-size: 28px;
}
.wrapper{
height: 50vh;
}
.wrapper div{
height: 40px;
width: 40px;
}
div .dot{
height: 7px;
width: 7px;
}
}