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

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

Favicon Generator Script HTML CSS JS | Blogger

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

How to Create Display Film's Database in HTML CSS Js || API || for Blogger, Website

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

Top 6 3D Room, App Menu, Space Glob, other

Website Gravity Like Google Gravity Source Code in HTML JS for BLogger, Website

#Star_Bharat Radha Krishna Whatsapp Status Upload by PRIYANSHU OM SHANTI...

How to Customize Desktop Youtube

Animated Button HTML and CSS

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