Membuat Pulse Animation Menggunakan HTML dan CSS

Membuat Pulse Animation Menggunakan HTML dan CSS - Inpows

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.

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.

Avatar
Temukan kode-kode Java, Kotlin, Python dan bahasa pemrograman lainnya hanya di www.inpows.com. Kontak: editor@inpows.com
Back To Top