CSS3太极八卦

最新推荐文章于 2024-06-17 11:12:01 发布

程序员的程呀

最新推荐文章于 2024-06-17 11:12:01 发布

阅读量129

点赞数 2

文章标签： html5 css3 css

本文链接：https://blog.csdn.net/HycOrange/article/details/127451214

版权


<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			/*子元素会把高度撑起来*/
			#box{
				width: 0;
				height: 300px;
				position: relative;
				margin:50px auto;
				border-left: 150px solid #000;
				border-right: 150px solid #fff;
				border-radius:300px ;
				/*阴影*/
				box-shadow: 0 0 30px rgb(0,0,0,0.8);
				border-radius: 300px;
				transform: rotateZ(0deg);
				animation: name 1s linear infinite;
			}
			@keyframes name{
				20%{
					transform: rotateZ(-72deg);
				}
				100%{
					transform: rotateZ(-360deg);
				}
			}
			/*向后添加内容*/
			#box:after{
				content: "";
				width: 150px;
				height: 150px;
				position: absolute;
				display: block;
				top: 0;
				left: -70px;
				background: #fff;
				border-radius:150% ;
				/*阴影:*/
				box-shadow:0 150px 0 #000 ;
				z-index: 1;
			}
			#box:before{
				content: "";
				position: absolute;
				display: block;
				top: 38px;
				left: -38px;
				width: 75px;
				height: 75px;
				background: #000;
				box-shadow: 0 150px 0 #fff;
				border-radius:50% ;
				z-index: 2;
			}
		</style>
	</head>
	<body>
		<div id="box"></div>
	</body>
</html>