Cara Mudah Membuat Animasi Circle pada Halaman Website

Wahyu Development - Bagaimana cara membuat animasi circle pada halaman website?

Animasi circle adalah sebuah animasi yang identik dengan bentuk bangun seperti kotak, bulat dan lain sebagainya sesuai yang anda inginkan. Disini saya akan memberikan cara membuat circle dengan bentuk kotak.

Animasi ini dapat di pasang di manapun yang anda inginkan, baik di Blogger, WordPress, atau media website lainnya. Cara penerapannya cukup mudah, disini saya akan mencontohkan di Blogger berikut ulasannya.

Pertama, buka halaman dasbor Blogger anda --> kemudian klik menu Tema (Theme) --> lalu klik Edit HTML. Pada halaman Edit HTML silahkan letakan script ini di atas atau sebelum code penutup </body>.

<style>
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(158, 158, 158, 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>
<ul class='circles'><li/><li/><li/><li/><li/><li/><li/><li/><li/><li/></ul>

Pada code yang saya tandai dengan warna kuning dapat anda letakan dimana saja yang ingin di tampilkan animasi circle, akan tetapi untuk lebih pas saya letakan sebelum code </body>

Dengan demikian animasi circle sudah terpasang pada website anda.

Jika anda menggunakan website dengan code PHP silahkan letakan saja pada bagian halaman utama dengan catatan sebelum code </body>

Itulah cara membuat animasi circle, berikan komentar anda jika ada hal yang perlu ditanyakan, semoga bermanfaat . . .

Wahyu Development

Situs download software lengkap dan mudah - Tutorial lengkap tentang website, sosial media, dan komputer - Sumber referensi tugas sekolah dan informasi lainnya

Share this post

Related Post