css3的一个八卦图

最新推荐文章于 2024-03-07 17:52:03 发布

small_animation

最新推荐文章于 2024-03-07 17:52:03 发布

阅读量409

点赞数

分类专栏： css3动画文章标签： css3

本文链接：https://blog.csdn.net/small_animation/article/details/88952055

版权

css3动画专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>八卦图</title>
		<style type="text/css">
			html{overflow: hidden;}
			div{border-radius: 50%;}
			@keyframes myFirst{
				0%{transform: rotate(0deg);}
				25%{transform: rotate(-90deg);}
				50%{transform: rotate(-180deg);}
				75%{transform: rotate(-270deg);}
				100%{transform: rotate(-360deg);}
			}
			.box{
				width: 400px; height: 400px; border: 1px solid black; margin: 10% auto;
				background: linear-gradient(90deg,#fff 50%,#000 50%);
				animation: myFirst 5s linear infinite;
			}
			.left,.right{width: 200px; height: 120px; margin: 0 auto; padding-top: 80px;}
			.left{background-color: #000;}
			.right{background-color: #fff;}
			.left-small,.right-small{width: 40px; height: 40px; margin: 0 auto;}
			.left-small{background-color: #fff;}
			.right-small{background-color: #000;}
		</style>
	</head>
	<body>
		<div class="box">
			<div class="left">
				<div class="left-small"></div>			
			</div>
			<div class="right">
				<div class="right-small"></div>
				
			</div>
		</div>
	</body>
</html>

small_animation

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
css3的一个八卦图

<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>八卦图</title> <style type="text/css"> html{overflow: hidden;} div{border-radius: 50%;...
复制链接

扫一扫