css+js实现旋转八卦图
实现效果:
代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>八卦</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
html,body{
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.box{
width: 100px;
height: 100px;
/* background: red; */
position: relative;
animation: anim 5s infinite linear;
}
.yinyang,.yinyangf{
width: 96px;
height: 48px;
background: #fff;
border-color: #000;
border-width: 2px 2px 50px 2px;
border-radius: 100%;
border-style: solid;
position: absolute;
}
.yinyang::before,.yinyangf::before{
content: '';
width: 12px;
height: 12px;
position: absolute;
background: #fff;
border: 18px solid #000;
border-radius: 100%;
top: 26px;
}
.yinyang::after,.yinyangf::after{
content: '';
width: 12px;
height: 12px;
position: absolute;
background: #000;
border: 18px solid #fff;
border-radius: 100%;
top: 26px;
right: 0px;
}
.fangda{
animation: da 1.5s;
}
@keyframes anim{
to{
transform: rotate(360deg);
}
}
@keyframes da{
to{
transform: scale(2);
opacity: 0;
}
}
</style>
</head>
<body>
<div class="box">
<div class="yinyang"></div>
<div class="yinyangf"></div>
</div>
</body>
</html>
<script src="jq.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(".box").click(function(){
$(".yinyangf").addClass("fangda");
setTimeout(function(){
$(".yinyangf").removeClass("fangda");
},1500)
})
</script>
- QQ群:253510359
- 建议:VPS商家层出不穷,根据需要购买,切莫剁剁剁!
- 评测:很多VPS虽已评测,但网络环境改变稳定性,速度也会随之改变.评测只能作为一般性参考.不负任何法律,道义责任.
- 申明:所有vps,域名,服务器优惠信息均来自网络公开内容,由于水平有限不免有谬误.请以官方为准.