纯CSS做的DNA式蓝六边形螺旋

blue hex helix candy (pure CSS 3D, WebKit-only)

SVG, CSS3

《three.js如何实现贴图模糊效果 - 使用canvas》申请公开！

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

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

body {
    overflow: hidden;
    margin: 0;
    height: 100vh;
    perspective: 80em;
    background: radial-gradient(#1199ff, #0011aa);
    color: #1b7ef5;
}
polygon {
    fill: currentColor;
    stroke: #fff;
    stroke-width: 3px;
    vector-effect: non-scaling-stroke;
}
div {
    position: absolute;
    transform-style: preserve-3d;
}
.helix {
    top: 50%;
    left: 50%;
}
.col {
    animation: rx 8s linear infinite;
}
.col:nth-child(1) {
    left: -42.625em;
    animation-delay: 0s;
}
.col:nth-child(1) use {
    animation-delay: -0.88s;
}
.col:nth-child(2) {
    left: -39.875em;
    animation-delay: -0.25s;
}
.col:nth-child(2) use {
    animation-delay: -3.68s;
}
.col:nth-child(3) {
    left: -37.125em;
    animation-delay: -0.5s;
}
.col:nth-child(3) use {
    animation-delay: -3.44s;
}
.col:nth-child(4) {
    left: -34.375em;
    animation-delay: -0.75s;
}
.col:nth-child(4) use {
    animation-delay: -7.44s;
}
.col:nth-child(5) {
    left: -31.625em;
    animation-delay: -1s;
}
.col:nth-child(5) use {
    animation-delay: -3.04s;
}
.col:nth-child(6) {
    left: -28.875em;
    animation-delay: -1.25s;
}
.col:nth-child(6) use {
    animation-delay: -6.24s;
}
.col:nth-child(7) {
    left: -26.125em;
    animation-delay: -1.5s;
}
.col:nth-child(7) use {
    animation-delay: -2.48s;
}
.col:nth-child(8) {
    left: -23.375em;
    animation-delay: -1.75s;
}
.col:nth-child(8) use {
    animation-delay: -3.2s;
}
.col:nth-child(9) {
    left: -20.625em;
    animation-delay: -2s;
}
.col:nth-child(9) use {
    animation-delay: -1.6s;
}
.col:nth-child(10) {
    left: -17.875em;
    animation-delay: -2.25s;
}
.col:nth-child(10) use {
    animation-delay: -5.12s;
}
.col:nth-child(11) {
    left: -15.125em;
    animation-delay: -2.5s;
}
.col:nth-child(11) use {
    animation-delay: -1.68s;
}
.col:nth-child(12) {
    left: -12.375em;
    animation-delay: -2.75s;
}
.col:nth-child(12) use {
    animation-delay: -2.48s;
}
.col:nth-child(13) {
    left: -9.625em;
    animation-delay: -3s;
}
.col:nth-child(13) use {
    animation-delay: -3.92s;
}
.col:nth-child(14) {
    left: -6.875em;
    animation-delay: -3.25s;
}
.col:nth-child(14) use {
    animation-delay: -1.04s;
}
.col:nth-child(15) {
    left: -4.125em;
    animation-delay: -3.5s;
}
.col:nth-child(15) use {
    animation-delay: -4.32s;
}
.col:nth-child(16) {
    left: -1.375em;
    animation-delay: -3.75s;
}
.col:nth-child(16) use {
    animation-delay: -7.6s;
}
.col:nth-child(17) {
    left: 1.375em;
    animation-delay: -4s;
}
.col:nth-child(17) use {
    animation-delay: -3.84s;
}
.col:nth-child(18) {
    left: 4.125em;
    animation-delay: -4.25s;
}
.col:nth-child(18) use {
    animation-delay: -7.28s;
}
.col:nth-child(19) {
    left: 6.875em;
    animation-delay: -4.5s;
}
.col:nth-child(19) use {
    animation-delay: -0.24s;
}
.col:nth-child(20) {
    left: 9.625em;
    animation-delay: -4.75s;
}
.col:nth-child(20) use {
    animation-delay: -7.6s;
}
.col:nth-child(21) {
    left: 12.375em;
    animation-delay: -5s;
}
.col:nth-child(21) use {
    animation-delay: -3.36s;
}
.col:nth-child(22) {
    left: 15.125em;
    animation-delay: -5.25s;
}
.col:nth-child(22) use {
    animation-delay: -2.08s;
}
.col:nth-child(23) {
    left: 17.875em;
    animation-delay: -5.5s;
}
.col:nth-child(23) use {
    animation-delay: -4.64s;
}
.col:nth-child(24) {
    left: 20.625em;
    animation-delay: -5.75s;
}
.col:nth-child(24) use {
    animation-delay: -3.92s;
}
.col:nth-child(25) {
    left: 23.375em;
    animation-delay: -6s;
}
.col:nth-child(25) use {
    animation-delay: -3.92s;
}
.col:nth-child(26) {
    left: 26.125em;
    animation-delay: -6.25s;
}
.col:nth-child(26) use {
    animation-delay: -5.76s;
}
.col:nth-child(27) {
    left: 28.875em;
    animation-delay: -6.5s;
}
.col:nth-child(27) use {
    animation-delay: -4.32s;
}
.col:nth-child(28) {
    left: 31.625em;
    animation-delay: -6.75s;
}
.col:nth-child(28) use {
    animation-delay: -4.24s;
}
.col:nth-child(29) {
    left: 34.375em;
    animation-delay: -7s;
}
.col:nth-child(29) use {
    animation-delay: -5.04s;
}
.col:nth-child(30) {
    left: 37.125em;
    animation-delay: -7.25s;
}
.col:nth-child(30) use {
    animation-delay: -6.16s;
}
.col:nth-child(31) {
    left: 39.875em;
    animation-delay: -7.5s;
}
.col:nth-child(31) use {
    animation-delay: -3.52s;
}
.col:nth-child(32) {
    left: 42.625em;
    animation-delay: -7.75s;
}
.col:nth-child(32) use {
    animation-delay: -7.2s;
}
@keyframes rx {
    to {
        transform: rotateX(1turn);
    }
}
.tile {
    animation: inherit;
    animation-direction: reverse;
    -webkit-filter: drop-shadow(1px 1px 1px #000);
    filter: drop-shadow(1px 1px 1px #000);
}
.tile:nth-child(1) {
    top: -9.625em;
}
.tile:nth-child(1) use {
    animation-duration: 2.18s;
}
.tile:nth-child(2) {
    top: -6.875em;
}
.tile:nth-child(2) use {
    animation-duration: 2.26s;
}
.tile:nth-child(3) {
    top: -4.125em;
}
.tile:nth-child(3) use {
    animation-duration: 1.3s;
}
.tile:nth-child(4) {
    top: -1.375em;
}
.tile:nth-child(4) use {
    animation-duration: 4.02s;
}
.tile:nth-child(5) {
    top: 1.375em;
}
.tile:nth-child(5) use {
    animation-duration: 2.26s;
}
.tile:nth-child(6) {
    top: 4.125em;
}
.tile:nth-child(6) use {
    animation-duration: 1.78s;
}
.tile:nth-child(7) {
    top: 6.875em;
}
.tile:nth-child(7) use {
    animation-duration: 4.74s;
}
.tile:nth-child(8) {
    top: 9.625em;
}
.tile:nth-child(8) use {
    animation-duration: 3.62s;
}
.tile svg {
    margin: -1em;
    width: 2em;
    height: 2em;
    animation: inherit;
    animation-name: rz;
}
.tile use {
    animation: c 0s ease-in-out infinite alternate;
}
@keyframes rz {
    to {
        transform: rotate(1turn);
    }
}
@keyframes c {
    to {
        color: #18fefb;
    }
}

HTML

blue hex helix candy (pure CSS 3D, WebKit-only)

SVG, CSS3

编辑器支持Emmet

快捷键

blue hex helix candy (pure CSS 3D, WebKit-only)

SVG, CSS3

GSAP+SVG 有渐变动效的LOADING加载动画

CAVNAS 行星共振画出的漂亮图案

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：