查看: 41|回复: 0

[前端资源] 案例分享:CSS3动画--八卦图(初学者进来看)

发表于 7 天前

<!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>

更多学习案例进群找群主【web前端25群】




回复

使用道具 举报