其他博客园背景特效综合

https://note.youdao.com/ynoteshare1/index.html?id=f67cda9f9aa7fbbe5e2e6559aefef7d7&type=note
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        /*simplememory*/
        #google_ad_c1, #google_ad_c2 {
            display: none;
        }

        .syntaxhighlighter a, .syntaxhighlighter div, .syntaxhighlighter code, .syntaxhighlighter table, .syntaxhighlighter table td,
        .syntaxhighlighter table tr, .syntaxhighlighter table tbody, .syntaxhighlighter table thead, .syntaxhighlighter table caption,
        .syntaxhighlighter textarea {
            font-size: 14px !important;
        }

        #home {
            opacity: 0.90;
            margin: 0 auto;
            width: 60%;
            min-width: 950px;
            padding: 50px;
            margin-top: 80px;
            margin-bottom: 50px;
            margin-left: 15%;
            box-shadow: 0 2px 6px rgba(100, 100, 100, 0.3);
        }
        #blogTitle {
            position: relative;
            top: 35px;
            margin-top: 61%;
            padding-top: -3px;
            left: 2px;
            width: 745px;
            height: 80px;
            margin: 0px;
            border: none;
            /* margin-bottom: 26%; */
            /* padding-bottom: 15%; */
            /* padding: 0; */
            background: none;
            overflow: hidden;
        }
        #blogTitle h1 {
            font-size: 30px;
            font-weight: bold;
            font-family: "Comic Sans MS";
            line-height: 1.5em;
            margin-top: 20px;
            color: #515151;
        }

        #navList a:hover {
            color: #4C9ED9;
            text-decoration: none;
        }

        #navList a {
            display: block;
            width: 5em;
            height: 22px;
            float: left;
            text-align: center;
            padding-top: 18px;
        }

        #navigator {
            font-size: 15px;
            border-bottom: 1px solid #ededed;
            border-top: 1px solid #ededed;
            left: 2px;
            height: 50px;
            clear: both;
            margin-top: 25px;
        }

        .catListTitle {
            margin-top: 21px;
            margin-bottom: 10.5px;
            text-align: left;
            border-left: 10px solid rgba(82, 168, 236, 0.8);
            padding: 10px 0 14px 10px;
            background-color: #f5f5f5;
        }

        #ad_under_post_holder #google_ad_c1, #google_ad_c2 {
            display: none !important;
        }

        body {
            color: #000;
            background: url(http://images2015.cnblogs.com/blog/943280/201705/943280-20170522142955163-2081705181.jpg) fixed;
            background-size: 100%;
            background-repeat: no-repeat;
            font-family: "Helvetica Neue", Helvetica, Verdana, Arial, sans-serif;
            font-size: 12px;
            min-height: 101%;
        }

        #topics .postTitle {
            border: 0px;
            font-size: 200%;
            font-weight: bold;
            float: left;
            line-height: 1.5;
            width: 100%;
            padding-left: 5px;
        }

        div.commentform p {
            margin-bottom: 10px;
        }

        .comment_btn {
            padding: 5px 10px;
            height: 35px;
            width: 90px;
            border: 0 none;
            border-radius: 5px;
            background: #ddd;
            color: #999;
            cursor: pointer;
            font-family: "Lato", Helvetica Neue, Helvetica, Microsoft Yahei, 宋体, Arial, sans-serif;
            text-shadow: 0 0 1px #fff;
            display: inline !important;
        }

        .comment_btn:hover {
            padding: 5px 10px;
            height: 35px;
            width: 90px;
            border: 0 none;
            border-radius: 5px;
            background: #258fb8;
            color: white;
            cursor: pointer;
            font-family: "Lato", Helvetica Neue, Helvetica, Microsoft Yahei, 宋体, Arial, sans-serif;
            text-shadow: 0 0 1px #fff;
            display: inline !important;
        }

        #commentform_title {
            background-image: none;
            background-repeat: no-repeat;
            margin-bottom: 10px;
            padding: 0;
            font-size: 24px;
        }

        #commentbox_opt, #commentbox_opt + p {
            text-align: center;
        }

        .commentbox_title {
            width: 100%;
        }

        #tbCommentBody {
            font-family: 'Microsoft Yahei', Microsoft Yahei, 宋体, sans-serif;
            margin-top: 10px;
            max-width: 100%;
            min-width: 100%;
            background: white;
            color: #333;
            border: 2px solid #fff;
            box-shadow: inset 0 0 8px #aaa;
        / / padding: 10 px;
            height: 250px;
            font-size: 14px;
            min-height: 120px;
        }

        .feedbackItem {
            font-size: 14px;
            line-height: 24px;
            margin: 10px 0;
            padding: 20px;
            background: #F2F2F2;
            box-shadow: 0 0 5px #aaa;
        }

        .feedbackListSubtitle {
            font-weight: normal;
        }

        #blog-comments-placeholder, #comment_form {
            padding: 20px;
            background: #fff;
            -webkit-box-shadow: 1px 2px 3px #ddd;
            box-shadow: 1px 2px 3px #ddd;
            margin-bottom: 50px;
        }

        .feedback_area_title {
            margin-bottom: 15px;
            font-size: 1.8em;
        }

        .feedbackItem {
            border-bottom: 1px solid #CCC;
            margin-bottom: 10px;
            padding: 5px;
            background: rgb(248, 248, 248);
        }

        .color_shine {
            background: rgb(226, 242, 255);
        }

        .feedbackItem:hover {
            -webkit-animation-name: color_shine;
            -webkit-animation-duration: 2s;
            -webkit-animation-iteration-count: infinite;
        }

        #comment_form .title {
            font-weight: normal;
            margin-bottom: 15px;
        }



        /*生成博客目录的CSS*/
        #uprightsideBar{
            font-size:16px;
            font-family: 华文楷体;
            text-align:left;
            position:fixed;/*将div的位置固定到距离top:50px，right:0px的位置，这样div就会处在最右边的位置，距离顶部50px*/
            top: 80px;
            right: 20px;
            width: auto;
            height: auto;
            opacity: 0.7;
        }
        #sideBarTab{
            opacity: 0.8;
            float:left;
            color:#4979ed;
            border-right:none;
            text-align: left;
            font-size:20px;
            width: 25px;
            border-radius: 15px;
            background: white;
            font-family: 华文楷体;
            opacity: 0.8;
        }

        #sideBarContents{
            float:left;
            overflow:auto;
            overflow-x:hidden;!important;
            width: auto;
            min-height:200px;
            max-height: 80%;
            border-right:none;
            color: #4979ed;
            border-radius: 15px;
            background: white;
            font-family: 华文楷体;
        }
        #sideBarContents dl{
            margin: 10px;
            padding: 10px;
            font-family: 华文楷体;
            font-size:18px;
        }

        #sideBarContents dt{
            margin-top:10px;
            margin-left:10px;
            font-family: 华文楷体;
            font-size:16px;
            cursor: pointer;
        }

        #sideBarContents dd{

            margin-left: 45px;
            cursor: pointer;
            font-family: 华文楷体;
            font-size:16px;
        }

        #sideBarContents dd:hover, dt:hover {
            color: white;
            border-radius: 15px;
            background: pink;
            font-family: 华文楷体;
            font-size:16px;
            cursor: pointer;
        }
    </style>
    <title>Title</title>
</head>
<body>
<!--蜘蛛网特效-->
<script>

    !function () {
        function n(n, e, t) {
            return n.getAttribute(e) || t
        }

        function e(n) {
            return document.getElementsByTagName(n)
        }

        function t() {
            var t = e("script"), o = t.length, i = t[o - 1];
            return {
                l: o,
                z: n(i, "zIndex", -1),
                o: n(i, "opacity", .9),
                c: n(i, "color", "255,205,0"),
                n: n(i, "count", 260)
            }
        }

        function o() {
            a = m.width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth,
                c = m.height = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight
        }

        function i() {
            r.clearRect(0, 0, a, c);
            var n, e, t, o, m, l;
            s.forEach(function (i, x) {
                for (i.x += i.xa, i.y += i.ya, i.xa *= i.x > a || i.x < 0 ? -1 : 1, i.ya *= i.y > c || i.y < 0 ? -1 : 1, r.fillRect(i.x - .5, i.y - .5, 1, 1), e = x + 1; e < u.length; e++) n = u[e],
                null !== n.x && null !== n.y && (o = i.x - n.x, m = i.y - n.y,
                    l = o * o + m * m, l < n.max && (n === y && l >= n.max / 2 && (i.x -= .03 * o, i.y -= .03 * m),
                    t = (n.max - l) / n.max, r.beginPath(), r.lineWidth = t / 2, r.strokeStyle = "rgba(" + d.c + "," + (t + .2) + ")", r.moveTo(i.x, i.y), r.lineTo(n.x, n.y), r.stroke()))
            }),
                x(i)
        }

        var a, c, u, m = document.createElement("canvas"),
            d = t(), l = "c_n" + d.l, r = m.getContext("2d"),
            x = window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame ||
                function (n) {
                    window.setTimeout(n, 1e3 / 45)
                },

            w = Math.random, y = {x: null, y: null, max: 2e4};
        m.id = l, m.style.cssText = "position:fixed;top:0;left:0;z-index:" + d.z + ";opacity:" + d.o, e("body")[0].appendChild(m), o(), window.onresize = o,
            window.onmousemove = function (n) {
                n = n || window.event, y.x = n.clientX, y.y = n.clientY
            },
            window.onmouseout = function () {
                y.x = null, y.y = null
            };
        for (var s = [], f = 0; d.n > f; f++) {
            var h = w() * a, g = w() * c, v = 2 * w() - 1, p = 2 * w() - 1;
            s.push({x: h, y: g, xa: v, ya: p, max: 6e3})
        }
        u = s.concat([y]),
            setTimeout(function () {
                i()
            }, 100)
    }();
</script>

<script type="text/javascript">
    var BlogDirectory = {
        /*
            获取元素位置，距浏览器左边界的距离（left）和距浏览器上边界的距离（top）
        */
        getElementPosition:function (ele) {
            var topPosition = 0;
            var leftPosition = 0;
            while (ele){
                topPosition += ele.offsetTop;
                leftPosition += ele.offsetLeft;
                ele = ele.offsetParent;
            }
            return {top:topPosition, left:leftPosition};
        },

        /*
        获取滚动条当前位置
        */
        getScrollBarPosition:function () {
            var scrollBarPosition = document.body.scrollTop || document.documentElement.scrollTop;
            return  scrollBarPosition;
        },

        /*
        移动滚动条，finalPos 为目的位置，internal 为移动速度
        */
        moveScrollBar:function(finalpos, interval) {

            //若不支持此方法，则退出
            if(!window.scrollTo) {
                return false;
            }

            //窗体滚动时，禁用鼠标滚轮
            window.onmousewheel = function(){
                return false;
            };

            //清除计时
            if (document.body.movement) {
                clearTimeout(document.body.movement);
            }

            var currentpos =BlogDirectory.getScrollBarPosition();//获取滚动条当前位置

            var dist = 0;
            if (currentpos == finalpos) {//到达预定位置，则解禁鼠标滚轮，并退出
                window.onmousewheel = function(){
                    return true;
                }
                return true;
            }
            if (currentpos < finalpos) {//未到达，则计算下一步所要移动的距离
                dist = Math.ceil((finalpos - currentpos)/10);
                currentpos += dist;
            }
            if (currentpos > finalpos) {
                dist = Math.ceil((currentpos - finalpos)/10);
                currentpos -= dist;
            }

            var scrTop = BlogDirectory.getScrollBarPosition();//获取滚动条当前位置
            window.scrollTo(0, currentpos);//移动窗口
            if(BlogDirectory.getScrollBarPosition() == scrTop)//若已到底部，则解禁鼠标滚轮，并退出
            {
                window.onmousewheel = function(){
                    return true;
                }
                return true;
            }

            //进行下一步移动
            var repeat = "BlogDirectory.moveScrollBar(" + finalpos + "," + interval + ")";
            document.body.movement = setTimeout(repeat, interval);
        },

        htmlDecode:function (text){
            var temp = document.createElement("div");
            temp.innerHTML = text;
            var output = temp.innerText || temp.textContent;
            temp = null;
            return output;
        },

        /*
        创建博客目录，
        id表示包含博文正文的 div 容器的 id，
        mt 和 st 分别表示主标题和次级标题的标签名称（如 H2、H3，大写或小写都可以！），
        interval 表示移动的速度
        */
        createBlogDirectory:function (id, mt, st, interval){
            //获取博文正文div容器
            var elem = document.getElementById(id);
            if(!elem) return false;
            //获取div中所有元素结点
            var nodes = elem.getElementsByTagName("*");
            //创建博客目录的div容器
            var divSideBar = document.createElement('DIV');
            divSideBar.className = 'uprightsideBar';
            divSideBar.setAttribute('id', 'uprightsideBar');
            var divSideBarTab = document.createElement('DIV');
            divSideBarTab.setAttribute('id', 'sideBarTab');
            divSideBar.appendChild(divSideBarTab);
            var h2 = document.createElement('H2');
            divSideBarTab.appendChild(h2);
            var txt = document.createTextNode('目录导航');
            h2.appendChild(txt);
            var divSideBarContents = document.createElement('DIV');
            divSideBarContents.style.display = 'none';
            divSideBarContents.setAttribute('id', 'sideBarContents');
            divSideBar.appendChild(divSideBarContents);
            //创建自定义列表
            var dlist = document.createElement("dl");
            divSideBarContents.appendChild(dlist);
            var num = 0;//统计找到的mt和st
            mt = mt.toUpperCase();//转化成大写
            st = st.toUpperCase();//转化成大写
            //遍历所有元素结点
            for(var i=0; i<nodes.length; i++)
            {
                if(nodes[i].nodeName == mt|| nodes[i].nodeName == st)
                {
                    //获取标题文本
                    var nodetext = nodes[i].innerHTML.replace(/<\/?[^>]+>/g,"");//innerHTML里面的内容可能有HTML标签，所以用正则表达式去除HTML的标签
                    nodetext = nodetext.replace(/ /ig, "");//替换掉所有的
                    nodetext = BlogDirectory.htmlDecode(nodetext);
                    //插入锚
                    nodes[i].setAttribute("id", "blogTitle" + num);
                    var item;
                    switch(nodes[i].nodeName)
                    {
                        case mt:    //若为主标题
                            item = document.createElement("dt");
                            break;
                        case st:    //若为子标题
                            item = document.createElement("dd");
                            break;
                    }

                    //创建锚链接
                    var itemtext = document.createTextNode(nodetext);
                    item.appendChild(itemtext);
                    item.setAttribute("name", num);
                    item.onclick = function(){        //添加鼠标点击触发函数
                        var pos = BlogDirectory.getElementPosition(document.getElementById("blogTitle" + this.getAttribute("name")));
                        if(!BlogDirectory.moveScrollBar(pos.top, interval)) return false;
                    };

                    //将自定义表项加入自定义列表中
                    dlist.appendChild(item);
                    num++;
                }
            }

            if(num == 0) return false;
            /*鼠标进入时的事件处理*/
            divSideBarTab.onmouseenter = function(){
                divSideBarContents.style.display = 'block';
            }
            /*鼠标离开时的事件处理*/
            divSideBar.onmouseleave = function() {
                divSideBarContents.style.display = 'none';
            }

            document.body.appendChild(divSideBar);
        }

    };

    window.onload=function(){
        /*页面加载完成之后生成博客目录*/
        BlogDirectory.createBlogDirectory("cnblogs_post_body","h2","h3",20);
    }
</script>
</body>
<!--/* 点击爆炸效果*/-->
<canvas class="fireworks" style="position: fixed; left: 0px; top: 0px; z-index: 1; pointer-events: none; width: 1440px; height: 451px;" width="2880" height="902"></canvas>
<script type="text/javascript" src="//cdn.bootcss.com/animejs/2.2.0/anime.min.js"></script>
<script type="text/javascript">
    "use strict";function updateCoords(e){pointerX=(e.clientX||e.touches[0].clientX)-canvasEl.getBoundingClientRect().left,pointerY=e.clientY||e.touches[0].clientY-canvasEl.getBoundingClientRect().top}function setParticuleDirection(e){var t=anime.random(0,360)*Math.PI/180,a=anime.random(50,180),n=[-1,1][anime.random(0,1)]*a;return{x:e.x+n*Math.cos(t),y:e.y+n*Math.sin(t)}}function createParticule(e,t){var a={};return a.x=e,a.y=t,a.color=colors[anime.random(0,colors.length-1)],a.radius=anime.random(16,32),a.endPos=setParticuleDirection(a),a.draw=function(){ctx.beginPath(),ctx.arc(a.x,a.y,a.radius,0,2*Math.PI,!0),ctx.fillStyle=a.color,ctx.fill()},a}function createCircle(e,t){var a={};return a.x=e,a.y=t,a.color="#F00",a.radius=0.1,a.alpha=0.5,a.lineWidth=6,a.draw=function(){ctx.globalAlpha=a.alpha,ctx.beginPath(),ctx.arc(a.x,a.y,a.radius,0,2*Math.PI,!0),ctx.lineWidth=a.lineWidth,ctx.strokeStyle=a.color,ctx.stroke(),ctx.globalAlpha=1},a}function renderParticule(e){for(var t=0;t<e.animatables.length;t++){e.animatables[t].target.draw()}}function animateParticules(e,t){for(var a=createCircle(e,t),n=[],i=0;i<numberOfParticules;i++){n.push(createParticule(e,t))}anime.timeline().add({targets:n,x:function(e){return e.endPos.x},y:function(e){return e.endPos.y},radius:0.1,duration:anime.random(1200,1800),easing:"easeOutExpo",update:renderParticule}).add({targets:a,radius:anime.random(80,160),lineWidth:0,alpha:{value:0,easing:"linear",duration:anime.random(600,800)},duration:anime.random(1200,1800),easing:"easeOutExpo",update:renderParticule,offset:0})}function debounce(e,t){var a;return function(){var n=this,i=arguments;clearTimeout(a),a=setTimeout(function(){e.apply(n,i)},t)}}var canvasEl=document.querySelector(".fireworks");if(canvasEl){var ctx=canvasEl.getContext("2d"),numberOfParticules=30,pointerX=0,pointerY=0,tap="mousedown",colors=["#FF1461","#18FF92","#5A87FF","#FBF38C"],setCanvasSize=debounce(function(){canvasEl.width=2*window.innerWidth,canvasEl.height=2*window.innerHeight,canvasEl.style.width=window.innerWidth+"px",canvasEl.style.height=window.innerHeight+"px",canvasEl.getContext("2d").scale(2,2)},500),render=anime({duration:1/0,update:function(){ctx.clearRect(0,0,canvasEl.width,canvasEl.height)}});document.addEventListener(tap,function(e){"sidebar"!==e.target.id&&"toggle-sidebar"!==e.target.id&&"A"!==e.target.nodeName&&"IMG"!==e.target.nodeName&&(render.play(),updateCoords(e),animateParticules(pointerX,pointerY))},!1),setCanvasSize(),window.addEventListener("resize",setCanvasSize,!1)}"use strict";function updateCoords(e){pointerX=(e.clientX||e.touches[0].clientX)-canvasEl.getBoundingClientRect().left,pointerY=e.clientY||e.touches[0].clientY-canvasEl.getBoundingClientRect().top}function setParticuleDirection(e){var t=anime.random(0,360)*Math.PI/180,a=anime.random(50,180),n=[-1,1][anime.random(0,1)]*a;return{x:e.x+n*Math.cos(t),y:e.y+n*Math.sin(t)}}function createParticule(e,t){var a={};return a.x=e,a.y=t,a.color=colors[anime.random(0,colors.length-1)],a.radius=anime.random(16,32),a.endPos=setParticuleDirection(a),a.draw=function(){ctx.beginPath(),ctx.arc(a.x,a.y,a.radius,0,2*Math.PI,!0),ctx.fillStyle=a.color,ctx.fill()},a}function createCircle(e,t){var a={};return a.x=e,a.y=t,a.color="#F00",a.radius=0.1,a.alpha=0.5,a.lineWidth=6,a.draw=function(){ctx.globalAlpha=a.alpha,ctx.beginPath(),ctx.arc(a.x,a.y,a.radius,0,2*Math.PI,!0),ctx.lineWidth=a.lineWidth,ctx.strokeStyle=a.color,ctx.stroke(),ctx.globalAlpha=1},a}function renderParticule(e){for(var t=0;t<e.animatables.length;t++){e.animatables[t].target.draw()}}function animateParticules(e,t){for(var a=createCircle(e,t),n=[],i=0;i<numberOfParticules;i++){n.push(createParticule(e,t))}anime.timeline().add({targets:n,x:function(e){return e.endPos.x},y:function(e){return e.endPos.y},radius:0.1,duration:anime.random(1200,1800),easing:"easeOutExpo",update:renderParticule}).add({targets:a,radius:anime.random(80,160),lineWidth:0,alpha:{value:0,easing:"linear",duration:anime.random(600,800)},duration:anime.random(1200,1800),easing:"easeOutExpo",update:renderParticule,offset:0})}function debounce(e,t){var a;return function(){var n=this,i=arguments;clearTimeout(a),a=setTimeout(function(){e.apply(n,i)},t)}}var canvasEl=document.querySelector(".fireworks");if(canvasEl){var ctx=canvasEl.getContext("2d"),numberOfParticules=30,pointerX=0,pointerY=0,tap="mousedown",colors=["#FF1461","#18FF92","#5A87FF","#FBF38C"],setCanvasSize=debounce(function(){canvasEl.width=2*window.innerWidth,canvasEl.height=2*window.innerHeight,canvasEl.style.width=window.innerWidth+"px",canvasEl.style.height=window.innerHeight+"px",canvasEl.getContext("2d").scale(2,2)},500),render=anime({duration:1/0,update:function(){ctx.clearRect(0,0,canvasEl.width,canvasEl.height)}});document.addEventListener(tap,function(e){"sidebar"!==e.target.id&&"toggle-sidebar"!==e.target.id&&"A"!==e.target.nodeName&&"IMG"!==e.target.nodeName&&(render.play(),updateCoords(e),animateParticules(pointerX,pointerY))},!1),setCanvasSize(),window.addEventListener("resize",setCanvasSize,!1)};
</script>
<!--/* 鼠标点击求赞文字特效 */-->
<script type="text/javascript">
    var a_idx = 0;
    jQuery(document).ready(function($) {
        $("body").click(function(e) {
            var a = new Array("❤喜欢就点个赞呗❤","❤不是点这里哦❤","❤快去点赞❤","❤在文章最下面哦❤","❤快去推荐一下吧❤","❤感谢观看❤","❤");
            var $i = $("<span></span>").text(a[a_idx]);
            a_idx = (a_idx + 1) % a.length;
            var x = e.pageX,
                y = e.pageY;
            $i.css({
                "z-index": 999999999999999999999999999999999999999999999999999999999999999999999,
                "top": y - 20,
                "left": x,
                "position": "absolute",
                "font-weight": "bold",
                "color": "rgb("+~~(255*Math.random())+","+~~(255*Math.random())+","+~~(255*Math.random())+")"
            });
            $("body").append($i);
            $i.animate({
                    "top": y - 180,
                    "opacity": 0
                },
                1500,
                function() {
                    $i.remove();
                });
        });
    });
</script>
<!--/*鼠标跟随效果*/-->
<style type="text/css">
    .draw {
        position: fixed;
        width: 1px;
        line-height: 1px;
        pointer-events: none;
    }
    @keyframes floatOne {
        0% {
            opacity:0.8;
        }
        50% {
            opacity:0.8;
        }
        100% {
            opacity:0;
            transform:translate3D(0, -20px, 0) scale(5) rotate(45deg);
        }
    }
</style>
<script type="text/javascript">
    var H = 0;
    $(document).bind('mousemove touchmove',function(e) {
        e.preventDefault();
        var drawSize = 10;
        var drawType = '♡';
        var floatType = 'floatOne';
        var xPos = e.originalEvent.pageX;
        var yPos = e.originalEvent.pageY;

        $('body').append('<div class="draw" style=" font-size:'+drawSize+'px;left:'+xPos+'px;top:'+yPos+'px;-webkit-animation:'+floatType+' .9s 1;-moz-animation:'+floatType+' .9s 1;color:#FF83FA;">'+drawType+'</div>');

        $('.draw').each(function() {
            var div = $(this);
            setTimeout(function() {$(div).remove();},800);
        });
    });
</script>
</html>
原文地址：https://www.cnblogs.com/luzhanshi/p/12193041.html