Html
    Css
    Js

    
                        
body,p,ul,ol,dl,dd,h1,h2,h3,h4,h5,h6,td,input,select,option,textarea{
	margin:0;
	padding:0;
}
html,body{
	height: 100%;
}
body{
	display: flex;
	justify-content: center;
	align-items: center;
	background: gray;
}
.boss{
	display: flex;
	animation: zhuan 5s infinite linear;
}
@keyframes zhuan{
	0%{
		transform:rotate(0deg); 
	}
	100%{
		transform:rotate(-360deg); 
	}
}
.box{
	width: 400px;
	height: 400px;
	display: flex;
	border-radius: 50%; 
	overflow: hidden;
	
}
.box .h{
	width: 200px;
	height: 400px;
	background:#000;
}
.box .b{
	width: 200px;
	height: 400px;
	background:#fff;
}
.yuan{
	position: fixed;
	transform: translate(100px);
}
.xy{
	width: 200px;
	height: 200px;
	border-radius: 50%;
	margin:0 auto;
	display: flex;
	justify-content: center;
	align-items: center;
}
.xy1{
	background: #000;
}
.xy1 .bd{
	width: 70px;
	height: 70px;
	background: #fff;
	border-radius: 50%;
}
.xy2{
	background: #fff;
}
.xy2 .hd{
	width: 70px;
	height: 70px;
	background: #000;
	border-radius: 50%;
}

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

css八卦图(原创)

动态八卦图 纯css制作

0