3D loader animation using CSS
Welcome friends,
In this article I made a attractive ‘3D loader animation” with CSS for your
webpage using only with HTML and CSS as you can see this animation effect in the
following picture.
These codes of '3d loader animation' also have explained below.
Code explanation:-
In HTML:_
In the following code I used one ‘div’ for animation loader
and three “span” tag for making three rings.
In CSS:-
1. Background
style
2. Loader
style(lprespective, style, position)
3. Design
rings(3D design)
4. Different
animation duration for different-different rings
5. Animation’s keyframes
5. Animation’s keyframes
Source code for this animation is given below.
HTML code
<!DOCTYPE html>
<html>
<head>
<title>Welcome
MikeyToTech</title>
</head>
<body>
<div class="mikeytotech"
style="position: absolute;">
<p
style="font-style: italic;font-family: arial;font-size:
30px;font-weight:bold;color: #ff8168;text-shadow: -2px 1px 0
red">MikeyToTech</p>
<p
style="font-style: italic;font-family: arial;font-size:
18px;font-weight:bold;color: #8bef98;text-shadow: -0.4px 0 0
pink;margin-left: 65px;margin-top: -35px;">
--<u>Mukesh
bidiyasar</u>
</p>
</div>
<!--Rings and Loader box-->
<div
class="loader">
<span></span>
<span></span>
<span></span>
</div>
</body>
</html>
|
CSS code
/*Background style*/
body
{
margin:0;
padding:
0;
display:
flex;
min-height:
100vh;
background:
radial-gradient(#ef6952,#964b52);
}
/*loader style*/
.loader
{
margin-left:
40%;
margin-top:
15%;
position:
relative;
height:
200px;
width:
200px;
justify-content:
center;
display:
flex;
align-items:
center;
transform-style:
preserve-3d;
transform:
perspective(500px) rotateX(45deg);
}
/*Design Ring*/
.loader span
{
position:
absolute;
border:10px
solid #04f7df;
display:
block;
box-sizing:
border-box;
border-radius:
50%;
box-shadow:
0 10px 0 #007e80,inset 0 10px #007e80;
animation:
animate 3s ease-in-out infinite;
}
.loader
span:nth-child(1)
{
animation-delay:
1s;
}
.loader
span:nth-child(2)
{
animation-delay:
2s;
}
}
.loader
span:nth-child(3)
{
animation-delay:
3s;
}
/*Animation*/
@keyframes
animate
{
0%
{
transform:
translateZ(-100px);
height:
100%;
width:
100%;
}
25%
{
transform:
translateZ(100px);
height:
100%;
width:
100%;
}
50%
{
transform:
translateZ(100px);
height:
30%;
width:
30%;
}
75%
{
transform:
translateZ(-100px);
height:
30%;
width:
30%;
}
100%
{
transform:
translateZ(-100px);
height:
100%;
width:
100%;
}
}
|
WATCH VIDEO:-
============================================================================================================================
-----If you don’t know HTML and CSS language, and you want to
see this animation then you can user the following steps:-
1.
You
have to copy the following codes and paste in your text editor(notepad,
notepad++, sublimetext etc.)
2.
Save
file with ‘.html’ extensen
3.
Now,
you can open this file in your browser and you can see animation effect.
All HTML and CSS combine code
<!DOCTYPE html>
<html>
<head>
<!---------Css
code ------------------->
<style
type="text/css">
/*Background
style*/
body
{
margin:0;
padding:
0;
display:
flex;
min-height:
100vh;
background:
radial-gradient(#ef6952,#964b52);
}
/*loader
style*/
.loader
{
margin-left:
40%;
margin-top:
15%;
position:
relative;
height:
200px;
width:
200px;
justify-content:
center;
display:
flex;
align-items:
center;
transform-style:
preserve-3d;
transform:
perspective(500px) rotateX(45deg);
}
/*Design
Ring*/
.loader
span
{
position:
absolute;
border:10px
solid #04f7df;
display:
block;
box-sizing:
border-box;
border-radius:
50%;
box-shadow:
0 10px 0 #007e80,inset 0 10px #007e80;
animation:
animate 3s ease-in-out infinite;
}
.loader
span:nth-child(1)
{
animation-delay:
1s;
}
.loader
span:nth-child(2)
{
animation-delay:
2s;
}
}
.loader
span:nth-child(3)
{
animation-delay:
3s;
}
/*Animation*/
@keyframes
animate
{
0%
{
transform:
translateZ(-100px);
height:
100%;
width:
100%;
}
25%
{
transform:
translateZ(100px);
height:
100%;
width:
100%;
}
50%
{
transform:
translateZ(100px);
height:
30%;
width:
30%;
}
75%
{
transform:
translateZ(-100px);
height:
30%;
width:
30%;
}
100%
{
transform:
translateZ(-100px);
height:
100%;
width:
100%;
}
}
</style>
<!------------------------------------>
<title>Welcome
MikeyToTech</title>
</head>
<body>
<div class="mikeytotech"
style="position: absolute;">
<p
style="font-style: italic;font-family: arial;font-size:
30px;font-weight:bold;color: #ff8168;text-shadow: -2px 1px 0
red">MikeyToTech</p>
<p
style="font-style: italic;font-family: arial;font-size:
18px;font-weight:bold;color: #8bef98;text-shadow: -0.4px 0 0
pink;margin-left: 65px;margin-top: -35px;">
--<u>Mukesh
bidiyasar</u>
</p>
</div>
<!--Rings and Loader box-->
<div
class="loader">
<span></span>
<span></span>
<span></span>
</div>
</body>
</html>
|
0 Comments