CSS DNA Animation Loading
DNA Animation Loading Page
Langsung ke TKP masing-masing dan siapkan alat tempurnya.
Buat file index.html dan coppy & paste code berikut.
<!DOCTYPE html>
<html>
<head>
<title>page</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="all">
<div class="container">
<div class="circle"></div>
<div class="circle"></div>
</div>
<div class="container">
<div class="circle"></div>
<div class="circle"></div>
</div>
<div class="container">
<div class="circle"></div>
<div class="circle"></div>
</div>
<div class="container">
<div class="circle"></div>
<div class="circle"></div>
</div>
<div class="container">
<div class="circle"></div>
<div class="circle"></div>
</div>
<div class="container">
<div class="circle"></div>
<div class="circle"></div>
</div>
<div class="container">
<div class="circle"></div>
<div class="circle"></div>
</div>
<div class="container">
<div class="circle"></div>
<div class="circle"></div>
</div>
<div class="container">
<div class="circle"></div>
<div class="circle"></div>
</div>
<div class="container">
<div class="circle"></div>
<div class="circle"></div>
</div>
<div class="container">
<div class="circle"></div>
<div class="circle"></div>
</div>
<div class="container">
<div class="circle"></div>
<div class="circle"></div>
</div>
</div>
</body>
</html>
Kemudian buat file CSS bernama style.css dan coppy & paste code berikut.
body {
background-color: #262626;
}
.all {
display: flex;
justify-content: space-between;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.container {
height: 120px;
margin: 0 20px;
background-color: blue;
position: relative;
}
.container .circle {
width: 20px;
height: 20px;
border-radius: 50%;
position: absolute;
left: calc(50% - 5px);
top: 0;
}
.container .circle:nth-child(1) {
top: 0;
animation: anim_a 2s infinite ease-in-out;
background-color: #ff0000;
}
.container .circle:nth-child(2) {
top: calc(100% - 5px);
transform: scale(1.5);
animation: anim_b 2s infinite ease-in-out;
background-color: #e1e1e1;
}
@keyframes anim_a {
0% {
top: 0;
z-index: 50;
}
20% {
transform: scale(1.5);
}
50% {
top:100%;
}
50.1% {
z-index: 0;
}
75% {
transform: scale(0.8);
z-index: 0;
}
100% {
top: 0;
z-index: 2;
}
}
@keyframes anim_b {
0% {
top: calc(100% - 5px);
z-index: 1;
}
25% {
transform: scale(0.8);
}
50% {
top: 0;
}
50.1% {
z-index: 2;
}
80% {
transform: scale(1.5);
z-index: 2;
}
100% {
top: calc(100% - 5px);
z-index: 0;
}
}
.container:nth-child(2) .circle {
animation-delay: -0.1s;
}
.container:nth-child(3) .circle {
animation-delay: -0.2s;
}
.container:nth-child(4) .circle {
animation-delay: -0.3s;
}
.container:nth-child(5) .circle {
animation-delay: -0.4s;
}
.container:nth-child(6) .circle {
animation-delay: -0.5s;
}
.container:nth-child(7) .circle {
animation-delay: -0.6s;
}
.container:nth-child(8) .circle {
animation-delay: -0.7s;
}
.container:nth-child(9) .circle {
animation-delay: -0.8s;
}
.container:nth-child(10) .circle {
animation-delay: -0.9s;
}
.container:nth-child(11) .circle {
animation-delay: -1s;
}
.container:nth-child(12) .circle {
animation-delay: -1.1s;
}
SELESAI !
Running program dengan Web Server pada Browser favorit
Atau jalankan secara Live disini
Run Your Program Here
Terimakasih kunjungannya 😊
No comments: