Rajneesh Tutorials
Text Loading Animation
by Html Css JavaScript
Rajneesh YouTube
6th June, 2020
Introduction
youtube video
On a amazing Text Loading Animations by html css and JavaScript
Click here
Video
Code
HTML
<!doctype html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<style>
</style>
<title>Rajneesh Tutorials </title>
</head>
<body>
<div class="container">
<span>R</span>
<span>A</span>
<span>J</span>
<span>N</span>
<span>E</span>
<span>E</span>
<span>S</span>
<span>H</span>
</div>
</body>
</html>
CSS
body {
margin:0;
padding:0;
background:rgb(0,0,5);
}
.container{
position:absolute ;
top:50%;
left:50%;
transform:translate(-50%,-50%);
height:80px;
width:310px;
// background:rgb(5,0,5);
display:flex;
justify-content:center ;
}
span{
position:relative ;
font-size:60px;
font-weight:1000;
line-height:80px;
color:rgb(5,1,2);
// background:rgb(5,0,255);
margin:3px;
text-shadow:1px 1px 1px rgb(205,100,255),
1px 1px 10px rgb(205,100,255),
1px 1px 20px rgb(205,100,255),
1px 1px 1px rgb(205,100,255),
0px 22px 10px rgb(0,0,250),
0px 25px 14px #000;
animation: raj 3s infinite;
}
@keyframes raj{
0%,100%{}
50%{text-shadow:0px 0px 0px ;}
}
span:nth-child(1){
animation-delay:0s;
}
span:nth-child(2){
animation-delay:0.285s;
}
span:nth-child(3){
animation-delay:0.57s;
}
span:nth-child(4){
animation-delay:0.855s;
}
span:nth-child(5){
animation-delay:1.14s;
}
span:nth-child(6){
animation-delay:1.425s;
}
span:nth-child(7){
animation-delay:1.71s;
}
span:nth-child(8){
animation-delay:2.0s;
}
What Special in it
Easy
Fully Responsive
For learning Purpose
Amazing loading
Attractive
Thanks to see our blog
Follow me to get more like this
© Rajneesh Tutorials
Facebook id Rajneesh
Website Rajneesh home
Facebook page Rajneesh Tutorials
Blog Top 10s
Blog Rajneesh Tutorials
Comments
Post a Comment