Cara mudah membuat animasi circles dengan html dan css

Rafiqi, S.Kom.
Rafiqi, S.Kom.
Juli 19, 2024
5
Cara mudah membuat animasi circles dengan html dan css

Hi Web Developer! kembali lagi bersama dengan guru design. Kali ini guru design akan berbagi tutorial cara mudah membuat animasi circles dengan html dan css. Buat mastah dan suhu silahkan di koreksi kalau saja ada yang salah, tapi saya rasa tidak hehe, buat para pemburu koding silahkan disimak dan dipraktikan di komputer-nya masing-masing. Ok lanjut ketutorialnya.

Pertama

Tambahkan kode html berikut ini diantara tag body pembuka dan penutup, untuk posisi bisa kalian sesuaikan sendiri dimana ingin menampilkannya, misal di header, footer dan lainnya.

<ul class="circles"><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li></ul>

Kedua

Tambahkan kode style css berikut: 
<style>
/* circle */
ul.circles{height:340px}
.circles{position:absolute;top:0;left:0;right:0;bottom:0;overflow:hidden;margin:0}
.circles li{position:absolute;display:block;list-style:none;width:20px;height:20px;background:rgba(3,155,229,0.6);animation:animate 45s linear infinite;bottom:-150px;z-index:0}
.circles li:nth-child(1){left:25%;width:60px;height:60px;animation-delay:0s}
.circles li:nth-child(2){left:10%;width:10px;height:10px;animation-delay:2s;animation-duration:12s}
.circles li:nth-child(3){left:70%;width:10px;height:10px;animation-delay:4s}
.circles li:nth-child(4){left:40%;width:40px;height:40px;animation-delay:0s;animation-duration:18s}
.circles li:nth-child(5){left:65%;width:10px;height:10px;animation-delay:0s}
.circles li:nth-child(6){left:75%;width:90px;height:90px;animation-delay:3s}
.circles li:nth-child(7){left:35%;width:130px;height:130px;animation-delay:7s}
.circles li:nth-child(8){left:50%;width:15px;height:15px;animation-delay:15s;animation-duration:45s}
.circles li:nth-child(9){left:20%;width:5px;height:5px;animation-delay:2s;animation-duration:35s}
.circles li:nth-child(10){left:85%;width:130px;height:130px;animation-delay:0s;animation-duration:11s}
@keyframes animate{0%{transform:translateY(0) rotate(0deg);opacity:1;border-radius:0}100%{transform:translateY(-1000px) rotate(720deg);opacity:0;border-radius:50%}}
 </style>
Kode yang berwarna ungu adalah untuk mengatur tinggi bingkai animasi.
Kode yang berwarna merah adalah untuk mengatur warna dan transparansi circle-nya.
Kode yang berwarna biru adalah untuk mengatur radius circle-nya
Result
Sampai disini tutorialnya, terimakasih semoga bermanfaat.
Rafiqi, S.Kom.