仅供观看，是不能起到辟邪作用的 哈哈
<!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>