无聊做了个旋转太极图

OK，废话不多说，先简单说下思路，楼下放代码。大神笑看过就行了。  

1、做一个太极背景图。

2、背景图上做一个大圆（便是通过这个大圆来实现旋转的）。

3、大圆左右分别做两个半圆。

4、每个半圆里面再做个颜色相反的半圆。

5、再加上两个太极点，OK  大功告成。

然后就是实现让它动起来的效果了。我们需要借助CSS3中的transform：ratate属性，不熟悉CSS3的同学们可要多去看看了。下面是代码。

<script>
var cycle = document.getElementById('big-cycle');
var deg = 0; //初始化转动角度

// 设置定时器 每1毫秒转动一次
setInterval(function(){
cycle.style.transform = "rotate("+(-deg)+"deg)"; //改变转盘属性
cycle.style.transitionTimingFunction = "linear"; //平滑转动
// deg += .2; //每次转.2度
},1)
</script>

以上是JS代码。楼下放CSS和HTML代码。

 

<style>
.cycle-bg, #big-cycle{
width: 500px;
height: 500px;
}
.cycle-bg{
background-color: #e3e3e3;
margin: 100px auto;
}
#big-cycle{
border-radius: 50%;
position: relative;
background-color: #fff;
}
.white, .small-white, .white-point{background-color: #fff;}
.black, .small-black, .black-point{background-color: #000;}
.white, .black{
height: 500px;
width: 250px;
position: absolute;
top: 0;
}
.white{
border-bottom-left-radius: 250px;
border-top-left-radius:250px;
left: 0;
}
.black{
border-bottom-right-radius: 250px;
border-top-right-radius:250px;
right: 0;
}
.small-white, .small-black{
width:126px;  /*126px是为了解决有分割线的BUG*/
height: 250px;
position: absolute;
}
.small-black{
border-bottom-left-radius: 125px;
border-top-left-radius:125px;
left: 125px;
top: 0;
}
.small-white{
border-bottom-right-radius: 125px;
border-top-right-radius:125px;
right: 125px;
bottom: 0;
}
.black-point, .white-point{
height: 20px;
width: 20px;
border-radius: 50%;
position: absolute;
z-index: 800;
}
.black-point{
left: -10px;
top: 115px;
}
.white-point{
right: -10px;
bottom: 115px;
}
</style>

 

<div class="cycle-bg">
<div id="big-cycle">
<div class="white">
<div class="small-black">
<div class="white-point"></div>
</div>
</div>
<div class="black">
<div class="small-white">
<div class="black-point"></div>
</div>
</div>
</div>
</div>

本人也是前端小白一个，如果您发现问题请及时和我联系，我会在第一时间纠正。

转载于:https://www.cnblogs.com/kawask/p/6144146.html