css3 实现一个旋转八卦图

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no">

	<title>qdabc.cn</title>
	<style>
	body{
		background-color: #ccc;
	}
	.box{
		width: 400px;
		height: 400px;
		margin: 0 auto;
		position: relative;
		display: flex;
		align-items: center;
		border-radius: 50%;
		overflow: hidden;
			-webkit-transition: all 3s;
		 	-webkit-animation: cd 3000ms infinite linear ;
		 	-o-animation: cd 3000ms infinite linear ;
		 	animation: cd 3000ms infinite linear ;

	}

			@-webkit-keyframes cd {
			0% { -webkit-transform:  rotate(0deg); }
			50%{-webkit-transform:rotate(-180deg) ;}
			100% { -webkit-transform: rotate(-360deg); }
		}
	.l{ width: 200px;height: inherit;background-color: #000; }
	.r{ width: 200px;height: inherit;background-color: #fff; }
	.c{ width: 200px;height: inherit; position: absolute; margin-left: -100px;left: 50%;top:0;}
		
	.wc{
		width: 60px;
		height:60px;
		border:70px solid #fff;
		background-color: #000;
		border-radius: 50%;
	}
	.bc{
		width: 60px;
		height:60px;
		border:70px solid #000;
		background-color: #fff;
		border-radius: 50%;
		
	}



	</style>
</head>
<body>
	<div class="box">
		<div class="l"></div>
		<div class="r"></div>
		<div class="c">
			<div class="bc"></div>
			<div class="wc"></div>	
		</div>
		
	</div>

</body>
</html>

欢迎分享本文,转载请保留出处:前端ABC » css3 实现一个旋转八卦图

赞 (1)
分享到:更多 ()

发表评论 0