Cara Membuat Efek Pulsing pada Gambar

Cara Membuat Efek Pulsing pada Gambar - Efek pulsing atau berdenyut pada sebuah elemen bisa kita buat dengan CSS, walaupun hanya dengan CSS saja tetapi efek yang dihasilkan lumayan menarik. Nah, berikut ini akan saya bagikan tutorial Cara Membuat Efek Pulsing pada Gambar. Buat kalian yang ingin membuat efek pulsing dengan CSS bisa kalian ikuti langkah - langkahnya berikut ini.

Sebelum memulai praktek membuat efek pulsing, silahkan kalian siapkan terlebih dahulu satu gambar bebas sebagai elemen atau objek yang akan diberikan efek pulsing. Setelah itu, kalian bisa buat satu file index.html kemudian bisa mengetikan struktur HTML sederhana seperti berikut.

<body>
    <div class="wrapper">
      <img src="logo.jpg">
    </div>
</body>

Setelah membuat struktur dan meload gambar seperti diatas, langkah selanjutnya adalah mengatur gambar dan membuat efek pulsing pada gambarnya. Nah, silahkan kalian bisa ketikan sintak CSS berikut untuk membuat efek pulsing pada gambar.

body {
  align-items: center;
  background: #222;
  display: flex;
  height: 100%;
  justify-content: center;
  margin: 0;
}
html { height: 100%; }
.wrapper {
  height: 200px;
  position: relative;
  width: 200px;
}
.wrapper img {
  border-radius: 9999px;
  height: 100%;
  position: relative;
  width: 100%;
  z-index: 2;
}
@keyframes warna {
  0%   { border-color: hsl(0, 100%, 50%); }
  25%  { border-color: hsl(90, 100%, 50%); }
  50%  { border-color: hsl(180, 100%, 50%); }
  75%  { border-color: hsl(270, 100%, 50%); }
  100% { border-color: hsl(360, 100%, 50%); }
}
@keyframes pulsing {
  to {
    opacity: 0;
    transform: scale(1);
  }
}
.wrapper::before,
.wrapper::after {
  animation: pulsing 2s linear infinite;
  border: #fff solid 8px;
  border-radius: 9999px;
  box-sizing: border-box;
  content: ' ';
  height: 140%;
  left: -20%;
  opacity: .6;
  position: absolute;
  top: -20%;
  transform: scale(0.714);
  width: 140%;
  z-index: 1;
}
.wrapper::after { animation-delay: 1s; }
.wrapper:hover::before,
.wrapper:hover::after {
  animation: pulsing 1s linear infinite, warna 6s linear infinite;
}
.wrapper:hover::after { animation-delay: .5s; }

Setelah mengetikan semua sintak HTML dan CSS, selanjutnya simpan filenya kemudian kalian bisa membuka pada browser masing - masing untuk melihat hasilnya.

Baiklah, itu diatas tutorial Cara Membuat Efek Pulsing pada Gambar yang sederhana namun tetap memberikan efek yang menarik untuk dilihat. Semoga bermanfaat dan selamat mencoba

5 Desember 2019

Webinar Gratis 2024


Selanjutnya Pada Bulan Maret 2024

Sabtu, 09 Maret 2024


10 Bahasa Rekomendasi Untuk Dipelajari di 2024

Python Developer, Data Science, Web Application

Kursus Python Django Web Application 2024 di DUMET School Kursus Postgre SQL Database Developer Terbaik 2024 di Jakarta
chat