Cara Membuat Animasi Efek Smoke Pada Teks

Pada kesempatan kali ini saya akan membagikan tutorial tentang cara membuat animasi efek smoke pada teks. Efek yang dibuat saat sebuah teks di hover atau ada pergerakan dari mouse mendekat ke teks. Lalu efeknya teks akan menjadi hilang seperti asap.Baiklah mari kita mulai saja cara pembuatannya ikutin langkah-langkah berikut ini:

Langkah pertama buatlah file html seperti code dibawah ini:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Membuat Efek Asap Vape</title>
	<link rel="stylesheet" href="style.css">
</head>
<body>
	<div class="container">
	<ul>
		<li>K</li>
		<li>A</li>
		<li>B</li>
		<li>U</li>
		<li>R</li>

	</ul>
	</div>
</body>
</html>

pada file HTML saya membuat sebuah list untuk setiap hurufnya…kenapa seperti itu ? karena eh karena supaya lebih mudah diberikan efek animasi setiap hurufnya. dan berikutnya jangan lupa tambahkan syle CSS nya seperti berikut ini:

body{
	margin:0;
	padding:0;
	font-family: sans-serif;
	background: #272727;
}

.container{
	position: absolute;
	top:50%;
	left:50%;
	transform: translate(-50%, -50%);
}

ul{
	margin:0;
	padding:0;
	display: flex;
}

ul li{
	list-style: none;
	color:#fff;
	font-size: 6em;
	font-weight: bold;
	letter-spacing: 10px;
	filter:blur(1px);
}

ul:hover li
{
	animation: animate 2s linear forwards;
}

@keyframes animate
{
	0%
	{
		transform:rotate(0deg) translateY(0px);
		opacity: 1;
		filter: blur(1px);
	}
	100%
	{
		transform:rotate(-45deg) translateY(-200px);
		opacity: 0;
		filter: blur(20px);
	}
}

ul li:nth-child(1)
{
	animation-delay: 0s;
}
ul li:nth-child(2)
{
	animation-delay: .4s;
}
ul li:nth-child(3)
{
	animation-delay: .8s;
}
ul li:nth-child(4)
{
	animation-delay: 1.2s;
}
ul li:nth-child(5)
{
	animation-delay: 1.6s;
}

Jika sudah simpan dulu kedua file nya HTML dan style CSS, coba sekarang jalankan pada browser, apakah tampilannya sudah seperti pada gambar ini :

dan apabila mouse didekatkan pada teks maka akan seperti berikut ini tampilannya:

Demikian pembahasan artikel pada kesempatan kali ini tentang cara membuat animasi efek smoke pada teks ,sampai jumpa lagi dengan pembahasan dengan materi yang berbeda. Semoga bermanfaat dan selamat mencoba.

Terima kasih

Cara Membuat Animasi Efek Smoke Pada Teks

Kategori