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

yin-yang animation in pure css 中国风的一个作品。 2016年度候选作品。

css3, 太极

《aframe.js 3d拼图代码详解》作品已被踏得网收录！

第三方库
作品简介 3972
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

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

HTML

yin-yang animation in pure css 中国风的一个作品。 2016年度候选作品。

css3, 太极

编辑器支持Emmet

快捷键

yin-yang animation in pure css 中国风的一个作品。 2016年度候选作品。

css3, 太极

CSS3 黑白阴阳太极式的Loading动效

CSS3 沙滩上的一天（伞影子随时间旋转）动画

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：