太极图绘制

太极图绘制

img

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>TaiChi</title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			body {
				background-color:skyblue;
			}
			div{
				width:200px;
				height:400px;
				background-color:#fff;
				
				border-left:200px solid #000000;
				
				margin:50px auto;
				
				border-radius:50%;
				
				transition:all .6s ease-in-out;
			}
			div::before,div::after{
				content:"";
				display:block;
				width:50px;
				height:50px;
				border-radius:50%;
				
				margin-left:-100px;
			}
			
			div::before{
				background:#fff;
				border:75px solid #000000;
			}
			
			div::after{
				background:#000;
				border:75px solid #fff;
			}
			
			div:hover{
				transform:rotate(360deg);
			}
		</style>
			
	<body>
		<div class="123">
			
		</div>
	</body>
</html>

posted @ 2019-12-14 13:32  小咸鱼|大梦想  阅读(298)  评论(0编辑  收藏  举报