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

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

10 Ways to Fix Blue Screen Of Death (BSOD) Problem Step by Step.

Chandrayan-3 3D Model

ChatGPT Clone in HTML Css Js || Blogger and Website ||

Amazing Website 😮😲 || Create your Music || Design Your Music Lab || अपनी धुन बनाये

How to Customize Desktop Youtube

Top 5 Free Fire Bundles 3D Model in Free

Clipped Square HTML Css

UP Board Result 2023 Class 10th, 12th

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