Membuat CSS Pulse Animation

Admin
November 02, 2021
Membuat CSS Pulse Animation

Code Candil Kuya - Dalam Artikel ini, kita akan membuat animasi efek pulse di CSS. Pada Pertama, kita perlu membuat dua tag div di mana satu ditempatkan di dalam yang lain. Div wadah akan dinamai sebagai pembungkus. Div di dalam yang akan dinamai sebagai kotak. Di dalam 'kotak' Saya telah menempatkan ikon font-mengagumkan.

Di bagian CSS, Saya telah menghilangkan margin dan padding default dengan menyetelnya ke nol. Latar belakang diatur ke hitam tetapi, Anda dapat memilih warna apa pun yang Anda inginkan. Setelah itu, Saya menyelaraskan div pembungkus di tengah viewport. Untuk itu, Saya menggunakan nilai posisi absolut dan properti transformasi CSS. 

Saya memberi div 'kotak' tinggi dan lebar tertentu 100px. Kemudian kita atur nilai animasi untuk animasi pulsa CSS. Di sini animate adalah nama animasi, 2s adalah durasi animasi, linear adalah fungsi pengaturan waktu animasi, dan tak terbatas adalah nilai jumlah iterasi animasi. Di dalam @keyframes pada 0%, Saya mengatur opacity box-shadow ke 0 dan, warnanya akan menjadi biru bunga jagung. Saat animasi mencapai 40%, kita menyebarkan bayangan kotak di sekitar lingkaran sebesar 50px sehingga kita bisa melihat efek pulsa. Saya menetapkan nilai yang sama untuk 80%. Ketika animasi mencapai 100%, nilai bayangan kotak akan kembali ke 0.

Membuat CSS Pulse Animation [ Source Code ]

Pertama, buat dua file. Salah satunya adalah HTML dan, yang lainnya adalah CSS. Silakan Salin kode di bawah ini dan tempelkan ke proyek Anda. 

<!DOCTYPE html>
<html lang="en">
<!--code.candilkuya.com-->
<head>
  <meta charset="UTF-8">
  <title>Pure CSS Pulse Animation</title>
  <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
  <link href="style.css" rel="stylesheet">
</head>
<body>
  <div class="wrapper">
    <div class="box">
      <i class="fa fa-bolt"></i>
    </div>
  </div>
</body>
</html>
body {
  margin: 0;
  padding: 0;
  background: #000;
}
.wrapper {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.box {
  width: 100px;
  height: 100px;
  background: cornflowerblue;
  border-radius: 50%;
  text-align: center;
  line-height: 130px;
  animation: animate 2s linear infinite;
  cursor: pointer;
}
.box i {
  color: #fff;
  font-size: 60px;
}
@keyframes animate {
  0% {
    box-shadow: 0 0 0 0 cornflowerblue;
  }
  40% {
    box-shadow: 0 0 0 50px rgba(255, 26, 67, 0);
  }
  80% {
    box-shadow: 0 0 0 50px rgba(255, 206, 67, 0);
  }
  100% {
    box-shadow: 0 0 0 rgba(255, 206, 67, 0);
  }
}

Demo Code

Silahkan Klik Tombol Demo di bawah ini untuk melihat contoh dari CSS Pulse Animation, Jangan Lupa Dukung Juga Youtube Channel CANDIL CODE Dengan Cara Subscribe dan aktifkan lonceng Notifikasinya Agar Anda Bisa Mendapatkan Pemberitahuan Apdate Dari Setiap Video Terbaru Yang Saya Upload.

Demo

Penutup

Note : Sekian tutorial singkat membuat CSS Pulse Animation, Bagaimana, Mudah Bukan ? selamat mencoba dan berexperimen.

Incoming search terms :

  • source code website
  • source code aplikasi
  • download source code aplikasi
  • perancangan aplikasi
  • source code sistem informasi berbasis web
  • contoh source code aplikasi
Baca juga :
Admin