html css 八卦图,CSS动画-八卦图

该楼层疑似违规已被系统折叠 隐藏此楼查看此楼

Document

#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%{