css3八卦,CSS3 阴阳八卦（太极）图动画

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);

}

}