Html
    Css
    Js

    
                        
.taiji {
	margin:50px auto 0;
	height:200px;
	width:200px;
	animation:run-inner 2s infinite linear;
}
@keyframes run-inner {
	0% {
	transform:rotate(0deg)
}
25% {
	transform:rotate(-90deg)
}
50% {
	transform:rotate(-180deg)
}
75% {
	transform:rotate(-270deg)
}
100% {
	transform:rotate(-360deg)
}
}.a {
	width:200px;
	height:100px;
	border:1px solid #D3D3D3;
	border-bottom:0px;
	border-radius:100px 100px 0 0;
	background:#fff;
	position:relative;
}
.a:after {
	content:"";
	background:#fff;
	width:15px;
	height:15px;
	border-radius:50%;
	position:absolute;
	top:72px;
	left:147px;
}
.a .inner {
	width:100px;
	height:50px;
	position:absolute;
	bottom:0;
	right:0;
	background:#000;
	border-radius:50px 50px 0 0;
}
.b {
	width:201px;
	height:101px;
	border:1px solid #D3D3D3;
	border-top:0px;
	border-radius:0 0 100px 100px;
	background:#000;
	position:relative;
}
.b:after {
	content:"";
	background:#000;
	width:15px;
	height:15px;
	border-radius:50%;
	position:absolute;
	bottom:72px;
	right:147px;
}
.b .inner {
	width:100px;
	height:50px;
	position:absolute;
	top:0;
	left:0;
	background:#fff;
	border-radius:0 0 50px 50px;
}

                        
↑上面代码改变,会自动显示代码结果 jQuery调用版本:2.1.4
 立即下载

CSS3旋转的太极

适合初学者

0