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.
<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.
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
Webinar Gratis 2024
Sabtu, 09 Maret 2024
10 Bahasa Rekomendasi Untuk Dipelajari di 2024
Python Developer, Data Science, Web Application
Minggu, 26 Mei 2024, 09.00-13.00 WIB
(4 Jam Membuat Backend di Laravel 11)
