Membuat Pulse Animation Menggunakan HTML dan CSS
Membuat Pulse Animation Menggunakan HTML dan CSS – Pada artikel ini, kita akan membahas bagaimana membuat pulse animation menggunakan HTML dan CSS. Pembuatan animasi pulse ini membutuhkan dua file yaitu satu file dengan nama index.html dan yang satunya adalah style.css. Perhatikan kode dibawah ini untuk membuat pulse animation menggunakan html dan css.
Daftar Isi
Membuat Pulse Animation Menggunakan HTML dan CSS
Source code file style.css
Berikut ini adalah source code dari file style.css untuk membuat pulse animation.
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background-color: #43658b;
}
.pulse {
border-radius: 50%;
width: 5em;
height: 5em;
background: red;
}
.pulse::after {
content: '';
position: absolute;
width: 5em;
height: 5em;
z-index: 1;
background: red;
border-radius: 50%;
animation: pulse 1s ease infinite;
}
@keyframes pulse {
from {
transform: scale(1);
opacity: 1;
}
to {
transform: scale(2);
opacity: 0;
}
}
Source code file index.html
Berikut ini adalah source code dari file index.html untuk membuat pulse animation.
<!DOCTYPE html> <html> <head> <TITLE>Pulse Animation</TITLE> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <div class="pulse"> </div> </body> </html>
Hasil yang diperoleh
Hasil yang akan ditampilkan pada web browser anda adalah seperti video berikut ini.
Temukan artikel programming HTML dan CSS menarik lainnya hanya di inpows.