旋转太极

最新推荐文章于 2022-09-23 15:54:26 发布

小森呀

最新推荐文章于 2022-09-23 15:54:26 发布

阅读量311

点赞数

分类专栏：小案例文章标签： html css 旋转太极

本文链接：https://blog.csdn.net/KEY2018/article/details/92397851

版权

小案例专栏收录该内容

13 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>旋转太极</title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			.bg{
				width: 400px;
				height: 400px;
				background-color: black;
				position: relative;
				border-radius: 400px;
				margin: 300px auto;
				animation: name 2s infinite linear;
			}
			.up{
				width: 400px;
				height: 200px;
				background-color: white;
				border-radius: 400px 400px 0px 0px;
			}
			.left{
				width: 200px;
				height: 100px;
				background-color: white;
				position: absolute;
				top: 200px;
				border-radius: 0px 0px 400px 400px;
			}
			.right{
				width: 200px;
				height: 100px;
				background-color: black;
				position: absolute;
				left: 200px;
				top: 100px;
				border-radius: 400px 400px 0px 0px;
			}
			.lblack{
				width: 100px;
				height: 100px;
				background-color: black;
				position: absolute;
				left: 50PX;
				top: -50pX;
				border-radius: 100px;
			}
			.rwhite{
				width: 100px;
				height: 100px;
				background-color: white;
				float: right;
				position: absolute;
				left: 50PX;
				top: 50px;
				border-radius: 100px;
			}
			@-webkit-keyframes name{
				from{
					transform: rotate(360deg);
					}
				to{}
			}
		</style>
	</head>
	<body>
		<div class="bg">
			<div class="up"></div>
			<div class="left">
				<div class="lblack"></div>
			</div>
			<div class="right">
				<div class="rwhite"></div>
			</div>
		</div>
	</body>
</html>

小森呀

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
旋转太极

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>旋转太极</title> <style type="text/css"> *{ margin: 0; padding: 0; } .bg{ ...
复制链接

扫一扫