#box {
width:800px;
height:800px;
border-radius:50%;
margin:0px auto;
position:relative;
top:100px;
}
.second {
width:180px;
height:100px;
position:absolute;
color:black;
font-weight:bolder;
text-align:center;
font-size:40px;
}
.one {
width:180px;
height:20px;
background:black;
margin-bottom:5px;
}
.two {
width:180px;
height:20px;
margin-bottom:5px;
overflow:hidden;
}
.two:before {
display:block;
content:"";
background:black;
width:85px;
height:20px;
float:left;
}
.two:after {
display:block;
content:"";
background:black;
width:85px;
height:20px;
float:right;
}
.box-taiji {
width:0;
height:400px;
position:absolute;
left:50%;
top:50%;
margin-top:-200px;
/* 高度的一半 */
margin-left:-200px;
/* 宽度的一半 */
border-left:200px solid #000;
border-right:200px solid #fff;
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:#fff;
border-radius:50%;
box-shadow:0 200px 0 #000;
}
.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);
}
}
912
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
