超赞网页动效集锦

1、纯Css3动效边框

https://www.jsdaima.com/Uploads/js/201907/1563974615/index.html

2、蓝色泡泡动效背景

// JavaScript Document
"use strict";
window.bubbly = function (t) {
            var o = t || {},
                e = function () {
                    return Math.random()
                },
                r = o.canvas || document.createElement("canvas"),
                n = r.width,
                a = r.height;
            null === r.parentNode && (r.setAttribute("style", "position:fixed;z-index:-1;left:0;top:0;min-100vw;min-height:100vh;"), n = r.width = window.innerWidth, a = r.height = window.innerHeight, document.body.appendChild(r));
            var i = r.getContext("2d");
            i.shadowColor = o.shadowColor || "#fff",
                i.shadowBlur = o.blur || 4;
            var l = i.createLinearGradient(0, 0, n, a);
            l.addColorStop(0, o.colorStart || "#2AE"),
                l.addColorStop(1, o.colorStop || "#17B");
            for (var h = o.bubbles || Math.floor(.02 * (n + a)), d = [], c = 0; c < h; c++) d.push({
                f: (o.bubbleFunc ||
                    function () {
                        return "hsla(0, 0%, 100%, " + .1 * e() + ")"
                    }).call(),
                x: e() * n,
                y: e() * a,
                r: 4 + e() * n / 50, //控制半径
                a: e() * Math.PI ,
                v: .5 + .5 * e() //控制速度
            }); !
                function t() {
                    if (null === r.parentNode) return cancelAnimationFrame(t); !1 !== o.animate && requestAnimationFrame(t),
                        i.globalCompositeOperation = "source-over",
                        i.fillStyle = l,
                        i.fillRect(0, 0, n, a),
                        i.globalCompositeOperation = o.compose || "lighter",
                        d.forEach(function (t) {
                            i.beginPath(),
                                i.arc(t.x, t.y, t.r, 0, 2 * Math.PI),
                                i.fillStyle = t.f,
                                i.fill(),
                                t.x += Math.cos(t.a) * t.v,
                                t.y += Math.sin(t.a) * t.v,
                                t.x - t.r > n && (t.x = -t.r),
                                t.x + t.r < 0 && (t.x = n + t.r),
                                t.y - t.r > a && (t.y = -t.r),
                                t.y + t.r < 0 && (t.y = a + t.r)
                        })
                }()
        };
bubbly(
    {
                    colorStart: "#04246f",
                    colorStop: "#032775"
    });