Cara Membuat Animasi Ikan Dengan HTML CSS

Hallo sahabat berjumpa lagi dalam website kursus webdesign, bagaimana kabar sahabat semua ? semoga dalam keadaan sehat dan selalu semangat. Dalam kesempatan kali ini saya akan membagikan tutorial tentang cara membuat animasi ikan dengan html css. Animasi ikan yang akan saya buat yaitu dalam sebuah aquarium botol, tentu sahabat penasaran bagaimana hasil akhirnya.Baiklah sahabat semua agar gak penasaran bagaimana kalau ikutin langkah-langkah dibawah ini:

Langkah pertama sahabat siapakan file HTML lalu ketikkan code html berikut:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Animasi Ikan di Aquarium</title>
	<link rel="stylesheet" href="style.css">
</head>
<body>
	<div class="aqua">
		<div class="air">	
			<img src="iwake.png" class="iwak" alt="iwak">		
		</div>
	</div>
	<div class="shadow"></div>
</body>
</html>

pada code html diatas saya hanya membuat 3 buah class yang nanti digunakan untuk membuat tampilan aquarium ,air dan tentu ada bayangan dari aquariumnya supaya menarik, jangan lupa siapakan gambar ikan kesukaan sahabat yaaaa.

Langkah selanjutnya tambahkan style CSS untuk membuat tampilan aquarium ,air yaaa. coba ketikkan code CSS dibawah ini:

body{
	margin:0;
	padding:0;
	background:#0009;
}

.aqua{
	position: absolute;
	top:50%;
	left:50%;
	transform: translate(-50%, -50%);
	width: 300px;
	height: 300px;
	background: rgba(255,255,255,0.1);
	border-radius: 50%;
	border:4px solid #ffffff;
	transform-origin: bottom center;
	animation: animate 5s linear infinite;
}

.aqua:before
{
	content:'';
	position: absolute;
	top:10px;
	left:8%; 
	transform: rotate(-27deg) ; 
	width: 40%;
	height:30px;
	background: rgba(113, 107, 107, 0.61);
	border:4px solid #ffffff;
	border-radius: 50%;
}

.aqua:after
{
	content:'';
	position: absolute;
	top: 17%;
	left: 20%;
	transform: rotate(-25deg);
	width: 100px;
	height: 30px;
	background: rgba(255,255,255,0.05);
	border-radius: 50%;
}

.air{
	position: absolute;
	top:50%;
	left:5px;
	right: 5px;
	bottom:5px;
	background: rgba(65,193,251,0.5);
	border-bottom-right-radius: 150px;	
	border-bottom-left-radius: 150px;
	transform-origin: top center;	
	animation: animateair 5s linear infinite;
}

.air:before{
	content:'';
	position: absolute;
	top:-10px;
	left:0;
	width: 100%;
	height: 20px;	
	background: rgba(75, 203, 224, 0.97);
	border-radius: 50%;
}

.shadow
{
	position: absolute;
	top:calc(50% + 150px);
	left:50%;
	transform:translate(-50%, -50%);
	width: 250px;
	height: 30px;
	background:rgba(150, 141, 141, 0.2);
	z-index: -1;
	border-radius: 50%;
}

img.iwak
{
	width: 75px;
	animation: animateIwak 10s linear infinite;
}

/* digunakan untuk animasi ikan bergerak*/

@keyframes animateIwak
{
	0%
	{
		transform: translate(0,0) rotateY(180deg);
	}
	50%
	{
		transform: translate(190px,0px) rotateY(180deg);
	}
	51%
	{
		transform: translate(200px,0px) rotateY(0deg);
	}
	100%
	{
		transform: translate(0,0) rotateY(0deg);
	}
}

/* digunakan untuk animasi dari aquarium */

@keyframes animate
{
	0%
	{
		transform: translate(-50%, -50%) rotate(0deg);
	}
	25%
	{
		transform: translate(-50%, -50%) rotate(15deg);
	}
	50%
	{
		transform: translate(-50%, -50%) rotate(0deg);
	}
	75%
	{
		transform: translate(-50%, -50%) rotate(-15deg);
	}
	100%
	{
		transform: translate(-50%, -50%) rotate(0deg);
	}
}

/*digunakan untuk animasi air*/

@keyframes animateair 
{
	0%
	{
		transform: rotate(0deg);
	}
	25%
	{
		transform: rotate(-20deg);
	}
	50%
	{
		transform: rotate(0deg);
	}
	75%
	{
		transform: rotate(20deg);
	}
	100%
	{
		transform: rotate(0deg);
	}
}

JIka sudah selesai mengetikkan kedua file diatas sekarang coba simpan dan jalankan pada browser ,apakah sudah benar tampilannya seperti berikut ini……

Demikian hasil tampilannya ,bagaimana sangat mudah bukan cara membuat animasi ikan dengan html css, saya cukupkan pembahasan kali ini semoga bermanfaat, dan selamat mencoba. sampai jumpa lagi pada kesempatan lainnya.

terima kasih