CSS3+SVG 众多三角形组成的灯泡图形

lightbulb + particles + blending mode，低多边形变色电灯泡。

CSS3, SVG, bulb

《three.js使用多个渐变torus模拟光环光晕》申请公开！

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

HTML
CSS
JavaScript
Result

编译

JavaScript

/* ---- particles.js config ---- */

particlesJS("particles-js", {
    "particles": {
        "number": {
            "value": 380,
            "density": {
                "enable": true,
                "value_area": 800
            }
        },
        "color": {
            "value": "#ffffff"
        },
        "shape": {
            "type": "circle",
            "stroke": {
                "width": 0,
                "color": "#000000"
            },
            "polygon": {
                "nb_sides": 5
            },
            "image": {
                "src": "img/github.svg",
                "width": 100,
                "height": 100
            }
        },
        "opacity": {
            "value": 0.5,
            "random": false,
            "anim": {
                "enable": false,
                "speed": 1,
                "opacity_min": 0.1,
                "sync": false
            }
        },
        "size": {
            "value": 3,
            "random": true,
            "anim": {
                "enable": false,
                "speed": 40,
                "size_min": 0.1,
                "sync": false
            }
        },
        "line_linked": {
            "enable": true,
            "distance": 150,
            "color": "#ffffff",
            "opacity": 0.4,
            "width": 1
        },
        "move": {
            "enable": true,
            "speed": 1,
            "direction": "none",
            "random": false,
            "straight": false,
            "out_mode": "out",
            "bounce": false,
            "attract": {
                "enable": false,
                "rotateX": 600,
                "rotateY": 1200
            }
        }
    },
    "interactivity": {
        "detect_on": "canvas",
        "events": {
            "onhover": {
                "enable": true,
                "mode": "grab"
            },
            "onclick": {
                "enable": true,
                "mode": "push"
            },
            "resize": true
        },
        "modes": {
            "grab": {
                "distance": 140,
                "line_linked": {
                    "opacity": 1
                }
            },
            "bubble": {
                "distance": 400,
                "size": 40,
                "duration": 2,
                "opacity": 8,
                "speed": 3
            },
            "repulse": {
                "distance": 200,
                "duration": 0.4
            },
            "push": {
                "particles_nb": 4
            },
            "remove": {
                "particles_nb": 2
            }
        }
    },
    "retina_detect": true
});

var x = document.querySelectorAll('#Layer_3 polygon');

Array.from(x).map((el) => {
    el.onmouseover = (ev) => {
        let targetEl = ev.target;
        let parentEl = targetEl.parentNode;
        // console.log(targetEl, parentEl.firstElementChild)
        parentEl.replaceChild(targetEl, parentEl.firstElementChild);
    }
})

编译

CSS

@-webkit-keyframes gradientAnimation {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
}
@keyframes gradientAnimation {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
}
body {
    height: 100vh;
    background: #333;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
}
.container {
    position: relative;
    width: 600px;
    height: 500px;
}
canvas {
    display: block;
    vertical-align: bottom;
    position: absolute;
    top: 0px;
    left: 0;
    z-index: 100;
    width: 600px;
    height: 500px;
}
svg {
    width: 600px;
    height: 500px;
    z-index: 200;
    position: absolute;
    top: 0px;
    left: 0;
}
svg#lightbulb {
    z-index: 200;
    mix-blend-mode: multiply;
}
svg#cutout {
    z-index: 300;
    pointer-events: none;
}
svg#cutout path {
    fill: #333;
}
#Layer_3 polygon {
    position: relative;
    opacity: 1;
    -webkit-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
    -webkit-transition: 250ms;
    transition: 250ms;
}
#Layer_3 polygon:hover {
    -webkit-transform: scale(1.5);
    transform: scale(1.5);
    z-index: 1000;
}
#particles-js {
    position: absolute;
    width: 600px;
    height: 500px;
    background: -webkit-linear-gradient(135deg, #b61924, #19ffd8, #daf504, #f504d7, #b61924);
    background: linear-gradient(-45deg, #b61924, #19ffd8, #daf504, #f504d7, #b61924);
    background-size: 1000% 1000%;
    -webkit-animation: gradientAnimation 10000ms ease infinite;
    animation: gradientAnimation 10000ms ease infinite;
}

HTML

lightbulb + particles + blending mode，低多边形变色电灯泡。

CSS3, SVG, bulb

编辑器支持Emmet

快捷键

lightbulb + particles + blending mode，低多边形变色电灯泡。

CSS3, SVG, bulb

CSS3+SVG 漂亮的彩虹色线性艺术图案

CSS3+SVG 图片悬停时圆形轮廓线关闭效果

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：