使用Trianglify.js实现的三角形网孔（低多边形）球

Low Poly Balls with Trianglify.js，含球体阴影和弹跳动画。

CANVAS, sphere

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

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

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

body {
    text-align: center;
    padding: 4em;
}
canvas {
    width: 100px;
    height: 100px;
    margin: 20px;
    display: inline-block;
    border-radius: 50%;
    box-shadow: 10px 200px 40px rgba(0, 0, 0, 0.1);
    -webkit-transition: ease-in-out all 0.3s;
    transition: ease-in-out all 0.3s;
    -webkit-animation: ease stream 1s infinite alternate;
    animation: ease stream 1s infinite alternate;
}
canvas:hover {
    -webkit-transform: translateY(125px);
    transform: translateY(125px);
}
canvas:nth-child(1) {
    -webkit-animation-delay: 0.2s;
    animation-delay: 0.2s;
}
canvas:nth-child(2) {
    -webkit-animation-delay: 0.4s;
    animation-delay: 0.4s;
}
canvas:nth-child(3) {
    -webkit-animation-delay: 0.6s;
    animation-delay: 0.6s;
}
canvas:nth-child(4) {
    -webkit-animation-delay: 0.8s;
    animation-delay: 0.8s;
}
h1 {
    text-align: center;
    margin-bottom: 2em;
    font-size: 2em;
    font-family: Arial, sans-serif;
}
@-webkit-keyframes stream {
    from {
        -webkit-transform: translateY(0px);
        transform: translateY(0px);
        box-shadow: 10px 200px 40px rgba(0, 0, 0, 0.1);
    }
    to {
        -webkit-transform: translateY(120px);
        transform: translateY(120px);
        box-shadow: 10px 20px 40px rgba(0, 0, 0, 0.3);
    }
}
@keyframes stream {
    from {
        -webkit-transform: translateY(0px);
        transform: translateY(0px);
        box-shadow: 10px 200px 40px rgba(0, 0, 0, 0.1);
    }
    to {
        -webkit-transform: translateY(120px);
        transform: translateY(120px);
        box-shadow: 10px 20px 40px rgba(0, 0, 0, 0.3);
    }
}

HTML

Low Poly Balls with Trianglify.js，含球体阴影和弹跳动画。

CANVAS, sphere

编辑器支持Emmet

快捷键

Low Poly Balls with Trianglify.js，含球体阴影和弹跳动画。

CANVAS, sphere

WebGL Three.js浑浊的球体 | GLSL光线行进（raymarching）着色器代码演示

使用svg filter和canvas实现的图像碎片化特效

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：