Hello Friends, In this Blog we share knowledege How to create fancy Text Effect Style using HTML and CSS Only
CODE :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CodeHubDeep</title>
<style>
body{
align-items: center;
justify-content: center;
display: flex;
height: 100vh;
}
.text-effect{
color: #fffafa;
font-family: 'Permanent Marker', cursive;
font-size: 100px;
font-weight: 400;
text-align: center;
}
.text-effect span{
display: inline-block;
animation: glow 2s ease-in-out both infinite;
}
.text-effect span:nth-child(1) { animation-delay: -0.2857142857s; }
.text-effect span:nth-child(2) { animation-delay: -0.5714285714s; }
.text-effect span:nth-child(3) { animation-delay: -0.8571428571s; }
.text-effect span:nth-child(4) { animation-delay: -1.1428571429s; }
.text-effect span:nth-child(5) { animation-delay: -1.4285714286s; }
.text-effect span:nth-child(6) { animation-delay: -1.7142857143s; }
.text-effect span:nth-child(7) { animation-delay: -2.2857142857s; }
.text-effect span:nth-child(8) { animation-delay: -2.5714285714s; }
.text-effect span:nth-child(9) { animation-delay: -2.8571428571s;}
.text-effect span:nth-child(10) { animation-delay: -3s; }
@keyframes glow{
0%, 100% { text-shadow: 0 0 8.3333333333px #fffafa, 0 -25px 50px tomato, -25px 25px 50px yellow, 25px 25px 50px tomato; }
33% { text-shadow: 0 0 8.3333333333px #fffafa, 0 -25px 50px cyan, -25px 25px 50px tomato, 25px 25px 50px cyan; }
66% { text-shadow: 0 0 8.3333333333px #fffafa, 0 -25px 50px yellow, -25px 25px 50px cyan, 25px 25px 50px yellow; }
}
@media only screen and (max-width: 990px){
.text-effect{ font-size: 70px; }
}
@media only screen and (max-width: 767px){
.text-effect{ font-size: 60px; }
}
@media only screen and (max-width: 576px){
.text-effect{ font-size: 35px; }
}
</style>
</head>
<body>
<div class="text-effect">
<span>C</span><span>O</span><span>D</span><span>E</span>
<span>H</span><span>UB</span><span>D</span><span>E</span><span>E</span><span>P</span>
</div>
</body>
</html>
0 Comments