CSS
语言：
CSSSCSS
确定
body {
width: 100vw;
height: 100vh;
background: -webkit-radial-gradient(circle, #4d4d4d, #262626, #000);
background: radial-gradient(circle, #4d4d4d, #262626, #000);
overflow: hidden;
}
.yin-yang {
position: absolute;
z-index: 2;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%) perspective( 600px) rotateX(45deg);
transform: translate(-50%, -50%) perspective( 600px) rotateX(45deg);
width: 300px;
height: 300px;
border-radius: 50%;
-webkit-animation: spin 5s infinite linear;
animation: spin 5s infinite linear;
}
.yin-yang:before {
content: "";
position: absolute;
bottom: 0%;
left: 50%;
-webkit-transform: translate(-50%, 0%);
transform: translate(-50%, 0%);
width: 30px;
height: 30px;
border-radius: 50%;
box-shadow: 0px 0px 1px #000;
background: #fff;
border: 60px solid #000;
}
.yin-yang:after {
content: "";
position: absolute;
top: 0%;
left: 50%;
-webkit-transform: translate(-50%, 0%);
transform: translate(-50%, 0%);
width: 30px;
height: 30px;
border-radius: 50%;
box-shadow: 0px 0px 1px #fff;
background: #000;
border: 60px solid #fff;
}
.yin {
float: right;
width: 150px;
height: 300px;
background: #000;
border-radius: 0 360px 360px 0;
}
.yang {
float: left;
width: 150px;
height: 300px;
background: #fff;
border-radius: 360px 0 0 360px;
}
.container {
position: absolute;
z-index: 1;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%) perspective( 600px) rotateX(45deg);
transform: translate(-50%, -50%) perspective( 600px) rotateX(45deg);
width: 300px;
height: 300px;
background: #666;
box-shadow: 0 24px 0 -0.65vh #1a1a1a;
border: 12px solid #595959;
border-radius: 50%;
}
.glossy {
position: absolute;
z-index: 3;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%) perspective( 600px) rotateX(45deg);
transform: translate(-50%, -50%) perspective( 600px) rotateX(45deg);
width: 324px;
height: 324px;
background: -webkit-linear-gradient(339deg, rgba(0, 0, 0, 0.1) 50%, rgba(255, 255, 255, 0.5) 100%);
background: linear-gradient(111deg, rgba(0, 0, 0, 0.1) 50%, rgba(255, 255, 255, 0.5) 100%);
border-radius: 50%;
}
@-webkit-keyframes spin {
from {
-webkit-transform: translate(-50%, -50%) perspective( 600px) rotateX(45deg) rotate(0deg);
transform: translate(-50%, -50%) perspective( 600px) rotateX(45deg) rotate(0deg);
}
to {
-webkit-transform: translate(-50%, -50%) perspective( 600px) rotateX(45deg) rotate(360deg);
transform: translate(-50%, -50%) perspective( 600px) rotateX(45deg) rotate(360deg);
}
}
@keyframes spin {
from {
-webkit-transform: translate(-50%, -50%) perspective( 600px) rotateX(45deg) rotate(0deg);
transform: translate(-50%, -50%) perspective( 600px) rotateX(45deg) rotate(0deg);
}
to {
-webkit-transform: translate(-50%, -50%) perspective( 600px) rotateX(45deg) rotate(360deg);
transform: translate(-50%, -50%) perspective( 600px) rotateX(45deg) rotate(360deg);
}
}
