Rajneesh Tutorial
3D Name Animation
June 2, 2020
Output
A big big thank you!
Thanks you all to visit our site
Here you can get free course tutorials of programming languages and website coding
Follow my site for support me
Thanks so much!
Code
Here you can get the code of this beautiful loading animation
HTML
<!doctype html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<style>
Css code goes here
</style>
<title>3d Loader</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(255,0,255);
}
.container{
position:absolute ;
top:50%;
left:50%;
transform:translate(-50%,-50%);
height:80px;
width:310px;
background:rgb(255,0,255);
display:flex;
justify-content:center ;
}
span{
position:relative ;
font-size:60px;
font-weight:1000;
line-height:80px;
color:rgb(252,0,252);
background:rgb(255,0,255);
margin:3px;
text-shadow:1px 1px 1px rgb(255,0,255),
1px 1px 1px rgb(255,0,255),
1px 1px 1px rgb(255,0,255),
1px 1px 1px rgb(255,0,255),
1px 1px 1px rgb(255,0,255),
1px 1px 1px rgb(255,0,255),
1px 1px 1px rgb(255,0,255),
1px 1px 1px rgb(255,0,255),
1px 1px 1px rgb(255,0,255),
1px 1px 1px rgb(255,0,255),
0px 22px 10px rgb(200,0,200),
0px 25px 14px #000;
animation:load 3s infinite;
}
@keyframes load{
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;
}
View our previous post
How to run this code
To run this code there are some simple steps
Copy code
Make a file index.html
Paste code and save file
Open file in browser
Next topic on amazing hover and editable design with html css only:
Example
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