（模仿）： CSS3的 TAI JI rotate效果

太极rotate动画效果

开发工具与关键技术：Dream weaver 、HTML、CSS3
作者：曾子千
撰写时间：2019年1月17日
           

用HTML+Css3来做了一个太极旋转效果动画图

（1）HTML样式展示：

<div class="tj">
	<div class="taiji">
		<div class="tj1 t3"></div>
		<div class="tj1 t4"></div>
		<div class="tj2 j3"><div class="tj3 t"></div></div>
		<div class="tj2 j4"><div class="tj3 j"></div></div>
	</div>
</div>
           

（2）Css3样式展示：

主要通过css3来设置选择器中的属性和值来达到想要的效果，设置元素：宽（width）高（width），背景颜色（background），绝对定位(position: absolute)内边距（padding）外边距（margin，动画属性（animation）：animation动画属性同样可以和位移（translate）、旋转（rotate）、缩放（scale）、扭曲 (skew)这4种几何变换，从而自定义动画。

.tj{
	padding-top:100px; /*设置内边距*/
	margin: 0px 0px 0px 450px; /*设置外边距*/
	}
.taiji{
	width: 600px; 
	height: 600px; 
	border-radius: 300px; /*设置圆角*/
	border:solid 2px #ccc;/*设置边框*/
	animation: spin 5s linear infinite; /*设置动画属性*/
	}
.tj1.t3{
	width: 50%; 
	height: 100%;
	background: #000;
	position: absolute; /*设置绝对定位*/ 
	border-radius:100% 0 0 100% / 50% 0 0 50%; /*设置圆角*/ 
	}
.tj2{
	width: 50%; 
	height: 50%; 
	left: 25%; 
	border-radius: 50%;/*设置圆角*/ 
	position: absolute; /*设置绝对定位*/
	}
.t4{
	background: #fff;
	border-radius:0 100% 100% 0 / 0 50% 50% 0; /*设置圆角*/ 
	}

.j3{
	bottom: 0px; 
	background: #fff;
	}
.j4{
	background: #000;
	}
.tj3{
	width: 25%; 
	height: 25%; 
	left: 37.5%;
	border-radius: 50%;/*设置圆角*/
	position: absolute; /*设置绝对定位*/
	}
.t{
	top:37.5%;
	background: #000;
	}
.j{
	top:37.5%;
	background: #fff;
	}
/*—————————动画方法—————————*/
@keyframes spin {
	0% {
		transform:rotate(0deg);
		/*利用transform功能来实现旋转*/
	}
	100% {
		transform:rotate(360deg);
	}
}
           

（3）成品效果图：

加油！！！