Cara Membuat Efek Pulsing pada Gambar

05/12/2019    Risman Hakim    189     Website

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

Web Design, HTML CSS

Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT

Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.

Learn More

Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT

Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.

Learn More