Ghost Text || HTML ,Css || Blogger || for Website

January 04, 2023

Copy To Clipboard

      
     <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
		content="width=device-width, initial-scale=1.0">

</head>
Hover on Text
<style>
*{
	margin: 0;
	padding: 0;
}

ul{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	display: flex;
	align-items: center;
}
/* designing the text*/
li{
	list-style: none;
	font-size: 3em;
	letter-spacing: 5px;
	transition: 1s;
}
/*creating the ghost effect*/
li:hover{
	filter: blur(70px);
	opacity: 0;
}
li:nth-child(1){
	animation-delay: 0.1s;
}
li:nth-child(2){
	animation-delay: 0.2s;
}
li:nth-child(3){
	animation-delay: 0.3s;
}
li:nth-child(4){
	animation-delay: 0.4s;
}
li:nth-child(5){
	animation-delay: 0.5s;
}

</style>
<body>
<ul>
	<li>G</li>
	<li>H</li>
	<li>O</li>
	<li>S</li>
	<li>T</li>
</ul>
</body>
</html>

Copy

Comment Box

POMSD

Advertisement

Ghost Text || HTML ,Css || Blogger || for Website

Copy To Clipboard

0 Comments

Contact Form

Popular Posts

🇭‌🇦‌🇨‌🇰‌🇪‌🇷‌ Login Panel UI Using HTML CSS Js for Website Blogger

Download GB Whatsapp Pro. and Top Gb Whatsapp Themes Free

Free Fire ID Sale/Buy

How to Premium youtube in Free no Ads,Home Screen Play, Lock Screen Play

THANOS Snap Source Code in HTML CSS JS for Blogger, Website

Scholarship Form Online documents details

How to Create a Model POPup for Blogger

OG Whatsapp

Top 5 Free Fire Bundles 3D Model in Free

Chandrayan-3 3D Model

Menu Footer Widget

Subscribe

News

Contact form

POMSD

Advertisement

Ghost Text || HTML ,Css || Blogger || for Website

Copy To Clipboard

Recommend

0 Comments

Contact Form

Popular Posts

Menu Footer Widget

Subscribe

News

Contact form