博客园背景特效

特效一：无规则动态线

页脚 HTML 代码

<!-- 背景动画 color：自定义颜色；opacity：调节透明度；count：调节线性数量-->
<script type="text/javascript" color="255,87,34" opacity='0.3' zIndex="1" count="111" src="https://files.cnblogs.com/files/yzl0/canvas-nest.js"></script>

特效二：鼠标左键点击出现爱心

页脚 HTML 代码

<!-- 爱心特效 -->
<script type="text/javascript">
    (function (window, document, undefined) {
        let hearts = [];
        window.requestAnimationFrame = (function () {
            return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame ||
                function (callback) {
                    setTimeout(callback, 1000);
                }
        })();
        init();

        function init() {
            cssFun(".heart{width: 10px;height: 10px;position: fixed;background: #f00;transform: rotate(45deg);-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);}.heart:after,.heart:before{content: '';width: inherit;height: inherit;background: inherit;border-radius: 50%;-webkit-border-radius: 50%;-moz-border-radius: 50%;position: absolute;}.heart:after{top: -5px;}.heart:before{left: -5px;}");
            attachEvent();
            gameloop();
        }

        function gameloop() {
            for (let i = 0; i < hearts.length; i++) {
                if (hearts[i].alpha <= 0) {
                    document.body.removeChild(hearts[i].el);
                    hearts.splice(i, 1);
                    continue;
                }
                hearts[i].y--;
                hearts[i].scale += 0.004;
                hearts[i].alpha -= 0.013;
                hearts[i].el.style.cssText = "left:" + hearts[i].x + "px;top:" + hearts[i].y + "px;opacity:" + hearts[i].alpha + ";transform:scale(" + hearts[i].scale + "," + hearts[i].scale + ") rotate(45deg);background:" + hearts[i].color;
            }
            requestAnimationFrame(gameloop);
        }

        /**
         * 附加事件.:创建小心心
         */
        function attachEvent() {
            let old = typeof window.onclick === "function" && window.onclick;
            window.onclick = function (event) {
                old && old();
                createHeart(event);
            }
        }

        function createHeart(event) {
            let d = document.createElement("div");
            d.className = "heart";
            hearts.push({
                el: d,
                x: event.clientX - 5,
                y: event.clientY - 5,
                scale: 1,
                alpha: 1,
                color: randomColor()
            });
            document.body.appendChild(d);
        }

        function cssFun(css) {
            let style = document.createElement("style");
            style.type = "text/css";
            try {
                style.appendChild(document.createTextNode(css));
            } catch (ex) {
                style.styleSheet.cssText = css;
            }
            document.getElementsByTagName('head')[0].appendChild(style);
        }

        /**
         *随机颜色
         */
        function randomColor() {
            return "rgb(" + (~~(Math.random() * 255)) + "," + (~~(Math.random() * 255)) + "," + (~~(Math.random() * 255)) + ")";
        }
    })(window, document);
</script>

特效三：鼠标左键点击出现爱心加文字

页面 CSS 代码

body{position:relative;}
.img {width: 20px;height: 20px;opacity: 1;position: absolute;z-index: 100000;transition: 1s;}
.left,.right {width: 10px;height: 10px;border-radius: 100%;position: absolute;}
.right {right: 0;}
.under {width: 10px;height: 10px;position: absolute;top: 5px;left: 5px;transform: rotate(45deg)}
.text {width: 50px;font-size: 10px;line-height: 1;position: absolute;top: -1em;left: -15px;text-align: center;cursor: default;}

页脚 HTML 代码

<script type="text/javascript">
    // 点击出的文字数组，可自行添加
    tagArray = ["CSS", "JavaScript", "Spring", "SpringCloud", "Eureka", "Ribbon", "Hystrix", "Gateway", "Config", "Swagger", "RabbitMq", "ZooKeeper", "Mysql", "Linux"];
    // 计数
    let count = 0;
    // 鼠标按下事件
    document.body.onmousedown = function (e) {
        // 获取鼠标点击位置
        let x = event.pageX - 30;
        let y = event.pageY - 30;
        // 分别创建所需要的元素节点
        let img = document.createElement("div");
        let left = document.createElement("div");
        let right = document.createElement("div");
        let under = document.createElement("div");
        let txt = document.createElement("div");
        // 通过随机数从文字数组中获取随机下标的文字
        let textNode = document.createTextNode(tagArray[parseInt(Math.random() * tagArray.length)]);
        // 文字添加到txt节点中
        txt.appendChild(textNode);

        img.className = "img" + " " + "img" + count;
        left.className = "left";
        right.className = "right";
        under.className = "under";
        txt.className = "text";
        img.style.top = y + "px";
        img.style.left = x + "px";
        // 将创建的元素添加到容器中
        img.appendChild(left);
        img.appendChild(right);
        img.appendChild(under);
        img.appendChild(txt);
        document.body.appendChild(img);
        // 获取随机颜色
        let color = "rgb(" + parseInt(Math.random() * 255) + "," + parseInt(Math.random() * 255) + "," +
            parseInt(Math.random() * 255) + ")";
        txt.style.color = color;
        for (let i = 0; i < 3; i++) {
            img.children[i].style.background = color;
        }
    }
    // 鼠标抬起事件
    document.body.onmouseup = function () {
        document.getElementsByClassName("img" + count)[0].style.transform = "scale(0.5)";
        document.getElementsByClassName("img" + count)[0].style.transform = "translateY(-40px)";
        document.getElementsByClassName("img" + count)[0].style.opacity = "0";
        count++;
    }
</script>

特效四：鼠标戏百足龙

页脚 HTML 代码

<html>
<head><title>鼠标戏百足龙</title></head>
<body>
<canvas style="position: fixed;z-index: -1;opacity: 0.38;left: 0px;top: 0px;background-color: transparent;"></canvas>
</body>
<script type="text/javascript" src="https://files.cnblogs.com/files/mjtabu/game_thousand-legger.js"></script>
</html>

特效五：待定...