How To Create 'Loading' 3D Animation with HTML and CSS #FREE_CODE
Create 'Loading' 3D Animation
3D Animation is the process of placing objects and characters in three-dimesional space and manipulation them to create the illusion of movement. This time, I will share a free sourch code on how to create a 3D 'LOADING' Animation with HTML and CSS. Here's the sourch code.
HTML CODE:
<!doctype html>
<html>
<head>
<title>3d Loader</title>
</head>
<body>
<div class="container">
<span>L</span>
<span>O</span>
<span>A</span>
<span>D</span>
<span>I</span>
<span>N</span>
<span>G</span>
</div>
</body>
</html>
CSS CODE:
body {
margin:0;
padding:0;
background:#fff;
}
.container{
position:absolute ;
top:50%;
left:50%;
transform:translate(-50%,-50%);
height:80px;
width:310px;
background:#fff;
display:flex;
justify-content:center ;
}
span{
position:relative ;
font-size:60px;
font-weight:1000;
line-height:80px;
color:#fff;
background:#fff;
margin:3px;
text-shadow:1px 1px 1px #777,
1px 2px 1px #777,
1px 3px 1px #777,
1px 4px 1px #777,
1px 5px 1px #777,
1px 6px 1px #777,
1px 7px 1px #777,
1px 8px 1px #777,
1px 9px 1px #777,
1px 10px 1px #777,
0px 22px 10px #aaa,
0px 25px 14px #bbb;
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;
}
----------------------------------------------
That's all for now, hopefully useful.
See you in the next discussion about programming.
.png)
Komentar
Posting Komentar