css3 模仿太极图

最新推荐文章于 2021-08-03 23:41:48 发布

高菊红

最新推荐文章于 2021-08-03 23:41:48 发布

阅读量242

点赞数

分类专栏： CSS3

本文链接：https://blog.csdn.net/gaojuhong/article/details/79400381

版权

CSS3 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>css3 模仿太极图</title>
                <style type="text/css" media="screen">
			*{margin:0;padding:0;}
			.wrap{width:400px;height:400px;margin:100px auto;}
			.circlebox{position:relative;width:400px;height:400px;animation:move 2s infinite linear;}
			.bigBlackCircle{width:400px;height:400px;background-color: black;border-radius:50%;}
			.bigWhiteCircle{position:absolute;top:0;right:0;width:200px;height:400px;background-color:#fff;border-top-right-radius:200px;border-bottom-right-radius:200px;}
			.smallBlackCircle{position:absolute;top:0;left:100px;width:200px;height:200px;background-color:#000;border-radius:50%;}
			.smallWhiteCircle{position:absolute;bottom:0;left:100px;width:200px;height:200px;background-color:#fff;border-radius:50%;}
			.literSmallBlackCircle{position:absolute;left:175px;top:75px;width:50px;height:50px;background-color:#fff;border-radius:50%;}
			.literSmallWhiteCircle{position:absolute;left:175px;bottom:75px;width:50px;height:50px;background-color:#000;border-radius:50%;}
			@keyframes move{
				0 {transform:rotate(0deg);}
				100%{transform:rotate(360deg);}
			}
		</style>
	</head>
	<body>
		<div class="wrap">
			<div class="circlebox">
				<div class="bigBlackCircle"></div>
				<div class="bigWhiteCircle"></div>
				<div class="smallBlackCircle"></div>
				<div class="smallWhiteCircle"></div>
				<div class="literSmallBlackCircle"></div>
				<div class="literSmallWhiteCircle"></div>
			</div>
		</div>
	</body>
</html>

高菊红

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css3 模仿太极图

&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;css3 模仿太极图&lt;/title&gt; &lt;style type="text/css" me
复制链接

扫一扫

专栏目录