小作品： 旋转动画效果

太极旋转动画效果

开发工具与关键技术：Dream weaver 、HTML符号  
作者：程序猿-小千
撰写时间：2019年1月16日

用HTML+Css3来做了一个太极旋转效果动画图
（1）HTML样式展示：

<div class="box">
	<div class="taiji">
		<div class="tj_1 tj_z1"></div>
		<div class="tj_1 tj_z2"></div>
		<div class="tj_2 tj_s1">
			<div class="tj_ss tj_w"></div>
		</div>
		<div class="tj_2 tj_s2">
			<div class="tj_ss tj_b"></div>
		</div>
	</div>
</div>

（2）Css3样式展示：

.box{
	padding-top:100px;
	margin:0 auto;
	}
.box .taiji{
	margin: 0px 0px 0px 450px;
	}
.taiji{
	width: 600px; 
	height: 600px; 
	border-radius: 50%; 
	background-color: #fff;
	border:solid 5px #ccc;    
	animation: spin 2s linear infinite;
	}
.tj_1{
	position: absolute; 
	top: 0px; 
	width: 50%; 
	height: 100%;
	}
.tj_z1{
	left: 0px; 
	border-radius:100% 0 0 100% /50% 0 0 50%; 
	background: #000;
	}
.tj_z2{
	right: 0px; 
	border-radius:0 100% 100% 0 / 0 50% 50% 0; 
	background: #fff;
	}
.tj_2{
	position: absolute; 
	width: 50%; 
	height: 50%; 
	left: 25%; 
	border-radius: 50%;
	}
.tj_s1{
	bottom: 0px; 
	background: #fff;
	}
.tj_s2{
	top: 0px; 
	background: #000;
	}
.tj_ss{
	position: absolute; 
	width: 25%; 
	height: 25%; 
	left: 37.5%;
	border-radius: 50%;
	}
.tj_w{
	top:37.5%;
	background: #000;
	}
.tj_b{
	top:37.5%;
	background: #fff;
	}
/*动画方法*/
@keyframes spin {
	0% {
		transform:rotate(0deg);
	}
	50%{
		transform:rotate(180deg);
	}
	100% {
		transform:rotate(360deg);
	}
}

（3）成品效果图：

加油！！！