free html hit counter
Glowing Text Loading Animation
Glowing Text Loading Animation
2019-12-30 / Dimas Lanjaka Kumala Indra

Glowing Text Loading Animation

Glowing Text Loading AnimationCSS
body{
margin:0px;padding:0px;background:#262222;
}
UL{
position: absolute;
top:50%;
left:50%;
display: flex;
transform: translate(-50% ,-50%);
}
ul li{
list-style: none;
letter-spacing: 15px;
font-size: 5em;
font-family: fantasy;
color:#484848;
animation: ani 1.2s linear infinite;
}
ul li:nth-child(1){
animation-delay: .2s;
}
ul li:nth-child(2){
animation-delay: .6s;
}
ul li:nth-child(3){
animation-delay: .8s;
}
ul li:nth-child(4){
animation-delay: 1.0s;
}
ul li:nth-child(5){
animation-delay: 1.4s;
}
ul li:nth-child(6){
animation-delay: 1.8s;
}
ul li:nth-child(7){
animation-delay: 1.12s;
}
@keyframes ani {
0%{
color:#44848;
text-shadow: none;
}
90%{
color:#44848;
text-shadow: none;
}
100%{
color:#fff900;
text-shadow: 0 0 7px #fff900,0 0 70px #fff123;
}
}
HTML
<ul>
<li>L</li>
<li>O</li>
<li>A</li>
<li>D</li>
<li>I</li>
<li>N</li>
<li>G</li>
</ul>
try it

See the Pen Glowing Text Loading Animation Tutorial - Html Css Blinking Text Effect by omar (@omaf) on CodePen.

Glowing Text Loading Animation

PermaLink: https://www.webmanajemen.com/2019/12/glowing-text-loading-animation.html
Incoming search terms for Glowing Text Loading Animation:
  • Glowing Text Loading Animation
  • Glowing Text Loading Animation WMI Gitlab

Google Rich Snippets | Schema Markup Validator | Google Pagespeed Insight