SVG+CSS熔岩灯动画特效

Lava Lamp effect

svg, css, goo

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

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

HTML
CSS
JavaScript
Result

编译

JavaScript

jQuery(document).ready(function($) {

function makeBoxes(targetBox, minWidth, minHeight) {
        var i;
        for (i = 1; i <= 100; i++) {
            var delayWiggle = Math.floor((Math.random() * 1000)) + "ms";
            var durationWiggle = Math.floor((Math.random() * 1000) + 2000) + "ms";
            $(targetBox).append('<div class="boxouter" style="animation-delay: ' + delayWiggle + '; animation-duration: ' + durationWiggle + ';"><div class="box box' + i + '"></div></div>');
            var thisBox = ".box" + i;
            var thisbgKolor = generateKolor();
            var thisbgKolor2 = generateKolor();
            var widthHeight = Math.floor(((Math.random() * 120) + minWidth)) + "px";
            var thisStyle = {
                display: "inline-block",
                width: widthHeight,
                height: widthHeight,
                borderRadius: "50%",
                margin: "-5px",
                opacity: "1",
                backgroundImage: "linear-gradient(" + thisbgKolor + "," + thisbgKolor2 + ")",
                backgroundSize: "100% 100%",
                position: "relative",
                animationDelay: Math.floor((Math.random() * 2000)) + "ms",
                animationDuration: Math.floor((Math.random() * 1000) + 8000) + "ms"
            };
            $(thisBox).css(thisStyle);

}
    }
    $("body").css(styles);

makeBoxes("body", 10, 10);
    $("body").append('<div class="container"></div>');
    $(".container").css(contStyles);
    makeBoxes(".container", 10, 10);
});

编译

CSS

HTML

Lava Lamp effect

svg, css, goo

编辑器支持Emmet

快捷键

Lava Lamp effect

svg, css, goo

SVG+CSS3 clip-path 文本特效 - GIF动画背景掩码

使用SVG滤镜实现的熔岩波动画特效

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：