博客园界面背景及一些特效设置

作者：struct_mooc 博客地址：https://www.cnblogs.com/structmooc/p/13418577.html

目录

直接来，把代码贴到对应栏目即可（注意要开通JS权限，否则无法显示，向博客园申请权限即可）。

1.博客侧边栏公告（支持HTML代码） （支持 JS 代码）

//1.鼠标点击出爱心
//2.鼠标点击出特效
<!-- 爱心特效 -->
<script type="text/javascript">
(function(window,document,undefined){
        var hearts = [];
        window.requestAnimationFrame = (function(){
                return window.requestAnimationFrame || 
                           window.webkitRequestAnimationFrame ||
                           window.mozRequestAnimationFrame ||
                           window.oRequestAnimationFrame ||
                           window.msRequestAnimationFrame ||
                           function (callback){
                                   setTimeout(callback,1000/60);
                           }
        })();
        init();
        function init(){
                css(".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(var 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(){
                var old = typeof window.onclick==="function" && window.onclick;
                window.onclick = function(event){
                        old && old();
                        createHeart(event);
                }
        }
        function createHeart(event){
            var 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 css(css){
            var 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>
<!-- 爱心特效 -->




<!-- 鼠标点击特效 -->
<body>
    <a name="top"></a>
    <div id="page_begin_html">
        <script src="https://blog-static.cnblogs.com/files/lq0001/silence.min.js"></script>
<!-- <script type="text/javascript">initModel()</script> -->
<!-- 鼠标点击特效 -->

<script src="https://files.cnblogs.com/files/graytido/cursor-effects.js"></script>

<!-- 鼠标点击特效end -->

<style>
/** 鼠标样式 **/
body {
cursor: url(https://www.tiezi.xyz/usr/uploads/2017/08/149116970.png), auto;
}

a,a:visited {
    cursor:url(https://www.tiezi.xyz/usr/uploads/2017/08/1738446070.png),auto;
}
</style>
</div>
<!-- 鼠标点击特效 -->

2.页首HTML代码

//1.雪花
//2.线条
//3.社会主义核心价值观（可自定义，里面的文字换成其他就会显示你输入的文字了）
<!--雪花-->
<script>
(function($){
    $.fn.snow=function(options){
        var $flake=$('<div />')
            .css({
                'position':'fixed',//'absolute',
                'top':'-50px',
                'z-index':'1000'
                })
            .html('&#10052;');
        var documentHeight=document.documentElement.clientHeight;//$(document).height();
        var documentWidth=$(document).width();
        var defaults={minSize:10,maxSize:20,newOn:500,flakeColor:"#FFFFFF"};
        var options=$.extend({},defaults,options);
        var interval=setInterval(function(){
            var startPositionLeft=Math.random()*documentWidth-100;
            var startOpacity=0.5+Math.random();
            var sizeFlake=options.minSize+Math.random()*options.maxSize;
            var endPositionTop=documentHeight-40;
            var endPositionLeft=startPositionLeft-100+Math.random()*200;
            var durationFall=documentHeight*10+Math.random()*5000;
            $flake.clone()
                  .appendTo('body')
                  .css({
                        left:startPositionLeft,
                        opacity:startOpacity,
                        'font-size':sizeFlake,
                        color:options.flakeColor
                      })
                  .animate({
                            top:endPositionTop,
                            left:endPositionLeft,
                            opacity:0.2
                        },
                        durationFall,
                        'linear',
                        function(){
                            $(this).remove();
                        });
        },options.newOn);
    };
})(jQuery); 


$.fn.snow({ minSize: 10, maxSize: 50, newOn: 1000, flakeColor: '#ccc'});
</script>
<!--雪花-->



<!--线条随鼠标流动-->
<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",.5),c:n(i,"color","0,0,0"),n:n(i,"count",99)
 }
 }
 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 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>
<!--鼠标点击弹出社会主义核心价值观-->

3.页脚HTML代码

//1.雪花
//2.小鱼
//3.看板娘
<!-- 雪花 -->
<div class="Snow">
    <canvas id="Snow"></canvas>
</div>
<script src="https://files.cnblogs.com/files/structmooc/%E9%9B%AA%E8%8A%B1.js"></script>
<!-- 雪花 -->




<!-- 底部加了小鱼<・)))><<~ -->
<div id="jsi-flying-fish-container" class="container"></div>
<script
src='https://files.cnblogs.com/files/structmooc/%E5%BA%95%E9%83%A8%E5%8A%A0%E4%BA%86%E5%B0%8F%E9%B1%BC.css' defer></script>
<style>
@media only screen and (max-width: 767px)
{
  #sidebar_search_box input[type=text]{width:calc(100% - 24px)
}
}
</style>
<!-- 底部加了小鱼<・)))><<~ -->




<!-- 看板娘 -->
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Live2D</title>
     
    <link rel="stylesheet" type="text/css" href="https://files.cnblogs.com/files/structmooc/waifu.css"/>
    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
    <link rel="stylesheet" type="text/css" href="https://files.cnblogs.com/files/structmooc/waifu.css">
    <div class="waifu" id="waifu">
        <div class="waifu-tips" style="opacity: 1;"></div>
        <canvas id="live2d" width="280" height="250" class="live2d"></canvas>
        <div class="waifu-tool">
            <span class="fui-home"></span>
            <span class="fui-chat"></span>
            <span class="fui-eye"></span>
            <span class="fui-user"></span>
            <span class="fui-photo"></span>
            <span class="fui-info-circle"></span>
            <span class="fui-cross"></span>
        </div>
    </div>
    <script src="https://files.cnblogs.com/files/structmooc/live2d.js"></script>
    <script src="https://files.cnblogs.com/files/structmooc/waifu-tis.js"></script>
    <script type="text/javascript">initModel()</script>
</body>
</html>
<link rel="stylesheet" type="text/css" href="https://files.cnblogs.com/files/structmooc/flat-ui.min.css"/>
<!-- 看板娘 -->
posted @ 2020-08-02 13:37  struct_mooc  阅读(562)  评论(3)  编辑  收藏  举报
乐
快