
HTML Code
<div class="glow">
<span>H</span>
<span>A</span>
<span>P</span>
<span>P</span>
<span>Y</span>
<br>
<span>H</span>
<span>O</span>
<span>L</span>
<span>I</span>
</div>
CSS Code
.glow span {
font-size: 40px;
display: inline-block;
width: 45px;
height: 45px;
text-align: center;
border: 25px solid rgba(255,255,255,0.4);
margin: 0 -2.5px;
animation: animate 1s linear infinite;
}
@keyframes animate {
0% {
color: #f00;
box-shadow: 0 2px 10px rgba(255,0,0,1);
border: 2px solid rgba(255,0,0,1);
}
50% {
color: #0f0;
box-shadow: 0 2px 10px rgba(0,255,0,1);
border: 2px solid rgba(0,255,0,1);
}
100% {
color: #f00;
box-shadow: 0 2px 10px rgba(255,0,0,1);
border: 2px solid rgba(255,0,0,1);
}
}
Watch Below Video for Detail Understanding
Search Your Keywords
Recent Post
- Boost Your Web Design Skills: 10 CSS Tricks That Will Blow Your Mind!10 Mind-Blowing Tricks to Elevate Your Web Design Skills As a […]
- Creating Engaging Web Animations with HTML and CSS: A Simple Snake Animation ExampleAdding animations to a web page is a fantastic way to […]
- Center a div like a Pro: 4 Essential Techniques You Must Master in CSSAre you looking to center a div on your webpage and […]
- Neumorphic Design: Revolutionize Your Login Experience with Cutting-Edge TechniquesNeumorphic design has taken the web design world by storm with […]
- Neumorphic Card Design: An Elegant UI SolutionDiscover the Power of Neumorphic Card Design for Your UI If […]