Volleyball Playing Man Animation Using Html Css
Html code
<html>
<body>
<div id="head"></div>
<div id="leg"></div>
<div id="pant"></div>
<div id="shirt"></div>
<div id="head"></div>
<div id="leg"></div>
<div id="pant"></div>
<div id="shirt"></div>
<div id="ball"></div>
<div id="arm-2"></div>
<div id="arm-1"></div>
<div id="foot">
<br>
<span id="balmes">D.BALMES</span>
</div>
<div id="arm-2"></div>
<div id="arm-1"></div>
<div id="foot">
<br>
<span id="balmes">D.BALMES</span>
</div>
<div id="post"></div>
<div id="board"></div>
<div id="ring"></div>
<div id="court">
<h1 align="center"> IF YOU LIKE IT please share</h1>
</div>
<div id="board"></div>
<div id="ring"></div>
<div id="court">
<h1 align="center"> IF YOU LIKE IT please share</h1>
</div>
</body></html>
CSS CODE
<style type="text/css">
/*character*/
#foot{
position: absolute;
top:700px;
left:200px;
height:40px;
width:80px;
border-top-right-radius:50px;
border-bottom-left-radius:10px;
border-bottom-right-radius:10px;
background-color:#f00;
animation:foot 1s ease infinite;
}
#leg{
position: absolute;
top:600px;
left:205px;
height:100px;
width:40px;
border-top-right-radius:20px;
border-bottom-left-radius:;
border-bottom-right-radius:;
background-color:skyblue;
animation:leg 1s ease infinite;
}
#pant{
position: absolute;
top:520px;
left:195px;
height:100px;
width:60px;
border-top-left-radius:20px;
border-bottom-left-radius:;
border-bottom-right-radius:;
background-color:green;
animation:pant 1s ease infinite;
}
#shirt{
position: absolute;
top:430px;
left:185px;
height:120px;
width:80px;
border-top-left-radius:30px;
border-top-right-radius:50px;
border-bottom-right-radius:;
background-color:red;
animation:shirt 1s ease infinite;
}
#head{
position: absolute;
top:350px;
left:190px;
height:80px;
width:80px;
background-color:orange;
border-radius:100%;
animation:head 1s ease infinite;
}
#arm-1{
position: absolute;
top:440px;
left:200px;
height:40px;
width:120px;
background-color:blue;
border-bottom-left-radius:20px;
border-bottom-right-radius:20px;
border-top-left-radius:20px;
border-top-right-radius:;
animation:arm-1 1s ease infinite;
}
#arm-2{
position: absolute;
top:360px;
left:290px;
height:100px;
width:30px;
background-color:blue;
border-bottom-left-radius:20px;
border-bottom-right-radius:20px;
border-top-left-radius:20px;
border-top-right-radius:20px;
animation:arm-2 1s ease infinite;
}
#balmes{
color:#fff;
align:center;
}
/*things*/
#ball{
position: absolute;
top:290px;
left:275px;
height:0px;
width:0px;
border:30px solid;
border-color: black yellow;
border-radius:100%;
animation:ball 1s ease-in-out infinite;
}
#court{
position: absolute;
top:742px;
left:0px;
height:70px;
width:1000px;
background-color:#808080;
}
#post{
position: absolute;
top:170px;
left:930px;
height:620px;
width:50px;
background-color:#000;
}
#board{
position: absolute;
top:10px;
left:880px;
height:250px;
width:50px;
background-color:#f80;
}
#ring{
position: absolute;
top:160px;
left:760px;
height:20px;
width:120px;
border-radius:10px;
background-color:#000;
}
/*
#scope{
position: absolute;
top:50px;
left:350px;
height:500px;
width:500px;
background: transparent;
border-radius:100%;
border:2px solid;
}*/
/*animation*/
@keyframes foot{
0%{transform:rotateZ(0deg);}
50%{transform:rotateZ(15deg);}
100%{transform:rotateZ(0deg);}
}
@keyframes leg{
0%{transform:rotateZ(0deg);}
50%{transform: translateX(10px) rotate(15deg);}
100%{transform:rotateZ(0deg);}
}
@keyframes pant{
0%{transform:rotateZ(0deg);}
50%{transform: translateX(5px) rotate(-15deg);}
100%{transform:rotateZ(0deg);}
}
@keyframes shirt{
0%{transform:rotateZ(0deg);}
50%{transform: translateX(15px) rotate(15deg);}
100%{transform:rotateZ(0deg);}
}
@keyframes head{
0%{transform: translateX(0deg);}
50%{transform: translateX(20px);}
100%{transform: translateX(0deg);}
}
@keyframes arm-1{
0%{transform:rotateZ(0deg);}
40%{width:130px;}
50%{transform: translateX(30px) translateY(-30px) rotate(-30deg);width:120px;}
100%{transform:rotateZ(0deg);}
}
@keyframes arm-2{
0%{transform:rotateZ(0deg);}
40%{transform: translateX(15px) translateY(-30px) rotate(-40deg);height:105px;}
50%{transform: translateX(25px) translateY(-50px) rotate(0deg);}
100%{transform:rotateZ(0deg);}
}
@keyframes ball{
0%{transform:rotateZ(0deg);}
20%,25%{transform: translateX(-30px) translateY(0px)rotate(40deg);}
30%,33%{transform: translateX(0px) translateY(0px)rotate(0deg);}
36%{transform: translateX(50px) translateY(-120px) rotate(-10deg);}
40%{transform: translateX(80px) translateY(-140px) rotate(-30deg);}
44%{transform: translateX(110px) translateY(-180px) rotate(-60deg);}
47%{transform: translateX(140px) translateY(-210px) rotate(-90deg);}
50%{transform: translateX(170px) translateY(-240px) rotate(-120deg);}
53%{transform: translateX(200px) translateY(-255px) rotate(-150deg);}
58%{transform: translateX(230px) translateY(-265px) rotate(-180deg);}
62%{transform: translateX(270px) translateY(-275px) rotate(-220deg);}
67%{transform: translateX(300px) translateY(-270px) rotate(-250deg);}
72%{transform: translateX(330px) translateY(-260px) rotate(-300deg);}
76%{transform: translateX(360px) translateY(-250px) rotate(-330deg);}
80%{transform: translateX(390px) translateY(-240px) rotate(-360deg);}
85%{transform: translateX(530px) translateY(-140px) rotate(80deg);}
88%{transform: translateX(550px) translateY(-100px) rotate(80deg);}
90%{transform: translateX(400px) translateY(200px) rotate(80deg);}
95%{transform: translateX(300px) translateY(400px) rotate(80deg);}
100%{transform:rotateZ(0deg);}
}
@keyframes net{
0%,25%,30%,35%,45%{transform:;border-bottom-right-radius:80px;}
/*character*/
#foot{
position: absolute;
top:700px;
left:200px;
height:40px;
width:80px;
border-top-right-radius:50px;
border-bottom-left-radius:10px;
border-bottom-right-radius:10px;
background-color:#f00;
animation:foot 1s ease infinite;
}
#leg{
position: absolute;
top:600px;
left:205px;
height:100px;
width:40px;
border-top-right-radius:20px;
border-bottom-left-radius:;
border-bottom-right-radius:;
background-color:skyblue;
animation:leg 1s ease infinite;
}
#pant{
position: absolute;
top:520px;
left:195px;
height:100px;
width:60px;
border-top-left-radius:20px;
border-bottom-left-radius:;
border-bottom-right-radius:;
background-color:green;
animation:pant 1s ease infinite;
}
#shirt{
position: absolute;
top:430px;
left:185px;
height:120px;
width:80px;
border-top-left-radius:30px;
border-top-right-radius:50px;
border-bottom-right-radius:;
background-color:red;
animation:shirt 1s ease infinite;
}
#head{
position: absolute;
top:350px;
left:190px;
height:80px;
width:80px;
background-color:orange;
border-radius:100%;
animation:head 1s ease infinite;
}
#arm-1{
position: absolute;
top:440px;
left:200px;
height:40px;
width:120px;
background-color:blue;
border-bottom-left-radius:20px;
border-bottom-right-radius:20px;
border-top-left-radius:20px;
border-top-right-radius:;
animation:arm-1 1s ease infinite;
}
#arm-2{
position: absolute;
top:360px;
left:290px;
height:100px;
width:30px;
background-color:blue;
border-bottom-left-radius:20px;
border-bottom-right-radius:20px;
border-top-left-radius:20px;
border-top-right-radius:20px;
animation:arm-2 1s ease infinite;
}
#balmes{
color:#fff;
align:center;
}
/*things*/
#ball{
position: absolute;
top:290px;
left:275px;
height:0px;
width:0px;
border:30px solid;
border-color: black yellow;
border-radius:100%;
animation:ball 1s ease-in-out infinite;
}
#court{
position: absolute;
top:742px;
left:0px;
height:70px;
width:1000px;
background-color:#808080;
}
#post{
position: absolute;
top:170px;
left:930px;
height:620px;
width:50px;
background-color:#000;
}
#board{
position: absolute;
top:10px;
left:880px;
height:250px;
width:50px;
background-color:#f80;
}
#ring{
position: absolute;
top:160px;
left:760px;
height:20px;
width:120px;
border-radius:10px;
background-color:#000;
}
/*
#scope{
position: absolute;
top:50px;
left:350px;
height:500px;
width:500px;
background: transparent;
border-radius:100%;
border:2px solid;
}*/
/*animation*/
@keyframes foot{
0%{transform:rotateZ(0deg);}
50%{transform:rotateZ(15deg);}
100%{transform:rotateZ(0deg);}
}
@keyframes leg{
0%{transform:rotateZ(0deg);}
50%{transform: translateX(10px) rotate(15deg);}
100%{transform:rotateZ(0deg);}
}
@keyframes pant{
0%{transform:rotateZ(0deg);}
50%{transform: translateX(5px) rotate(-15deg);}
100%{transform:rotateZ(0deg);}
}
@keyframes shirt{
0%{transform:rotateZ(0deg);}
50%{transform: translateX(15px) rotate(15deg);}
100%{transform:rotateZ(0deg);}
}
@keyframes head{
0%{transform: translateX(0deg);}
50%{transform: translateX(20px);}
100%{transform: translateX(0deg);}
}
@keyframes arm-1{
0%{transform:rotateZ(0deg);}
40%{width:130px;}
50%{transform: translateX(30px) translateY(-30px) rotate(-30deg);width:120px;}
100%{transform:rotateZ(0deg);}
}
@keyframes arm-2{
0%{transform:rotateZ(0deg);}
40%{transform: translateX(15px) translateY(-30px) rotate(-40deg);height:105px;}
50%{transform: translateX(25px) translateY(-50px) rotate(0deg);}
100%{transform:rotateZ(0deg);}
}
@keyframes ball{
0%{transform:rotateZ(0deg);}
20%,25%{transform: translateX(-30px) translateY(0px)rotate(40deg);}
30%,33%{transform: translateX(0px) translateY(0px)rotate(0deg);}
36%{transform: translateX(50px) translateY(-120px) rotate(-10deg);}
40%{transform: translateX(80px) translateY(-140px) rotate(-30deg);}
44%{transform: translateX(110px) translateY(-180px) rotate(-60deg);}
47%{transform: translateX(140px) translateY(-210px) rotate(-90deg);}
50%{transform: translateX(170px) translateY(-240px) rotate(-120deg);}
53%{transform: translateX(200px) translateY(-255px) rotate(-150deg);}
58%{transform: translateX(230px) translateY(-265px) rotate(-180deg);}
62%{transform: translateX(270px) translateY(-275px) rotate(-220deg);}
67%{transform: translateX(300px) translateY(-270px) rotate(-250deg);}
72%{transform: translateX(330px) translateY(-260px) rotate(-300deg);}
76%{transform: translateX(360px) translateY(-250px) rotate(-330deg);}
80%{transform: translateX(390px) translateY(-240px) rotate(-360deg);}
85%{transform: translateX(530px) translateY(-140px) rotate(80deg);}
88%{transform: translateX(550px) translateY(-100px) rotate(80deg);}
90%{transform: translateX(400px) translateY(200px) rotate(80deg);}
95%{transform: translateX(300px) translateY(400px) rotate(80deg);}
100%{transform:rotateZ(0deg);}
}
@keyframes net{
0%,25%,30%,35%,45%{transform:;border-bottom-right-radius:80px;}
50%{transform:; border-bottom-right-radius:0px;}
100%{transform:;}
100%{transform:;}
}
/*others*/
a{
color:red;
}
</style>
</head>
a{
color:red;
}
</style>
</head>
0 Comments