追求完美-BLOG

告白气球：让页面浪漫起来

Sun, 17 May 2026 20:03:56 +0800

在关注的公众号里发现一段挺可爱的源码，效果正如你进入这篇文章时看到的，屏幕上飘满了小气球。

至于这玩意有啥用，其实我也没想好。不过，有几个初步的想法：

生日小惊喜：在博主的生日那天，让气球飘满屏幕，营造出温馨而欢乐的生日氛围。

博友纪念日：记录下每位博友的首次评论时间，当在第 365 天再次访问时，用一场气球雨，再配些许文案，作为周年惊喜。

互动小体验：或许还可以根据用户的某些操作来触发气球雨，增加用户与网站的互动。

还有哪些可玩的花样呢？

最后，话不多说，送上代码：

<script>
(function() {
    'use strict';
    var __assign = function() {
        __assign = Object.assign ||
        function __assign(t) {
            for (var s, i = 1,
            n = arguments.length; i < n; i++) {
                s = arguments[i];
                for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
            }
            return t;
        };
        return __assign.apply(this, arguments);
    };
    typeof SuppressedError === "function" ? SuppressedError: function(error, suppressed, message) {
        var e = new Error(message);
        return e.name = "SuppressedError",
        e.error = error,
        e.suppressed = suppressed,
        e;
    };
    var defaultBalloonColor = "#84A332";
    var defaultLightColor = "#C0F381";
    var balloonColorProperty = "--balloon-color";
    var lightColorProperty = "--light-color";
    var widthProperty = "--balloon-width";
    var heightProperty = "--balloon-height";
    var balloonDefaultSize = {
        width: 233,
        height: 609,
    };
    var createBallonElement = function(_a) {
        var balloonColor = _a.balloonColor,
        lightColor = _a.lightColor,
        width = _a.width;
        var balloon = document.createElement("balloon");
        balloon.innerHTML = balloonSvgHTML;
        Object.assign(balloon.style, {
            position: "absolute",
            overflow: "hidden",
            top: "0",
            left: "0",
            display: "inline-block",
            isolation: "isolate",
            transformStyle: "preserve-3d",
            backfaceVisibility: "hidden",
            opacity: "0.001",
            transform: "translate(calc(-100% + 1px), calc(-100% + 1px))",
            contain: "style, layout, paint",
            transformOrigin: "".concat(width / 2, "px ").concat(width / 2, "px"),
            willChange: "transform",
        });
        balloon.style.setProperty(balloonColorProperty, balloonColor);
        balloon.style.setProperty(lightColorProperty, lightColor);
        balloon.style.setProperty(widthProperty, width + "px");
        balloon.style.setProperty(heightProperty, (width * 609) / 223 + "px");
        return balloon;
    };
    var balloonSvgHTML = "\n<svg\n\nstyle=\"width: var(".concat(widthProperty, "); height: var(").concat(heightProperty, ");\"\nviewBox=\"0 0 223 609\"\nfill=\"none\"\nxmlns=\"http://www.w3.org/2000/svg\"\n>\n<g opacity=\"0.8\" filter=\"url(#filter0_f_102_49)\" >\n  <path\n    d=\"M117.5 253C136.167 294.5 134.7 395 125.5 453C116.3 511 133.833 578.167 125.5 606\"\n    stroke=\"url(#paint0_linear_102_49)\"\n    stroke-width=\"2\"\n  />\n</g>\n<g opacity=\"0.85\" filter=\"url(#filter1_ii_102_49)\">\n  <path\n    fill-rule=\"evenodd\"\n    clip-rule=\"evenodd\"\n    d=\"M176.876 204.032C181.934 198.064 209.694 160.262 210.899 127.619C213.023 70.1236 176.876 13 118.337 13C55.7949 13 18.5828 69.332 22.2724 127.619C24.0956 156.423 38.9766 178.5 51.7922 195.372C57.7811 203.257 90.0671 238.749 112.15 245.044C111.698 248.246 112.044 253.284 116.338 254H121.838V245.71C143.277 242.292 172.085 209.686 176.876 204.032Z\"\n    fill=\"var(").concat(balloonColorProperty, ", ").concat(defaultBalloonColor, ")\"\n  />\n</g>\n<g filter=\"url(#filter2_f_102_49)\">\n  <path\n    d=\"M125 256.5C125 258.433 122.09 260 118.5 260C114.91 260 112 258.433 112 256.5C112 254.567 114.91 255 118.5 255C122.09 255 125 254.567 125 256.5Z\"\n    fill=\"var(").concat(balloonColorProperty, ", ").concat(defaultBalloonColor, ")\"\n  />\n</g>\n<g opacity=\"0.2\" filter=\"url(#filter3_f_102_49)\">\n  <path\n    d=\"M178.928 128.12C178.011 152.146 172.137 162.97 154.623 184.2C141.594 199.992 128.28 215 112.805 215C104.349 215 92.739 215 65.2673 177.844C56.1123 165.461 45.4818 149.259 44.1794 128.12C41.5436 85.3424 68.1267 44 112.805 44C154.623 44 180.55 85.6242 178.928 128.12Z\"\n    fill=\"url(#paint1_radial_102_49)\"\n  />\n</g>\n<g\n  style=\"mix-blend-mode: lighten\"\n  opacity=\"0.7\"\n  filter=\"url(#filter4_df_102_49)\"\n>\n  <path\n    d=\"M72.7992 108.638L74.0985 87.5247C74.3145 84.0152 77.4883 81.4427 80.9664 81.958L94.8619 84.0166C98.4018 84.541 100.699 88.0277 99.7828 91.4871L94.0502 113.144C93.1964 116.369 89.8758 118.278 86.659 117.394L77.1969 114.792C74.4599 114.039 72.6249 111.471 72.7992 108.638Z\"\n    fill=\"var(").concat(lightColorProperty, ", ").concat(defaultLightColor, ")\"\n  />\n</g>\n<g\n  style=\"mix-blend-mode: lighten\"\n  opacity=\"0.5\"\n  filter=\"url(#filter5_f_102_49)\"\n>\n  <path\n    d=\"M147.76 88.7366L144.842 67.9855C144.378 64.687 141.316 62.3976 138.021 62.8858L123.638 65.0166C120.098 65.541 117.801 69.0277 118.717 72.4871L124.462 94.1891C125.311 97.3967 128.602 99.3061 131.808 98.4512L143.364 95.3695C146.296 94.5878 148.182 91.7409 147.76 88.7366Z\"\n    fill=\"var(").concat(lightColorProperty, ", ").concat(defaultLightColor, ")\"\n  />\n</g>\n<g style=\"mix-blend-mode: lighten\" filter=\"url(#filter6_f_102_49)\">\n  <path\n    d=\"M46.4087 131.164C38.1642 111.726 43.2454 91.2599 47.4381 82.0988C47.7504 81.4164 48.5574 80.8601 48.8712 81.5418C48.9711 81.7589 48.9188 82.1169 48.8357 82.3409C41.2341 102.832 45.5154 122.958 47.3397 130.925C47.8434 133.124 47.2898 133.242 46.4087 131.164Z\"\n    fill=\"var(").concat(lightColorProperty, ", ").concat(defaultLightColor, ")\"\n  />\n</g>\n<g style=\"mix-blend-mode: lighten\" filter=\"url(#filter7_f_102_49)\">\n  <path\n    d=\"M46.4087 131.164C38.1642 111.726 43.2454 91.2599 47.4381 82.0988C47.7504 81.4164 48.5574 80.8601 48.8712 81.5418C48.9711 81.7589 48.9188 82.1169 48.8357 82.3409C41.2341 102.832 45.5154 122.958 47.3397 130.925C47.8434 133.124 47.2898 133.242 46.4087 131.164Z\"\n    fill=\"var(").concat(lightColorProperty, ", ").concat(defaultLightColor, ")\"\n  />\n</g>\n<g opacity=\"0.3\">\n  <g style=\"mix-blend-mode: lighten\" filter=\"url(#filter8_f_102_49)\">\n    <path\n      d=\"M190.817 150.078C196.906 136.754 196.503 119.258 195.396 111.05C195.318 110.475 194.888 109.925 194.734 110.403C194.704 110.495 194.689 110.697 194.699 110.807C196.396 129.344 191.942 144.593 190.447 149.824C190.122 150.959 190.349 151.104 190.817 150.078Z\"\n      fill=\"var(").concat(lightColorProperty, ", ").concat(defaultLightColor, ")\"\n    />\n  </g>\n  <g style=\"mix-blend-mode: lighten\" filter=\"url(#filter9_f_102_49)\">\n    <path\n      d=\"M190.817 150.078C196.906 136.754 196.503 119.258 195.396 111.05C195.318 110.475 194.888 109.925 194.734 110.403C194.704 110.495 194.689 110.697 194.699 110.807C196.396 129.344 191.942 144.593 190.447 149.824C190.122 150.959 190.349 151.104 190.817 150.078Z\"\n      fill=\"var(").concat(lightColorProperty, ", ").concat(defaultLightColor, ")\"\n    />\n  </g>\n</g>\n</svg>\n");
    var svgFiltersHtml = "\n<svg>\n  <defs>\n    <filter\n      id=\"filter0_f_102_49\"\n      x=\"114.588\"\n      y=\"250.59\"\n      width=\"20.5082\"\n      height=\"357.697\"\n      filterUnits=\"userSpaceOnUse\"\n      color-interpolation-filters=\"sRGB\"\n    >\n      <feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\" />\n      <feBlend\n        mode=\"normal\"\n        in=\"SourceGraphic\"\n        in2=\"BackgroundImageFix\"\n        result=\"shape\"\n      />\n      <feGaussianBlur\n        stdDeviation=\"1\"\n        result=\"effect1_foregroundBlur_102_49\"\n      />\n    </filter>\n    <filter\n      id=\"filter1_ii_102_49\"\n      x=\"22.0213\"\n      y=\"13\"\n      width=\"188.967\"\n      height=\"241\"\n      filterUnits=\"userSpaceOnUse\"\n      color-interpolation-filters=\"sRGB\"\n    >\n      <feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\" />\n      <feBlend\n        mode=\"normal\"\n        in=\"SourceGraphic\"\n        in2=\"BackgroundImageFix\"\n        result=\"shape\"\n      />\n      <feColorMatrix\n        in=\"SourceAlpha\"\n        type=\"matrix\"\n        values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\"\n        result=\"hardAlpha\"\n      />\n      <feOffset />\n      <feGaussianBlur stdDeviation=\"4.5\" />\n      <feComposite in2=\"hardAlpha\" operator=\"arithmetic\" k2=\"-1\" k3=\"1\" />\n      <feColorMatrix\n        type=\"matrix\"\n        values=\"0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.4 0\"\n      />\n      <feBlend\n        mode=\"normal\"\n        in2=\"shape\"\n        result=\"effect1_innerShadow_102_49\"\n      />\n      <feColorMatrix\n        in=\"SourceAlpha\"\n        type=\"matrix\"\n        values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\"\n        result=\"hardAlpha\"\n      />\n      <feOffset />\n      <feGaussianBlur stdDeviation=\"18\" />\n      <feComposite in2=\"hardAlpha\" operator=\"arithmetic\" k2=\"-1\" k3=\"1\" />\n      <feColorMatrix\n        type=\"matrix\"\n        values=\"0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0\"\n      />\n      <feBlend\n        mode=\"overlay\"\n        in2=\"effect1_innerShadow_102_49\"\n        result=\"effect2_innerShadow_102_49\"\n      />\n    </filter>\n    <filter\n      id=\"filter2_f_102_49\"\n      x=\"111\"\n      y=\"253.959\"\n      width=\"15\"\n      height=\"7.04138\"\n      filterUnits=\"userSpaceOnUse\"\n      color-interpolation-filters=\"sRGB\"\n    >\n      <feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\" />\n      <feBlend\n        mode=\"normal\"\n        in=\"SourceGraphic\"\n        in2=\"BackgroundImageFix\"\n        result=\"shape\"\n      />\n      <feGaussianBlur\n        stdDeviation=\"0.5\"\n        result=\"effect1_foregroundBlur_102_49\"\n      />\n    </filter>\n    <filter\n      id=\"filter3_f_102_49\"\n      x=\"0\"\n      y=\"0\"\n      width=\"223\"\n      height=\"259\"\n      filterUnits=\"userSpaceOnUse\"\n      color-interpolation-filters=\"sRGB\"\n    >\n      <feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\" />\n      <feBlend\n        mode=\"normal\"\n        in=\"SourceGraphic\"\n        in2=\"BackgroundImageFix\"\n        result=\"shape\"\n      />\n      <feGaussianBlur\n        stdDeviation=\"22\"\n        result=\"effect1_foregroundBlur_102_49\"\n      />\n    </filter>\n    <filter\n      id=\"filter4_df_102_49\"\n      x=\"46.7878\"\n      y=\"59.8922\"\n      width=\"79.1969\"\n      height=\"87.7179\"\n      filterUnits=\"userSpaceOnUse\"\n      color-interpolation-filters=\"sRGB\"\n    >\n      <feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\" />\n      <feColorMatrix\n        in=\"SourceAlpha\"\n        type=\"matrix\"\n        values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\"\n        result=\"hardAlpha\"\n      />\n      <feOffset dy=\"4\" />\n      <feGaussianBlur stdDeviation=\"13\" />\n      <feComposite in2=\"hardAlpha\" operator=\"out\" />\n      <feColorMatrix\n        type=\"matrix\"\n        values=\"0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.8 0\"\n      />\n      <feBlend\n        mode=\"overlay\"\n        in2=\"BackgroundImageFix\"\n        result=\"effect1_dropShadow_102_49\"\n      />\n      <feBlend\n        mode=\"normal\"\n        in=\"SourceGraphic\"\n        in2=\"effect1_dropShadow_102_49\"\n        result=\"shape\"\n      />\n      <feGaussianBlur\n        stdDeviation=\"5.5\"\n        result=\"effect2_foregroundBlur_102_49\"\n      />\n    </filter>\n    <filter\n      id=\"filter5_f_102_49\"\n      x=\"102.515\"\n      y=\"46.8202\"\n      width=\"61.3035\"\n      height=\"67.8351\"\n      filterUnits=\"userSpaceOnUse\"\n      color-interpolation-filters=\"sRGB\"\n    >\n      <feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\" />\n      <feBlend\n        mode=\"normal\"\n        in=\"SourceGraphic\"\n        in2=\"BackgroundImageFix\"\n        result=\"shape\"\n      />\n      <feGaussianBlur\n        stdDeviation=\"8\"\n        result=\"effect1_foregroundBlur_102_49\"\n      />\n    </filter>\n    <filter\n      id=\"filter6_f_102_49\"\n      x=\"34\"\n      y=\"73.2313\"\n      width=\"22.9258\"\n      height=\"67.4198\"\n      filterUnits=\"userSpaceOnUse\"\n      color-interpolation-filters=\"sRGB\"\n    >\n      <feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\" />\n      <feBlend\n        mode=\"normal\"\n        in=\"SourceGraphic\"\n        in2=\"BackgroundImageFix\"\n        result=\"shape\"\n      />\n      <feGaussianBlur\n        stdDeviation=\"4\"\n        result=\"effect1_foregroundBlur_102_49\"\n      />\n    </filter>\n    <filter\n      id=\"filter7_f_102_49\"\n      x=\"40\"\n      y=\"79.2313\"\n      width=\"10.9258\"\n      height=\"55.4198\"\n      filterUnits=\"userSpaceOnUse\"\n      color-interpolation-filters=\"sRGB\"\n    >\n      <feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\" />\n      <feBlend\n        mode=\"normal\"\n        in=\"SourceGraphic\"\n        in2=\"BackgroundImageFix\"\n        result=\"shape\"\n      />\n      <feGaussianBlur\n        stdDeviation=\"1\"\n        result=\"effect1_foregroundBlur_102_49\"\n      />\n    </filter>\n    <filter\n      id=\"filter8_f_102_49\"\n      x=\"186.419\"\n      y=\"106.345\"\n      width=\"13.5106\"\n      height=\"48.2987\"\n      filterUnits=\"userSpaceOnUse\"\n      color-interpolation-filters=\"sRGB\"\n    >\n      <feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\" />\n      <feBlend\n        mode=\"normal\"\n        in=\"SourceGraphic\"\n        in2=\"BackgroundImageFix\"\n        result=\"shape\"\n      />\n      <feGaussianBlur\n        stdDeviation=\"1.93775\"\n        result=\"effect1_foregroundBlur_102_49\"\n      />\n    </filter>\n    <filter\n      id=\"filter9_f_102_49\"\n      x=\"189.326\"\n      y=\"109.252\"\n      width=\"7.69731\"\n      height=\"42.4855\"\n      filterUnits=\"userSpaceOnUse\"\n      color-interpolation-filters=\"sRGB\"\n    >\n      <feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\" />\n      <feBlend\n        mode=\"normal\"\n        in=\"SourceGraphic\"\n        in2=\"BackgroundImageFix\"\n        result=\"shape\"\n      />\n      <feGaussianBlur\n        stdDeviation=\"0.484439\"\n        result=\"effect1_foregroundBlur_102_49\"\n      />\n    </filter>\n    <linearGradient\n      id=\"paint0_linear_102_49\"\n      x1=\"124.798\"\n      y1=\"253\"\n      x2=\"124.798\"\n      y2=\"606\"\n      gradientUnits=\"userSpaceOnUse\"\n    >\n      <stop stop-color=\"white\" />\n      <stop offset=\"0.474934\" stop-color=\"grey\" stop-opacity=\"0.1\" />\n      <stop offset=\"0.722707\" stop-color=\"white\" stop-opacity=\"0.6\" />\n      <stop offset=\"0.93469\" stop-color=\"grey\" stop-opacity=\"0.7\" />\n      <stop offset=\"1\" stop-color=\"white\" stop-opacity=\"0\" />\n    </linearGradient>\n    <radialGradient\n      id=\"paint1_radial_102_49\"\n      cx=\"0\"\n      cy=\"0\"\n      r=\"1\"\n      gradientUnits=\"userSpaceOnUse\"\n      gradientTransform=\"translate(134 149.5) rotate(-123.69) scale(82.9277 65.4692)\"\n    >\n      <stop />\n      <stop offset=\"1\" stop-opacity=\"0\" />\n    </radialGradient>\n  </defs>\n</svg>\n";
    var easings = ["cubic-bezier(0.22, 1, 0.36, 1)", "cubic-bezier(0.33, 1, 0.68, 1)", ];
    var colorPairs = [["#ffec37ee", "#f8b13dff"], ["#f89640ee", "#c03940ff"], ["#3bc0f0ee", "#0075bcff"], ["#b0cb47ee", "#3d954bff"], ["#cf85b8ee", "#a3509dff"], ];
    function createBalloonAnimation(_a) {
        var balloon = _a.balloon,
        x = _a.x,
        y = _a.y,
        z = _a.z,
        targetX = _a.targetX,
        targetY = _a.targetY,
        targetZ = _a.targetZ,
        zIndex = _a.zIndex;
        balloon.style.zIndex = zIndex.toString();
        balloon.style.filter = "blur(".concat(zIndex > 7 ? 8 : 0, "px)");
        var getAnimation = function() {
            var tiltAngle = Math.random() * (15 - 8) + 8;
            var tiltDirection = Math.random() < 0.5 ? 1 : -1;
            return balloon.animate([{
                transform: "translate(-50%, 0%) translate3d(".concat(x, "px, ").concat(y, "px, ").concat(z, "px) rotate3d(0, 0, 1, ").concat(tiltDirection * -tiltAngle, "deg)"),
                opacity: 1,
            },
            {
                transform: "translate(-50%, 0%) translate3d(".concat(x + (targetX - x) / 2, "px, ").concat(y + (y + targetY * 5 - y) / 2, "px, ").concat(z + (targetZ - z) / 2, "px) rotate3d(0, 0, 1, ").concat(tiltDirection * tiltAngle, "deg)"),
                opacity: 1,
                offset: 0.5,
            },
            {
                transform: "translate(-50%, 0%) translate3d(".concat(targetX, "px, ").concat(y + targetY * 5, "px, ").concat(targetZ, "px) rotate3d(0, 0, 1, ").concat(tiltDirection * -tiltAngle, "deg)"),
                opacity: 1,
            },
            ], {
                duration: (Math.random() * 1000 + 5000) * 5,
                easing: easings[Math.floor(Math.random() * easings.length)],
                delay: zIndex * 200,
            });
        };
        return {
            balloon: balloon,
            getAnimation: getAnimation
        };
    }
    function balloons() {
        return new Promise(function(resolve) {
            var balloonsContainer = document.createElement("balloons");
            Object.assign(balloonsContainer.style, {
                overflow: "hidden",
                position: "fixed",
                inset: "0",
                zIndex: "999",
                display: "inline-block",
                pointerEvents: "none",
                perspective: "1500px",
                perspectiveOrigin: "50vw 100vh",
                contain: "style, layout, paint",
            });
            document.documentElement.appendChild(balloonsContainer);
            var sceneSize = {
                width: window.innerWidth,
                height: window.innerHeight
            };
            var balloonHeight = Math.floor(Math.min(sceneSize.width, sceneSize.height) * 1);
            var balloonWidth = (balloonDefaultSize.width / balloonDefaultSize.height) * balloonHeight;
            var amount = Math.max(7, Math.round(window.innerWidth / (balloonWidth / 2)));
            var maxDist = Math.max((amount * balloonWidth) / 2, (balloonWidth / 2) * 10);
            var balloonPositions = [];
            for (var i = 0; i < amount; i++) {
                var x = Math.round(sceneSize.width * Math.random());
                var y = window.innerHeight;
                var z = Math.round( - 1 * (Math.random() * maxDist));
                var targetX = Math.round(x + Math.random() * balloonWidth * 6 * (Math.random() > 0.5 ? 1 : -1));
                var targetY = -window.innerHeight;
                var targetZ = z;
                balloonPositions.push({
                    x: x,
                    y: y,
                    z: z,
                    targetX: targetX,
                    targetY: targetY,
                    targetZ: targetZ,
                });
            }
            balloonPositions = balloonPositions.sort(function(a, b) {
                return a.z - b.z;
            });
            var closestBallonPosition = balloonPositions[balloonPositions.length - 1];
            balloonPositions[0];
            balloonPositions = balloonPositions.map(function(pos) {
                return (__assign(__assign({},
                pos), {
                    z: pos.z - closestBallonPosition.z,
                    targetZ: pos.z - closestBallonPosition.z
                }));
            });
            var filtersElement = document.createElement("div");
            filtersElement.innerHTML = svgFiltersHtml;
            balloonsContainer.appendChild(filtersElement);
            var currentZIndex = 1;
            var animations = balloonPositions.map(function(pos, index) {
                var colorPair = colorPairs[index % colorPairs.length];
                var balloon = createBallonElement({
                    balloonColor: colorPair[1],
                    lightColor: colorPair[0],
                    width: balloonWidth,
                });
                balloonsContainer.appendChild(balloon);
                return createBalloonAnimation(__assign(__assign({
                    balloon: balloon
                },
                pos), {
                    zIndex: currentZIndex++
                }));
            });
            requestAnimationFrame(function() {
                var animationPromises = animations.map(function(_a) {
                    var balloon = _a.balloon,
                    getAnimation = _a.getAnimation;
                    var a = getAnimation();
                    return a.finished.then(function() {
                        balloon.remove();
                    });
                });
                Promise.all(animationPromises).then(function() {
                    balloonsContainer.remove();
                    resolve();
                });
            });
        });
    }
    document.addEventListener("DOMContentLoaded",
    function() {
        balloons();
        var button = document.getElementById("releastBalloonsButton");
        button === null || button === void 0 ? void 0 : button.addEventListener("click",
        function() {
            balloons();
        });
    });
})();
</script>

以上代码为原文源代码，需要自行删减修改配合自己页面使用。

代码不复杂，主要就是 SVG 占用的代码量比较大，可以在需要触发时作为文件引入，避免网站代码量过大。

最后，期待各位大佬的创意发挥~

Cloudflare Web Analytics 的 beacon.min.js 加载缓慢的关闭方法

Tue, 31 Mar 2026 10:59:50 +0800

Cloudflare Web Analytics CDN 国内加载缓慢的解决方法.

前言

最近在访问网站的时候发现个别js加载失败, 检查发现原来是 CloudFlare 的 beacon.min.js 加载失败.

卡顿文件：https://static.cloudflareinsights.com/beacon.min.js

随后在网上找了点教程关闭它.

Cloudflare 官方解释:

Tip
Cloudflare Web Analytics功能, 为您的网站提供免费的隐私优先分析, 无需更改 DNS 或使用 Cloudflare 的代理. Cloudflare Web Analytics 可帮助您了解网站访问者体验到的网页性能. 启用 Cloudflare Web Analytics 所需的只是您的页面上的 Cloudflare 帐户和 JavaScript 代码片段, 即可开始获取有关页面浏览量和访问者的信息. JavaScript 代码片段(也称为信标)使用 Performance API 收集指标, 该 API 可在所有主流 Web 浏览器中使用.Web Analytics 支持自适应比特率 (ABR).
Cloudflare 的服务器将根据数据大小、日期范围、网络连接和其他因素为每个图表或表格选择最佳分辨率.有关更多信息, 请参阅解释 Cloudflare 的 ABR Analytics.
Web Analytics 显示的数据为真实用户监控 (RUM), 更多信息请参考真实用户监控.
Cloudflare Web Analytics 不会收集或使用您的访客的个人数据.

关闭步骤

1、选择需要管理的站点。

2、展开高级选项后点击删除即可。

设置完成后等 5 分钟后强制刷新网站, 就没有这个 js 的加载了.

海康DS-7604ZT-K1最新固件4.0版本

Fri, 27 Mar 2026 09:12:03 +0800

这个版本的录像机是采购方的定制机，如果想要升级到最新的4.0固件，在官网上是找不到的。

会提示找购买的销售渠道获取。

找客服人员要了一份，分享给有需要的朋友

可能会导致部分功能丢失，刷机升级有风险，请谨慎操作！

下载地址：

https://cjw123.lanzoue.com/ioW643lnbxqd

密码:cjw123

今天终于把导航的同步功能给完成了

Sat, 14 Mar 2026 14:23:44 +0800

拖了几年，一直提不起兴趣去做一些陈年旧事，因为现在大部分的网友都已经不在电脑上了，也没了更新的动力。

昨天不知道是咋了，去改个失效的链接，弄着弄着就把同步功能一起给做完了！

本文章就是一篇水文，记录一下！导航这一下估计又很久不会去动了！

有使用的朋友可以体验一下，www.cjw123.com 右上角设置或下面设置

二合一收款码 - 物理合并版

Thu, 12 Mar 2026 18:30:06 +0800

UA 判断设备类型跳转支付盛行的时代已经过去，PayQrcode 二合一收款码（物理合并版）区别于传统基于设备 UA 判断的「软件识别版」，本方案通过物理图片合并技术，将微信与支付宝收款码融合为单张图片，实现离线场景下的双码兼容识别。

页面截图

体验地址：https://payqrcode.kuzhan.cc/

技术实现逻辑

支付平台识别特性

微信识别逻辑：采用「从左到右优先识别」策略，且会解析 wxp://xxxx 格式的微信支付链接

支付宝识别逻辑：直接忽略微信支付链接格式，仅识别自身 https://qr.alipay.com/xxx 格式链接，确保正确跳转

二维码处理策略

采用最高容错等级 H（30% 纠错能力），确保局部覆盖后仍可解析

底层架构：以微信收款码作为背景层

提取支付宝收款码核心数据区，删除 3 个定位角点中的无点位角（保留 3 个定位角）

顺时针旋转 180°，破坏微信对支付宝码的定位识别逻辑

层级叠加将处理后的支付宝码放置于微信码的右下角无点位区域，通过像素级融合形成完整二维码

核心优势

纯物理实现无需服务器 / API 支持，生成后可直接打印使用，杜绝网络篡改风险

即生即用一次生成永久有效，适用于静态收款场景（如实体店、地摊、海报等）

多场景通用不仅限于支付场景，支持微信 / 支付宝扫码跳转的通用场景（如官网、表单等）

潜在局限

兼容性限制：仅支持双码合并，暂无法扩展至 3 个及以上码种

抗损能力下降：局部污损（超过 30% 纠错范围）可能导致识别失败，需避免二维码区域遮挡

极端识别问题：极少数情况下微信可能误解析支付宝链接（概率＜ 0.5%），建议配置兜底测试流程

使用注意事项

生成测试流程：生成后使用微信 / 支付宝 APP 分别扫码测试，确保：

微信扫码优先跳转微信支付页面

支付宝扫码正常唤起付款码 / 转账页面

参数调优：建议若出现识别延迟或失败，可尝试调整：

支付宝码在微信码上的覆盖比例（建议初始比例：30%-40% 面积占比）

旋转角度（±10° 微调，寻找最佳识别平衡点）

自建一个打赏站

Wed, 11 Mar 2026 20:39:16 +0800

逛论坛的时候，看到一些网友的站点都有个打赏支持的页面，有的挂着二维码，有的是个单独的站点，对接的是微信或是支付宝，可以直接在线支付！感觉还挺有意思的。

虽然我的站点也有在线收款功能，但看别人有个单独打赏收款的站点心非常痒痒，联系对方站长有意去付费购买源码，都不卖，要么价格高的离谱，在网上找了一圈，一些都是些比较老的，样式也不是自己喜欢的，代码也乱七八糟，没办法，只有自己动手了，反正不会的就问AI。

所以就诞生了这个打赏站！

没有对接微信，因为一年还得需要几百认证费用，回本都难！

演示地址：http://donate.viptu.com/

## 系统简介

基于支付宝当面付（F2F）的打赏/收款系统，支持：

- ✅ 手机端直接跳转支付宝支付

- ✅ PC端扫码支付

- ✅ 打赏记录展示

- ✅ 后台管理系统（支持手动添加微信/QQ等记录）

- ✅ 退款标记功能

## 系统截图

网站维护停运通知源码

Sun, 01 Mar 2026 10:33:17 +0800

一个 HTML 单页网站停运源码，页面简洁美观，自适应手机和电脑端。首页内容在 index 文件里面修改，无后台。

点下面的运行可以查看演示！

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>服务已停止</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <link rel="stylesheet" href="https://fonts.loli.net/css2?family=Noto+Sans+SC:wght@400;500;700&display=swap">
    <style>
        body {
            font-family: 'Noto Sans SC', sans-serif;
            background: linear-gradient(135deg, #1a202c 0%, #2d3748 100%);
            color: #fff;
            min-height: 100vh;
            overflow-x: hidden;
        }
        .container {
            max-width: 800px;
            margin: 0 auto;
            padding: 2rem 1rem;
        }
        .card {
            background: rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(10px);
            border-radius: 1rem;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
            overflow: hidden;
            transition: all 0.5s ease;
        }
        .card:hover {
            transform: translateY(-5px);
            box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4);
        }
        .service-icon {
            position: relative;
            width: 120px;
            height: 120px;
            background: rgba(0, 0, 0, 0.3);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 2rem;
            box-shadow: 0 0 30px rgba(255, 59, 48, 0.5);
        }
        .service-icon::after {
            content: '';
            position: absolute;
            width: 100%;
            height: 100%;
            border-radius: 50%;
            border: 2px solid rgba(255, 59, 48, 0.8);
            animation: pulse 2s infinite;
        }
        @keyframes pulse {
            0% {
                transform: scale(0.95);
                opacity: 0.8;
            }
            70% {
                transform: scale(1.1);
                opacity: 0;
            }
            100% {
                transform: scale(0.95);
                opacity: 0;
            }
        }
        .slide-up {
            animation: slideUp 0.8s ease forwards;
            opacity: 0;
            transform: translateY(30px);
        }
        @keyframes slideUp {
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
        .particle {
            position: absolute;
            border-radius: 50%;
            pointer-events: none;
            background: linear-gradient(135deg, rgba(255,255,255,0.8) 0%, rgba(255,255,255,0.1) 100%);
        }
        .shake {
            animation: shake 0.5s cubic-bezier(.36,.07,.19,.97) both;
        }
        @keyframes shake {
            10%, 90% {transform: translateX(-1px);}
            20%, 80% {transform: translateX(2px);}
            30%, 50%, 70% {transform: translateX(-4px);}
            40%, 60% {transform: translateX(4px);}
        }
        .animate-pulse {
            animation: pulse-fade 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
        }
        @keyframes pulse-fade {
            0%, 100% {opacity: 1;}
            50% {opacity: .5;}
        }
        .badge {
            position: relative;
            display: inline-block;
            padding: 0.25rem 0.75rem;
            border-radius: 9999px;
            font-size: 0.75rem;
            font-weight: 500;
            text-transform: uppercase;
            margin-bottom: 1.5rem;
            background: rgba(255, 59, 48, 0.2);
            border: 1px solid rgba(255, 59, 48, 0.5);
            color: #ff3b30;
        }
        .timeline {
            position: relative;
            padding-left: 2rem;
        }
        .timeline::before {
            content: '';
            position: absolute;
            left: 0;
            top: 6px;
            height: calc(100% - 12px);
            width: 2px;
            background: rgba(156, 163, 175, 0.5);
        }
        .timeline-item {
            position: relative;
            padding-bottom: 1.5rem;
        }
        .timeline-item:last-child {
            padding-bottom: 0;
        }
        .timeline-dot {
            position: absolute;
            left: -2rem;
            top: 0.25rem;
            width: 1rem;
            height: 1rem;
            border-radius: 50%;
            background: #4f46e5;
            border: 2px solid #fff;
            box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.3);
        }
        .service-status-badge {
            display: inline-flex;
            align-items: center;
            padding: 0.5rem 1rem;
            border-radius: 9999px;
            background: rgba(255, 59, 48, 0.2);
            border: 1px solid rgba(255, 59, 48, 0.5);
            color: #ff3b30;
            font-weight: 500;
            margin-bottom: 1.5rem;
        }
        .status-pulse {
            width: 10px;
            height: 10px;
            background-color: #ff3b30;
            border-radius: 50%;
            margin-right: 0.5rem;
            position: relative;
        }
        .status-pulse::after {
            content: '';
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            border-radius: 50%;
            background-color: rgba(255, 59, 48, 0.5);
            animation: status-ping 1.5s cubic-bezier(0, 0, 0.2, 1) infinite;
        }
        @keyframes status-ping {
            75%, 100% {
                transform: scale(2);
                opacity: 0;
            }
        }
        .service-feature {
            display: flex;
            align-items: flex-start;
            margin-bottom: 1rem;
        }
        .feature-icon {
            width: 2.5rem;
            height: 2.5rem;
            border-radius: 50%;
            background: rgba(79, 70, 229, 0.2);
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 1rem;
            flex-shrink: 0;
            color: #818cf8;
        }
    </style>
</head>
<body>
    <div class="container mx-auto px-4 py-8">
        <div class="card p-6 md:p-8 slide-up" style="animation-delay: 0.1s;">
            <div>
                <h1 class="text-3xl md:text-4xl font-bold mb-2 bg-gradient-to-r from-red-400 to-pink-600 bg-clip-text text-transparent">服务已停止</h1>
                <p class="text-gray-300 mb-6">感谢您一直以来的支持与信任</p>
                
                <div>
                    <span></span>
                    服务已永久关闭
                </div>
                
                <div>
                    <i class="fas fa-power-off text-5xl text-red-500"></i>
                </div>
                
                <div class="bg-gray-800 bg-opacity-50 rounded-lg p-5 mb-6 max-w-2xl mx-auto">
                    <h2 class="text-xl font-bold mb-3 text-yellow-300">
                        <i class="fas fa-exclamation-triangle mr-2"></i>重要通知
                    </h2>
                    <p class="text-gray-300 mb-4">
                        我们非常遗憾地通知您，本服务已于 <span class="font-semibold text-red-400">2026年02月10日</span> 永久停止运营。
                    </p>
                    <p>
                        请注意，所有账户数据将按照我们的数据处理规定进行安全处理。如您需要导出个人数据，请在 <span class="font-semibold text-yellow-300">30天内</span> 通过下方联系方式与我们联系。
                    </p>
                </div>
                <div class="timeline mx-auto text-left max-w-lg mb-6">
                    <h3 class="font-bold text-xl mb-4 text-center text-purple-300">服务关闭时间线</h3>
                    <div>
                        <div></div>
                        <div class="font-medium text-purple-300">2026-01-01</div>
                        <div>服务关闭预告公告</div>
                    </div>
                    <div>
                        <div></div>
                        <div class="font-medium text-purple-300">2026-02-10</div>
                        <div>服务完全停止</div>
                    </div>
                    <div>
                        <div></div>
                        <div class="font-medium text-purple-300">2026-02-10</div>
                        <div>用户数据删除</div>
                    </div>
                </div>
                
                <div class="grid grid-cols-1 md:grid-cols-2 gap-4 max-w-2xl mx-auto">
                    <div>
                        <div>
                            <i class="fas fa-database"></i>
                        </div>
                        <div>
                            <h3 class="font-medium text-blue-300">数据备份</h3>
                            <p class="text-sm text-gray-400">所有用户可申请个人数据备份导出</p>
                        </div>
                    </div>
                    <div>
                        <div>
                            <i class="fas fa-coins"></i>
                        </div>
                        <div>
                            <h3 class="font-medium text-blue-300">退款申请</h3>
                            <p class="text-sm text-gray-400">未使用的服务将按比例退款</p>
                        </div>
                    </div>
                    <div>
                        <div>
                            <i class="fas fa-headset"></i>
                        </div>
                        <div>
                            <h3 class="font-medium text-blue-300">客户支持</h3>
                            <p class="text-sm text-gray-400">服务关闭后30天内仍可获得支持</p>
                        </div>
                    </div>
                    <div>
                        <div>
                            <i class="fas fa-arrow-right"></i>
                        </div>
                        <div>
                            <h3 class="font-medium text-blue-300">替代服务</h3>
                            <p class="text-sm text-gray-400">我们将提供替代服务推荐</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="card p-6 md:p-8 mt-6 slide-up" style="animation-delay: 0.3s;">
            <h2 class="text-xl font-bold mb-4 flex items-center">
                <i class="fas fa-question-circle mr-2 text-yellow-400"></i>
                常见问题
            </h2>
            <div>
                <div class="p-4 bg-gray-800 bg-opacity-50 rounded-lg">
                    <h3 class="font-medium text-yellow-300 mb-2">我的数据会怎么处理？</h3>
                    <p>所有用户数据将根据隐私政策进行安全处理，您可以联系我们申请导出个人数据。请注意，所有数据将在服务停止30天后被永久删除。</p>
                </div>
                <div class="p-4 bg-gray-800 bg-opacity-50 rounded-lg">
                    <h3 class="font-medium text-yellow-300 mb-2">有替代服务推荐吗？</h3>
                    <p>是的，我们已经准备了相关替代服务推荐清单，将通过邮件发送给已注册用户。您也可以通过下方联系方式向我们索取这份清单。</p>
                </div>
                <div class="p-4 bg-gray-800 bg-opacity-50 rounded-lg">
                    <h3 class="font-medium text-yellow-300 mb-2">如何申请退款？</h3>
                    <p>如您有未消费的会员服务，请通过下方联系方式与我们联系，并提供您的购买凭证，我们将在7个工作日内为您处理退款事宜。</p>
                </div>
                <div class="p-4 bg-gray-800 bg-opacity-50 rounded-lg">
                    <h3 class="font-medium text-yellow-300 mb-2">为什么服务被关闭？</h3>
                    <p>由于业务战略调整和运营成本考虑，我们不得不做出关闭服务的决定。我们对此给您带来的不便深表歉意，并感谢您一直以来的支持。</p>
                </div>
            </div>
        </div>
        <footer class="mt-8 text-center text-gray-400 text-sm slide-up" style="animation-delay: 0.6s;">
            <div class="flex justify-center space-x-4 mb-4">
                <a href="#" class="hover:text-white transition-colors" title="微信">
                    <i class="fab fa-weixin text-xl"></i>
                </a>
                <a href="#" class="hover:text-white transition-colors" title="QQ">
                    <i class="fab fa-qq text-xl"></i>
                </a>
                <a href="#" class="hover:text-white transition-colors" title="微博">
                    <i class="fab fa-weibo text-xl"></i>
                </a>
                <a href="#" class="hover:text-white transition-colors" title="邮箱">
                    <i class="fas fa-envelope text-xl"></i>
                </a>
            </div>
            <p>© 2026 服务停止通知页面 | 技术支持: <a href="https://www.cjw123.com/t" class="text-blue-400 hover:underline">追求完美</a></p>
        </footer>
    </div>
    <script>
        // 粒子效果
        function createParticles() {
            const container = document.body;
            const particleCount = 50;
            
            for (let i = 0; i < particleCount; i++) {
                const size = Math.random() * 5 + 1;
                const particle = document.createElement('div');
                
                particle.classList.add('particle');
                particle.style.width = `${size}px`;
                particle.style.height = `${size}px`;
                particle.style.opacity = Math.random() * 0.5 + 0.1;
                
                // 随机位置
                particle.style.left = `${Math.random() * 100}vw`;
                particle.style.top = `${Math.random() * 100}vh`;
                
                // 添加动画
                particle.style.animation = `moveParticle ${Math.random() * 60 + 30}s linear infinite`;
                
                // 随机漂浮动画
                const keyframes = `
                    @keyframes moveParticle {
                        0% {
                            transform: translate(0, 0);
                        }
                        25% {
                            transform: translate(${Math.random() * 100 - 50}px, ${Math.random() * 100 - 50}px);
                        }
                        50% {
                            transform: translate(${Math.random() * 100 - 50}px, ${Math.random() * 100 - 50}px);
                        }
                        75% {
                            transform: translate(${Math.random() * 100 - 50}px, ${Math.random() * 100 - 50}px);
                        }
                        100% {
                            transform: translate(0, 0);
                        }
                    }
                `;
                
                const styleSheet = document.createElement('style');
                styleSheet.textContent = keyframes;
                document.head.appendChild(styleSheet);
                
                container.appendChild(particle);
            }
        }
        
        // 创建粒子
        window.addEventListener('load', () => {
            createParticles();
            
            // 添加滑动动画
            const elements = document.querySelectorAll('.slide-up');
            elements.forEach(element => {
                element.style.animationPlayState = 'running';
            });
        });
    </script>
</body>
</html>

酷站收藏、网址工具导航程序（付费开源）

Thu, 26 Feb 2026 13:05:12 +0800

这款程序可以进行工具展示和网址导航等等功能，二次开发也非常的简单，学习成本不高。开发环境基于PHP8.2+MYSQL5.6，已经集成傻瓜式安装方式，只要按照提示步骤安装基本都能够成功。

预计售价：999.99，为了和各位网友交一个朋友，我自己砍一个骨折价，只需要“49”。是不是非常的劲爆。可以联系博主进行购买QQ：260418850

好了，下来来一个自己上线做书签用的演示地址：http://nav.kuzhan.cc/

下面是程序的一些截图

分享一个网上看到的对联JS代码

Fri, 06 Feb 2026 22:50:48 +0800

样式截图

演示代码：

点运行即可看到效果

<script src="https://cdn.jsdelivr.net/gh/dongfg/cyber-couplet@master/couplet.js"></script>

代码内容：

将下面代码保存为js格式，再引用到网站即可，或者直接上面的演示链接另存为

(function() {
    // 读取配置：优先使用用户定义的 window.cyberCoupletConfig，否则使用默认值
    const userConfig = window.cyberCoupletConfig || {};
    
    const config = {
        leftText: "零报错 零警告 万事大吉",
        rightText: "少需求 少开会 众生平安",
        topText: "码到成功", 
        color: userConfig.color || "#1a1a1a", // 墨黑色
        bg: userConfig.bg || "#cf2121",    // 中国红
        font: userConfig.font || "'Ma Shan Zheng', 'Kaiti', 'STKaiti', '华文楷体', serif"
    };

    // 移动端不显示
    if (window.innerWidth < 768) return;

    // 注入书法字体
    if (!document.getElementById('font-ma-shan-zheng')) {
        const link = document.createElement('link');
        link.id = 'font-ma-shan-zheng';
        link.href = "https://fonts.googleapis.com/css2?family=Ma+Shan+Zheng&display=swap";
        link.rel = "stylesheet";
        document.head.appendChild(link);
    }

    // 注入样式
    const style = document.createElement('style');
    style.innerHTML = `
        .cyber-couplet {
            position: fixed;
            top: 50%;
            transform: translateY(-50%);
            display: flex;
            align-items: center;
            justify-content: center;
            width: 50px;
            padding: 25px 12px;
            background-color: ${config.bg};
            color: ${config.color};
            font-family: ${config.font};
            font-size: 36px;
            font-weight: 500;
            text-align: center;
            line-height: 1.1;
            border: 1px solid #991a1a;
            box-shadow: 2px 2px 10px rgba(0,0,0,0.4), inset 0 0 15px rgba(0,0,0,0.1);
            z-index: 2147483647;
            writing-mode: vertical-rl;
            user-select: none;
            transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        }
        .cyber-couplet:hover {
            transform: translateY(-50%) scale(1.05);
        }
        .cyber-couplet-left { left: 40px; }
        .cyber-couplet-right { right: 40px; }
        
        .cyber-couplet-top {
            position: fixed;
            top: 25px;
            left: 50%;
            transform: translateX(-50%);
            padding: 10px 45px;
            background-color: ${config.bg};
            color: ${config.color};
            font-family: ${config.font};
            font-size: 32px;
            border: 1px solid #991a1a;
            box-shadow: 0 4px 10px rgba(0,0,0,0.3);
            z-index: 2147483647;
        }

        .couplet-close {
            position: absolute;
            top: -12px;
            right: -12px;
            width: 24px;
            height: 24px;
            background: #1a1a1a;
            color: #fff;
            font-size: 14px;
            line-height: 24px;
            text-align: center;
            border-radius: 50%;
            cursor: pointer;
            writing-mode: horizontal-tb;
            display: none;
            border: 1px solid #fff;
        }
        .cyber-couplet:hover .couplet-close,
        .cyber-couplet-top:hover .couplet-close {
            display: block;
        }
    `;
    document.head.appendChild(style);

    function createCouplet(text, className) {
        if(!text) return;
        const div = document.createElement('div');
        div.className = className;
        div.innerHTML = text;

        const closeBtn = document.createElement('div');
        closeBtn.className = 'couplet-close';
        closeBtn.innerText = '×';
        closeBtn.onclick = (e) => {
            e.stopPropagation();
            document.querySelectorAll('.cyber-couplet, .cyber-couplet-top').forEach(el => el.remove());
        };
        
        div.appendChild(closeBtn);
        document.body.appendChild(div);
    }

    const init = () => {
        if (document.querySelector('.cyber-couplet')) return;
        createCouplet(config.leftText, 'cyber-couplet cyber-couplet-left');
        createCouplet(config.rightText, 'cyber-couplet cyber-couplet-right');
        createCouplet(config.topText, 'cyber-couplet-top');
    };

    if (document.readyState === 'complete' || document.readyState === 'interactive') {
        init();
    } else {
        window.addEventListener('DOMContentLoaded', init);
    }
})();

2026免费GoogleSSL无需翻墙

Fri, 06 Feb 2026 16:13:44 +0800

2026年博主亲测，免费好用的90天Google域名SSL证书注册平台，高效且无需VPN翻墙，支持邮件提醒续期。

https://buruo.cn/这个站使用的就是GoogleSSL证书。

注册登录：使用个人邮箱注册账号，进入控制台，无需实名认证，点击“免费SSL证书”。

证书申请：选择“Google”图标→填写主域名（如example.com）→默认加密类型即可→提交申请。

DNS验证：平台自动生成TXT验证文件，下载后上传至网站根目录，点击验证，通过后证书即时签发。

部署下载：服务器用Nginx的一键部署脚本，虚拟主机直接下载两个PEM格式证书文件，分别用记事本打开后复制到服务商SSL配置位置，注意不要有空行和删改。

提醒设置：点击“证书监控”，添加监控证书有效期，配置和验证邮箱，开启到期邮件通知。

传送门：https://www.luosimao.com/