HTML5 云梯状3D螺旋线动画

Helix Animation. 使用animation和animationDelay（每个DIV延时渐变）实现的螺旋动画。

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

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

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

html,
body {
    margin: 0;
    background: #022c4b;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-image: radial-gradient(top, circle cover, #022c4b 0%, #262334 80%);
    overflow: hidden;
}
.helix {
    margin: 40vh -50%;
    width: 200%;
    height: 40vh;
    transform: rotate(30deg);
    transform-style: preserve-3d;
}
.dblHelix {
    perspective: 1000px;
    white-space: nowrap;
}
.dblHelix > div {
    display: inline-block;
    position: relative;
    margin: 0 6px;
    width: 1px;
    height: 30vh;
    box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.2);
    background: #b6b3ff;
    transition: all 1s ease;
}
.dblHelix > div::before,
.dblHelix > div::after {
    position: absolute;
    left: -2px;
    border-radius: 50%;
    width: 12px;
    height: 10px;
    box-shadow: 2px 2px 2px 2px rgba(0, 0, 0, 0.25);
    background: #b8b4fd;
    content: "";
}
.dblHelix > div::before {
    top: -2px;
}
.dblHelix > div::after {
    bottom: -2px;
}
@keyframes rot {
    to {
        transform: rotateX(360deg);
    }
}
@keyframes chngCol {
    to {
        background: #210a76;
    }
}

HTML

Helix Animation. 使用animation和animationDelay（每个DIV延时渐变）实现的螺旋动画。

编辑器支持Emmet

快捷键

Helix Animation. 使用animation和animationDelay（每个DIV延时渐变）实现的螺旋动画。

HTML5 Three.js 3D版本的黎明破晓动画特效

HTML5 Canvas 图片特效 - 3D波动网状纹理映射

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：