CSS3+JQ创建太极八卦阵

仅供观看,是不能起到辟邪作用的 哈哈

CSS3+JQ创建太极八卦阵

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>太极</title>
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
</head>
   <style>
       body,html{width:100%; height:100%;font-weight: bolder;background: #000;}
       body,p,h1,h2,h3,h4,h5,h6,span{margin:0;}
       ul,li,ol,dl,dt,dd{margin:0;padding: 0;list-style: none}
       img{display: block; border:0;}
       a{text-decoration: none; color:#333;}
       form,button,input{margin:0; padding:0;outline:0;}
       .clearfix:after{
       	content: '';
       	display: block;
       	clear: both;
       }
       .fl{float:left;}
       .fr{float:right;}
       .fixed{
         width:300px;
         height:300px; 
         border-radius:50%;
         position:fixed;
         left:50%;
         top:50%;
         -webkit-transform-style:preserve-3d;
          transform-style:preserve-3d;
         -webkit-transform:translate(-50%,-50%) rotateY(60deg);
         transform:translate(-50%,-50%) rotateY(0deg);
         box-shadow:0px 0px 10px 2px #fff;
         perspective:800px;
       }
       .nav-box{
         width:150px;
         height:150px;
         border-radius:50%;
         position:absolute;
         top:50%;
         left:50%;
         transition:8s;
         -webkit-transform:translate(-50%,-50%) translateZ(0) rotate(0deg);
         transform:translate(-50%,-50%) translateZ(0) rotate(0deg);
       }
       .box{
         width:150px;
         height:150px;
         border-radius:50%;
         background-color:rgb(70, 70, 70);
         position:absolute;
         top:50%;
         left:50%;
         -webkit-transform:translate(-50%,-50%);
         transform:translate(-50%,-50%);
         text-align:center;
         cursor: pointer;
         z-index: 6;
         box-shadow:0px 0px 50px 10px #fff;
         transition:2s;
         overflow:hidden;
       }
        .xb{transition:3s;}
        .xb2{
            width:150px;
            height:75px;
            border-bottom-left-radius:75px;
            border-bottom-right-radius:75px;
            background:#000;
            position:absolute;
            bottom:0;
        }
        .sb{transition:3s;}
        .sb2{
            width:150px;
            height:75px;
            border-top-left-radius:75px;
            border-top-right-radius:75px;
            background:#fff;
            position:absolute;
            top:0; 
        }
        /* 太极半圆 */
        .b1,.b2{transition:2s;}
        .b12,.b22{
            width:75px;
            height:37.5px;
            position:absolute;
            z-index:2;
        }
        .b12{
            top:-37px;
            left:0;
            background:#000;
            border-top-left-radius:75px;
            border-top-right-radius:75px;
        }
        .b22{
            bottom:-37px;
            right:0;
            background:#fff;
            border-bottom-left-radius:75px;
            border-bottom-right-radius:75px;
        }
        /* 太极圆点 */
        .yd1,.yd2{
            transition:3s;
            position:absolute;
            top:50%;
            margin-top:-7.5px;
            width:15px;
            height:15px;
            border-radius:50%;
        }
        .yd1{
            background:#fff;
            left:0px;
            -webkit-transform-origin:0px 50%;
            transform-origin:0px 50%;
            transition:left 200ms,transform 1s 500ms;
        }
        .yd2{
            background:#000;
            right:0px;
            -webkit-transform-origin:15px 50%;
            transform-origin:15px 50%;
            transition:right 200ms,transform 1s 500ms;
        }
        /* 圆点第二套样式 */
        .yd12,.yd22{
            left:50%;
            margin-left:-7.5px;
        }
        .yd12{
            /* bottom:-7.5px; */
            background:#fff;
        }
        .yd22{
            /* top:-7.5px; */
            background:#000;
        }
       .list{
         position:absolute;
         top:50%;
         left:50%;
         width:300px;
         height:300px;
         margin-left:-150px;
         margin-top:-150px;
         transition:1s;
         perspective:500px;
       }
       .list li{
         position:absolute;
         top:50%;
         left:50%;
         width:120px;
         height:80px;
         -webkit-transform-origin:60px 190px;
         transform-origin:60px 190px;
         border-radius:20px 20px;
         margin-left:-60px;
         margin-top:-40px;
         z-index:5;
         cursor: pointer;
         /* box-shadow:0px 0px 15px 3px #fff; */
         color:white;

       }
       .list li span{
         width:100%;
         height:100%;
         position:absolute;
         text-align:center;
         line-height:80px;
         border-radius:50%;
         font-size:54px;
       }
   </style>
<body>
    <div class="fixed">
        <div class="nav-box" title="别点">
         <div class="box">
          <div class="xb">
            <div class="b1">
                <div class="yd1"></div>
            </div>
         </div>
         <div class="sb">
            <div class="b2">
                <div class="yd2"></div>
            </div>
         </div>
         </div>
         <ul class="list">
           <li><span>三</span></li>
           <li><span>三</span></li>
           <li><span>三</span></li>
           <li><span>三</span></li>
           <li><span>三</span></li>
           <li><span>三</span></li>
           <li><span>三</span></li>
           <li><span>三</span></li>
           <li><span>三</span></li>
         </ul>
        </div>
    </div>
</body>
  <script>
    $(function(){
       var t1 = null;
       var t2 = null;
       var flog = false;
       var deg = 360 / ($(".list li").length)
       var len = $(".fixed").outerWidth()/2
       var w = $(".list li").length
       $(".nav-box").on("click",function(){
           if(!flog){
                 $(".list").css({
                  "transform":"translate(0px,-150px)"
                 })
                 $(".yd1").css({
                    "left":"50%",
                    "-webkit-transform":"rotate(-3600deg)",
                    "transform":"rotate(-3600deg)"
                 })
                 $(".yd2").css({
                    "right":"50%",
                    "-webkit-transform":"rotate(-3600deg)",
                    "transform":"rotate(-3600deg)"
                })
               t1 = setTimeout(function(){
                    $(".box").css({
                    "transform":"translate(-50%,-50%) rotate(1080deg)"
                    })
                    $(".xb").addClass("xb2")
                    $(".sb").addClass("sb2")
                    $(".b1").addClass("b12")
                    $(".b2").addClass("b22")
                    $(".yd1").addClass("yd12")
                    $(".yd2").addClass("yd22")
                    // li循环
                    $(".list li").each(function(i,key){
                             $(key).css({
                                "-webkit-transform":"rotate("+i*deg+"deg)",
                                "transform":"rotate("+i*deg+"deg)",
                                "transition":"500ms "+($(".list li").length-1-i)/100+"s"
                             })
                     })
                },1500)
               t2 = setTimeout(function(){
                  $(".nav-box").css({
                     "transform":"translate(-50%,-50%) translateZ(1000px) rotate(3600deg)"
                  })
                },3000)
               flog = !flog
            } else {
                    clearInterval(t1)
                    clearInterval(t2)
                    $(".nav-box").css({
                        "transform":"translate(-50%,-50%) translateZ(0px) rotate(0deg)"
                    })
                     $(".list li").each(function(i,key){
                         $(key).css({
                            "-webkit-transform":"translate(0px) rotate(0deg)",
                            "transform":"translate(0px) rotate(0deg)",
                            "transition":"500ms "+i/100+"s"
                         })
                      })
                      $(".box").css({
                          "transform":"translate(-50%,-50%) rotate(0deg)"
                      })
                      $(".yd1").css({
                            "left":"0px",
                            "-webkit-transform":"rotate(0deg)",
                            "transform":"rotate(0deg)"
                      })
                      $(".yd2").css({
                            "right":"0px",
                            "-webkit-transform":"rotate(0deg)",
                            "transform":"rotate(0deg)"
                      })
                      $(".xb").removeClass("xb2")
                      $(".sb").removeClass("sb2")
                      $(".b1").removeClass("b12")
                      $(".b2").removeClass("b22")
                      $(".yd1").removeClass("yd12")
                      $(".yd2").removeClass("yd22")


                       setTimeout(function(){
                          $(".list").css({
                              "transform":"translate(0px,0px)"
                          })
                       },600)
                      flog = !flog
           }
      })
      $(".list li").on("click",function(){
        $(".box").text($(this).text())
      })
    })
  </script>
</html>

 

上一篇:好看的css按钮样式收集


下一篇:js 拟写登录页 可以拖动登录框