HTML
<body>
<div class="body">
<span>
<span></span>
<span></span>
<span></span>
<span></span>
</span>
<div class="hand">
<span></span>
<div class="face"></div>
<div class="cowl"></div>
</div>
</div>
<div class="speed">
<span></span>
<span></span>
<span></span>
<span></span>
</div>
<h1>UPLOADING</h1>
</body>
CSS
body {
background-color:#FFEB3B;
overflow: hidden;
}
h1 {
position: absolute;
font-family: Open Sans;
font-weight: 600;
font-size: 32px;;
text-transform: uppercase;
left: 45%;
top: 90%;
margin-left: -20px;
}
.body {
position: absolute;
top: 50%;
margin-left: -50px;
left: 50%;
transform:rotate(-15deg);
animation: friction .5s linear infinite;
}
.body > span {
height: 50px;
width: 8px;
background: #000;
position: absolute;
top: -6px;
left: 15px;
border-radius: 2px ;
transform:rotate(-30deg);
}
.hand span {
position: absolute;
width: 2px;
height: 0;
border-top: 12px solid transparent;
border-right: 20px solid #000;
border-bottom: 95px solid transparent;
transform:rotate(-15deg);
box-shadow:
}
.hand span:after {
color:red;
content: "S";
height: 18px;
width: 16px;
border-radius: 50%;
background: #000;
position: absolute;
right: -12px;
top: -18px;
transform:rotate(-15deg);
}
.hand span:before {
content: "";
position: absolute;
width: 10px;
height: 0;
border-top: 10px solid transparent;
border-right: 20px solid #000;
border-bottom: 45px solid transparent;
top: -24px ;
right: -22px;
transform:rotate(-15deg);
}
.face {
position: absolute;
height: 12px;
width: 20px;
background: #000;
border-radius: 20px 20px 0 0;
transform: rotate(80deg);
right: -8px;
top: -20px;
}
.face:after {
content: "";
height: 12px;
width: 12px;
background: #000;
right: 2px;
top: 5px;
position: absolute;
transform: rotate(45deg);
transform-origin: 50% 50%;
border-radius: 0 0 0 2px;
}
.cowl{
content: "";
position: absolute;
width: 6px;
height: 20px;
border-bottom: 20px solid #000;
border-right: 20px solid transparent;
top: -32px ;
right: -16px;
transform:rotate(-28deg);
}
.body > span > span:nth-child(1),
.body > span > span:nth-child(2),
.body > span > span:nth-child(3),
.body > span > span:nth-child(4){
width: 2px;
height: 30px;
background: #000;
position: absolute;
animation: fazer1 .2s linear infinite;
}
.body > span > span:nth-child(2) {
left:34px;
top: -30px;
animation: fazer2 .4s linear infinite;
}
.body > span > span:nth-child(3) {
top: 1px;
left:-42px;
animation: fazer3 .4s linear infinite;
animation-delay: -1s;
}
.body > span > span:nth-child(4) {
top: 4px;
left:-40px;
animation: fazer4 1s linear infinite;
animation-delay: -1s;
}
@keyframes fazer1 {0% {top: -20px;} 100% {top: 80px;opacity: 0;}}
@keyframes fazer2 {0% {top: -20px;} 100% {top: 100px;opacity: 0;}}
@keyframes fazer3 {0% {top: -20px;} 100% {top: 50px;opacity: 0;}}
@keyframes fazer4 {0% {top: -20px;} 100% {top: 150px;opacity: 0;}}
@keyframes friction {
0% { transform: translate(2px, 1px) rotate(0deg); }
10% { transform: translate(-1px, -3px) rotate(-1deg); }
20% { transform: translate(-2px, 0px) rotate(1deg); }
30% { transform: translate(1px, 2px) rotate(0deg); }
40% { transform: translate(1px, -1px) rotate(1deg); }
50% { transform: translate(-1px, 3px) rotate(-1deg); }
60% { transform: translate(-1px, 1px) rotate(0deg); }
70% { transform: translate(3px, 1px) rotate(-1deg); }
80% { transform: translate(-2px, -1px) rotate(1deg); }
90% { transform: translate(2px, 1px) rotate(0deg); }
100% { transform: translate(1px, -2px) rotate(-1deg); }
}
.longfazers {
position: absolute;
width: 100%;
height: 100%;
}
.speed span {
position: absolute;
height: 41px;
width: 01px;
background-color:#000;
}
.speed span:nth-child(1) {
left: 20%;
animation: lf .6s linear infinite;
animation-delay: -.5s;
}
.speed span:nth-child(2) {
left: 40%;
animation: lf2 .8s linear infinite;
animation-delay: -.1s;
}
.speed span:nth-child(3) {
left: 60%;
animation: lf3 .6s linear infinite;
}
.speed span:nth-child(4) {
left: 80%;
animation: lf4 .5s linear infinite;
animation-delay: -.3s;
}
@keyframes lf {100% {top: 100%;} 0% {top: -100%;opacity: 0;}}
@keyframes lf2 {100% {top: 100%;} 0% {top: -100%;opacity: 0;}}
@keyframes lf3 {100% {top: 200%;} 0% {top: -50%;opacity: 0;}}
@keyframes lf4 {100% {top: 200%;} 0% {top: -50%;opacity: 0;}}
