Membuat Efek Animasi List dengan HTML CSS

Hallo sahabat, bagaimana kabarnya semua? semoga sehat serta tetap semangat ya. Dalam kesempatan kali ini kita akan belajar bagaimana cara membuat efek animasi list dengan HTML CSS. Jadi nanti efek yang akan ditampilkan pada list seperti tetesan air. Baiklah yuk mari kita langsung membuatnya ikuti langkah-langkah berikut ini.

Langkah Pertama

Buat file html kemudian ketikkan seperti dibawah ini

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Membuat Efek Animasi List Dengan HTML CSS</title>
	<link rel="stylesheet" href="style.css">
</head>
<body>
	<h1>Membuat Efek Animasi List Dengan HTML CSS</h1>
	<ul>
		<li>Laravel</li>
		<li>Codeigniter</li>
		<li>YII</li>
		<li>Symfony</li>
		<li>Zend</li>
		<li>Phalcon</li>
		<li>CakePHP</li>
	</ul>
</body>
</html>

Langkah Kedua

Berikan style CSS agar tampilan terlihat efek animasi nya ,coba ketikkan style css berikut:

*{margin:0;padding:0;}
body{
	background: #6cfff1;
	justify-content: center;
	align-items: center;
	min-height: 100vh;
	display: flex;
}
ul{
	position: relative;
	background: #ffffff;
	box-shadow: 0 15px 25px rgba(0,0,0,.2);
	border-top-left-radius: 15px;
	border-top-right-radius: 15px;
	border-bottom-left-radius: 15px;
	border-bottom-right-radius: 15px;
}
ul li{
	font-size: 17px;
	list-style: none;
	padding: 20px 25px;
	position: relative;
	overflow: hidden;
	cursor: pointer;
}
ul li:before{
	content: '';
	position: absolute;
	top:50%;
	left:50%;
	transform: translate(-50%, -50%);
	width: 300px;
	height: 300px;
	border-radius: 50%;
	background: rgba(0,0,0,0);
	transition: 1s;
}
ul li:hover:before
{
	width: 0;
	height: 0;
	background: rgba(0, 255, 229,1);
	transition: 0s;
}

Lalu selanjutnya simpan semua file diatas, kemudian jalankan pada browser masing-masing dan lihat hasilnya seperti dibawah ini.

Saya kira cukup dalam pembahasan artikel kali ini semoga bermanfaat dan sampai jumpa lagi.

terima kasih