用HTML5制作的一个简单的动画效果

本文转载自查看原文 2020-12-19 22:24 403

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>吊毛打篮球</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.box1{
border: 0px solid red;
width: 25px;
height: 300px;
background-color: #0000FF;
margin-top: 350px;
margin-left: 1450px;
z-index: 3;
/* position: absolute; */
}
.box20{
border: 0px solid red;
width: 25px;
height: 300px;
background-color: #0000FF;
margin-top: -290px;
margin-left: 1450px;
z-index: 4;
position: absolute;
}
.box2{
border: 0px solid red;
width: 250px;
height: 100px;
background-color: #0000FF;
margin-top: -51px;
margin-left: 1450px;
position: absolute;
z-index: 3;
}
.box3{
border: 0px solid red;
width: 25px;
height: 360px;
background-color: #0000FF;
margin-top: -350px;
margin-left: 1560px;
position: absolute;
transform: rotate(-40deg);
z-index: 3;
}
.box4{
border: 0px solid red;
width: 25px;
height: 160px;
background-color: #0000FF;
margin-top: -419px;
margin-left: 1376px;
position: absolute;
transform: rotate(-65deg);
z-index: 3;
}
.box5{
border: 0px solid red;
width: 26px;
height: 30px;
background-color: #0000FF;
margin-top: -386px;
margin-left: 1299px;
position: absolute;
transform: rotate(90deg);
border-radius: 6px 0 0 0;
z-index: 2;
}
.box6{
border: 0px solid red;
width: 15px;
height: 180px;
background-color: #0000FF;
margin-top: -495px;
margin-left: 1285px;
position: absolute;
transform: rotate(0deg);
z-index: 3;
}
.box7{
border: 0px solid red;
width: 10px;
height: 150px;
background-color: #0000FF;
margin-top: -450px;
margin-left: 1405px;
position: absolute;
transform: rotate(-38deg);
z-index: 2;
}
.box8{
border: 0px solid red;
width: 10px;
height: 75px;
background-color: #0000FF;
margin-top: -472px;
margin-left: 1326px;
position: absolute;
transform: rotate(90deg);
border-radius: 5px 0 0 0;
z-index: 2;
}
.box9{
border: 0px solid red;
width: 12px;
height: 140px;
background-color: #0000FF;
margin-top: -434px;
margin-left: 1226px;
position: absolute;
transform: rotate(90deg);
z-index: 2;
}
.box10 table{
border: 1px solid black;
position: absolute;
margin-top: -359px;
margin-left: 1175px;
height: -100px;
width: 100px;
z-index: 2;
}
.box11 table{
border: 1px solid black;
position: absolute;
margin-top: -329px;
margin-left: 1190px;
border-top: none;
z-index: 2;
}
.box12{
border: 0px solid red;
width: 33px;
height: 100px;
background-color: #03ff13;
margin-top: -144px;
margin-left: 1502px;
position: absolute;
transform: rotate(-45deg);
border-radius: 10px 10px 10px 10px;
z-index: 2;
}
.box13{
border: 3px solid #03ff13;
width: 13px;
height: 60px;
background-color: #03ff13 ;
margin-top: -134px;
margin-left: 1526px;
position: absolute;
transform: rotate(-45deg);
border-radius: 10px 10px 10px 10px;
z-index: 2;
}
.box14{
border: 3px solid #03ff13;
width: 13px;
height: 30px;
margin-top: -141px;
margin-left: 1481px;
position: absolute;
transform: rotate(-45deg);
border-radius: 10px 10px 10px 10px;
z-index: 2;
}
.box15{
border: 3px solid #03ff13;
width: 13px;
height: 60px;
margin-top: -110px;
margin-left: 1498px;
position: absolute;
transform: rotate(-45deg);
border-radius: 10px 10px 10px 10px;
z-index: 2;
}
.box16{
border: 0px solid black;
width: 200px;
height: 200px;
margin-top: -250px;
margin-left: 400px;
position: absolute;
animation: basketball 3s linear infinite 2s normal;
z-index: 2;
}
.box161{
border: 0px solid #ff1803;
width: 100px;
height: 100px;
background-color: #ff1803;
margin-top:50px;
margin-left: 50px;
position: absolute;
transform: rotate(-45deg);
border-radius: 100%;
z-index: 2;
}
.box162{
border: 2px solid white;
width: 55px;
height: 35px;
position: absolute;
/* background-color: black; */
border-radius: 35px 20px 0 0;
margin-left: 100px;
margin-top: 100px;
transform: rotate(-30deg);
z-index: 2;
}
.box163{
border: 2px solid white;
width: 57px;
height: 36px;
position: absolute;
/* background-color: black; */
border-radius: 25px 30px 0 0;
margin-left: 50px;
margin-top: 52px;
transform: rotate(150deg);
z-index: 2;
}
.box164{
border: 2px solid white;
width: 105px;
height: 53px;
position: absolute;
/* background-color: black; */
border-radius: 35px 25px 0 0;
margin-left: 67px;
margin-top: 90px;
transform: rotate(-40deg);
z-index: 2;
}
.box165{
border: 2px solid white;
width: 105px;
height: 55px;
position: absolute;
/* background-color: black; */
border-radius: 35px 25px 0 0;
margin-left: 30px;
margin-top: 85px;
transform: rotate(50deg);
z-index: 2;
}
@keyframes basketball{
30%{
transform: rotate(0deg);
margin-top: -250px;
margin-left: 400px;
}
50%{
transform: rotate(90deg);
margin-top: -540px;
margin-left: 1128px;
}
80%{
transform: rotate(180deg);
margin-top: -100px;
margin-left: 1128px;
}
100%{
transform: rotate(-360deg);
margin-top: -100px;
margin-left: 400px;
}
}
.box17{
margin-top: -10px;
margin-left: 50px;
animation: diaomao 5s linear infinite 0s normal;
z-index: 2;
}
.box171{
border: 3px solid #54FFAF;
border-radius: 50%;
width: 80px;
height: 80px;
position: absolute;
margin-top: -200px;
margin-left: 50px;
background-color: #03FF13;
}
.box172{
border: 3px solid #54FFAF;
/* border-radius: 50%; */
width: 5px;
height: 60px;
position: absolute;
margin-top: -75px;
margin-left: 105px;
background-color: #03FF13;
transform: rotate(-20deg);
animation: tui1 5s linear infinite;
}
@keyframes tui1{
from{transform: rotate(-20deg);}
to{transform: rotate(-16deg);}
}
.box173{
border: 3px solid #54FFAF;
/* border-radius: 50%; */
width: 5px;
height: 60px;
position: absolute;
margin-top: -75px;
margin-left: 80px;
background-color: #03FF13;
transform: rotate(20deg);
animation: tui2 5s linear infinite;
}
@keyframes tui2{
from{transform: rotate(20deg);}
to{transform: rotate(16deg);}
}
.box071{
border: 0px solid red;
animation: gebo 5s linear infinite 0s;
position: absolute;
margin-top: -120px;
margin-left: 90px;
width: 100px;
height: 100px;
z-index: 4;
}
@keyframes gebo{
from{transform: rotate(0deg);}
to{transform: rotate(-30deg);
margin-top: -132px;
margin-left: 105px;}
}
.box174{
border: 3px solid #54FFAF;
/* border-radius: 50%; */
width: 5px;
height: 60px;
position: absolute;
margin-top: 0px;
margin-left: 25px;
background-color: #03FF13;
transform: rotate(120deg);
}
.box176{
border: 3px solid #54FFAF;
/* border-radius: 50%; */
width: 10px;
height: 50px;
position: absolute;
margin-top: -120px;
margin-left: 90px;
background-color: #03FF13;
transform: rotate(deg);
}
.box175{
border: 3px solid #54FFAF;
/* border-radius: 50%; */
width: 5px;
height: 60px;
position: absolute;
margin-top: -5px;
margin-left: 25px;
background-color: #03FF13;
transform: rotate(110deg);
}
@keyframes diaomao{
40%{
margin-top: -10px;
margin-left: 50px;
}
50%{
margin-top: -10px;
margin-left: 320px;
}
60%{
margin-top: -10px;
margin-left: 320px;
}
70%{
margin-top: -10px;
margin-left: 320px;
}
80%{
margin-top: -10px;
margin-left: 320px;
}
90%{
margin-top: -10px;
margin-left: 320px;
}
100%{
margin-top: -10px;
margin-left: 320px;
}

}

.box18 {
border: 2px solid #008000;
width: 1000px ;
height: 700px;
margin-top: -360px;
margin-left: 452px;
position: absolute;
transform: skewX(-2deg);
z-index: 1;
}
.box19{
border: 1px solid red;
width: 200px;
height: 300px;
border-radius: 200px 200px 0 0;
position: absolute;
transform: rotate(-88deg);
margin-top: -150px;
margin-left: 1201px;
z-index: 2;
}
.box21{
border: 1px solid red;
width: 400px;
height: 500px;
border-radius: 200px 200px 0 0;
position: absolute;
transform: rotate(-88deg);
margin-top: -250px;
margin-left: 1002px;
z-index: 2;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>
<div class="box5"></div>
<div class="box6"></div>
<div class="box7"></div>
<div class="box8"></div>
<div class="box9"></div>
<div class="box10">
<table border="1" cellpadding="0" cellspacing="0" width="100px" height="30px">
<tr><td></td><td></td><td></td><td> </td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td> </td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td> </td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td> </td><td></td><td></td><td></td></tr>
</table>
</div>
<div class="box11">
<table border="1" cellpadding="0" cellspacing="0" width="70px" height="20px">
<tr><td> </td><td></td><td></td><td></td><td></td></tr>
<tr><td> </td><td></td><td></td><td></td><td></td></tr>
<tr><td> </td><td></td><td></td><td></td><td></td></tr>
</table>
</div>
<div class="box12"></div>
<div class="box13"></div>
<div class="box14"></div>
<div class="box15"></div>
<div class="box16">
<div class="box161"></div>
<div class="box162"></div>
<div class="box163"></div>
<div class="box164"></div>
<div class="box165"></div>
</div>

<div class="box17">
<div class="box171"></div>
<div class="box172"></div>
<div class="box173"></div>
<div class="box071"><div class="box174"></div>
<div class="box175"></div></div>
<div class="box176"></div>
</div>
<div class="box18">

</div>
</div>
<div class="box19"></div>
<div class="box20"></div>
<div class="box21"></div>
<div class="box22"></div>
<div class="box23"></div>
<div class="box24"></div>
</body>
</html>

免责声明！

本站转载的文章为个人学习借鉴使用，本站对版权不负任何法律责任。如果侵犯了您的隐私权益，请联系本站邮箱yoyou2525@163.com删除。

猜您在找 HTML5 Maker – 在线轻松制作 HTML5 动画效果 html5制作一个时钟 HTML5 动画效果的多种实现方式使用HTML5制作简单的RPG游戏 Fanvas是一个把swf转为html5 canvas动画的系统用Phaser来制作一个html5游戏——flappy bird （一） css制作简单loading动画效果【css3 loading加载动画】用javascript实现简单的动画效果的一个小实例 Adobe edge animate制作HTML5动画可视化工具（一）教你如何制作html5 svg线条动态绘制文字轮廓边框动画