css3动画逆向播放（案例分享:CSS3动画）
<!doctype html><html>，下面我们就来聊聊关于css3动画逆向播放?接下来我们就一起去了解一下吧!
css3动画逆向播放
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#in>div{
width:150px;
height:80px;
border:1pxsolid #ddd;
position:absolute;
top:310px;
left:425px;
}
#c1{
transform:rotatey(0deg)translatez(200px);
}
#c2{
transform:rotatey(180deg)translatez(200px);
}
#c3{
transform:rotatey(60deg)translatez(200px);
}
#c4{
transform:rotatey(120deg)translatez(200px);
}
#c5{
transform:rotatey(240deg)translatez(200px);
}
#c6{
transform:rotatey(300deg)translatez(200px);
}
/*卦图中70左浮动上外边距10px*/
#a3,#a18,#a21,#a24,#a9,#a13{
width:70px;
height:20px;
background:#f00;
margin-top:10px;
float:left;
}
/*卦图中70左浮动*/
#a11,#a25,#a6{
width:70px;
height:20px;
background:#f00;
float:left;
}
/*卦图中150左浮动*/
#a2,#a16,#a20{
width:150px;
height:20px;
background:#f00;
float:left;
}
/*卦图中70右浮动上外边距10px*/
#a4,#a10,#a14,#a17,#a22,#a23{
width:70px;
height:20px;
background:#f00;
margin-top:10px;
float:right;
}
/*卦图中70右浮动*/
#a7,#a12,#a26{
width:70px;
height:20px;
background:#f00;
float:right;
}
/*卦图中150右浮动上外边距10px*/
#a5,#a8,#a15,#a19,#a27,#a28{
width:150px;
height:20px;
background:#f00;
margin-top:10px;
float:right;
}
#all{
width:1000px;
height:700px;
margin:0auto;
padding:10px;
perspective:2000px;
}
#in{
width:1000px;
height:700px;
position:relative;
transform:rotatex(-30deg);
transform-style:preserve-3d;
animation:taiji3s linear infinite;
}
#all#bagua{
width:200px;
height:200px;
border-radius:200px;
overflow:hidden;
top:250px;
left:400px;
transform:rotatex(90deg)translatez(-50px);
animation:heibai0.5s linear infinite;
}
#bagua#black{
height:200px;
width:100px;
background:#000;
float:right;
position:relative;
}
#bagua#white{
height:200px;
width:100px;
background:#fff;
float:left;
position:relative;
}
#black.small{
width:100px;
height:100px;
background:#fff;
border-radius:50px;
position:absolute;
top:0;
left:-50px;
}
#black.small .hand{
width:20px;
height:20px;
background:#000;
border-radius:10px;
position:absolute;
top:40px;
left:50px;
}
#white.big{
width:100px;
height:100px;
background:#000;
border-radius:50px;
position:absolute;
bottom:0;
left:50px;
}
#white.big .header{
width:20px;
height:20px;
background:#fff;
border-radius:10px;
position:absolute;
top:40px;
left:50px;
}
@keyframestaiji{
0%{
transform:rotatex(-30deg)rotatey(0deg);
}
100%{
transform:rotatex(-30deg)rotatey(360deg);
}
}
@keyframesheibai{
0%{
transform:rotatex(90deg)rotate(0deg);
}
100%{
transform:rotatex(90deg)rotate(720deg);
}
}
</style>
</head>
<body>
<divid="all">
<divid="in">
<divid="c1">
<divid="a2"></div>
<divid="a3"></div>
<divid="a4"></div>
<divid="a5"></div>
</div>
<divid="c2">
<divid="a6"></div>
<divid="a7"></div>
<divid="a8"></div>
<divid="a9"></div>
<divid="a10"></div>
</div>
<divid="c3">
<divid="a11"></div>
<divid="a12"></div>
<divid="a13"></div>
<divid="a14"></div>
<divid="a15"></div>
</div>
<divid="c4">
<divid="a16"></div>
<divid="a17"></div>
<divid="a18"></div>
<divid="a19"></div>
</div>
<divid="c5">
<divid="a20"></div>
<divid="a21"></div>
<divid="a22"></div>
<divid="a23"></div>
<divid="a24"></div>
</div>
<divid="c6">
<divid="a25"></div>
<divid="a26"></div>
<divid="a27"></div>
<divid="a28"></div>
<divid="a29"></div>
</div>
<divid="bagua">
<divid="black">
<divclass="small">
<divclass="hand"></div>
</div>
</div>
<divid="white">
<divclass="big">
<divclass="header"></div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
更多学习案例进群找群主，前端/JAVA/PHP学习交流群120342833
,免责声明：本文仅代表文章作者的个人观点，与本站无关。其原创性、真实性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容文字的真实性、完整性和原创性本站不作任何保证或承诺，请读者仅作参考，并自行核实相关内容。文章投诉邮箱：anhduc.ph@yahoo.com
