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-width: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"
});