<!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>
CSS3太极八卦
最新推荐文章于 2024-09-02 20:34:02 发布