CSS旋转太极案例

最新推荐文章于 2022-09-17 08:59:56 发布

杨羊羊咩咩～

最新推荐文章于 2022-09-17 08:59:56 发布

阅读量145

点赞数 1

分类专栏：前端 html 文章标签： css css3 html

本文链接：https://blog.csdn.net/qq_48700248/article/details/121343563

版权

前端同时被 2 个专栏收录

4 篇文章 0 订阅

订阅专栏

html

3 篇文章 0 订阅

订阅专栏

旋转太极案例

- 先点赞收藏再借鉴哦！！

先点赞收藏再借鉴哦！！

html部分：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<link rel="stylesheet" href="css/taiji.css">
		<title>太极旋转</title>
	</head>
	<body>
	<div class="box-taiji"></div>
	</body>
</html>

css部分：

.box-taiji {
	width:0;
	height:400px;
	position:relative;
	margin:50px auto;
	border-left:200px solid #000000;
	border-right:200px solid #ffffff;
	box-shadow:0 0 30px rgba(0,0,0,.5);
	border-radius:400px;
	animation:rotation 2.5s linear infinite;
	-webkit-animation:rotation 2.5s linear infinite;
	-moz-animation:rotation 2.5s linear infinite;
	}
.box-taiji:before,.box-taiji:after {
	position:absolute;
	content:"";
	display:block;}
.box-taiji:before {
	width:200px;
	height:200px;
	top:0;
	left:-100px;
	z-index:1;
	background-color:#ffffff;
	border-radius:50%;
	box-shadow:0 200px 0 #000000;
	}
.box-taiji:after {
	width:60px;
	height:60px;
	top:70px;
	left:-30px;
	z-index:2;
	background-color:#000;
	border-radius:50%;
	box-shadow:0 200px 0 #fff;
	}

@keyframes rotation {
0% {transform:rotate(0deg);}
100% {transform:rotate(-360deg);}
}
@-webkit-keyframes rotation {
0% {-webkit-transform:rotate(0deg);}
100% {-webkit-transform:rotate(-360deg);}
}
@-moz-keyframes rotation {
0% {-moz-transform:rotate(0deg);}
100% {-moz-transform:rotate(-360deg);}
}