Cara Membuat Backgroud Animasi Pure dengan CSS

Cara Membuat Backgroud Animasi Pure dengan CSS

Halo teman-teman semua, pada kesempatan kali ini saya akan membagikan tutorial cara membuat background Animasi Pure menggunkan kode CSS, HTLM dan Java Script.

Mungkin temen-teman ada yang pernah melihat beberapa blog atau website yang terdapat animasi kotak melayang melayang, dan kamu merasa penasaran akan hal tersebut atau ingin menerapkan pada website kamu.

Tampilan dari animasi dengan program css ini akan memunculkan objek bentuk kotak dangan beberapa ukuran yang berbeda.

Mungkin pernah melihat suatu website apa blog seseorang dengan tampilan animasi yang saya sebutkan, misalnya blog ini :v. Dan kamu merasa tertarik dan ingin memasangnya pada situs kamu. Jangan khawatir saya akan membagikan scriptnya, untuk cara memasangnya kamu bisa kreasikan sendiri ya.

Script ini menggunakan CSS yang biasanya kita sebut dengan Animasi partikel css, berikut ada script  yang dapat kamu gunakan untuk menerapkan cara ini.

Cara Membuat Backgroud Animasi Pure

Berikut ini kode script yang dapat kamu gunakan untuk membuat animasi pure, silakan kamu copy saja.

.bg-bubbles li:nth-child(3) {
  left: 25%;
  -webkit-animation-delay: 4s;
          animation-delay: 4s;
}
.bg-bubbles li:nth-child(7) {
  left: 32%;
  width: 160px;
  height: 160px;
  -webkit-animation-delay: 7s;
          animation-delay: 7s;
}
.bg-bubbles li:nth-child(16) {
  left: 75%;
  width: 20px;
  height: 20px;
  -webkit-animation-delay: 1s;
          animation-delay: 1s;
  -webkit-animation-duration: 25s;
          animation-duration: 25s;
  background-color: rgba(255, 255, 255, 0.3);
}

Untuk memanggil kode tersebut silakan kamu copy kode berikut ini :

<ul class="bg-bubbles">
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
	</ul>

Dan hasilnya akan seperti dibawah ini

Script kode diatas bisa kamu pasang di blogger untuk mempercantik tampilan blog kamu agar lebih bagus lagi. Cara memasang kode CSS nya kamu pastekan di atas kode ]]></b:skin> dan script pemanggilnya pasang di tempat yang ingin kamu tampilan animasi pure tersebut.

Bagaimana baguskan tampilan animasi pure dengan css menggunakan cara yang saya berikan pada postingan kali ini.

Saya rasa cukup sekian artikel Cara Membuat Animasi Pure semoga bermanfaat dan menambah pengetahuan kita semua. Sampai jumpa di postingan saya berikutnya.

Tidak ada komentar untuk "Cara Membuat Backgroud Animasi Pure dengan CSS"