博客园美化

SimpleMemory

SimpleMemory.css复制到页面定制化CSS代码，勾选禁用模板默认CSS

侧边栏配置


<!--皮肤-->
<script type="text/javascript">
    window.cnblogsConfig = {
      info: {
        name: 'haijun.wang', // 用户名
        startDate: '2022-02-23', // 入园时间，年-月-日。入园时间查看方法：鼠标停留园龄时间上，会显示入园时间
        avatar: 'https://whj-picgo.oss-cn-chengdu.aliyuncs.com/img/QQ图片20220308155649.jpg', // 用户头像
        blogIcon: 'https://whj-picgo.oss-cn-chengdu.aliyuncs.com/img/c622009f3992dab8a87e2d7698624b36.jpeg' //博客图标
      },
      banner: {
        home: {
          background: [
            "https://whj-picgo.oss-cn-chengdu.aliyuncs.com/img/f7a9faec71ea47ab89376d2c4b9e80cb.jpeg",
            "https://whj-picgo.oss-cn-chengdu.aliyuncs.com/img/c622009f3992dab8a87e2d7698624b36.jpeg",
            "https://whj-picgo.oss-cn-chengdu.aliyuncs.com/img/c622009f3992dab8a87e2d7698624b36.jpeg",
          ],
        },
      },
      animate: {
        articleBanner: {
          enable: true,
        },
        bannerImages: {
          enable: true,
        },
      },
      articleDirectory: {
        position: 'right',
      },
      code: {
        type: 'hljs',
      }
    }
</script>
<script src="https://cdn.jsdelivr.net/gh/BNDong/Cnblogs-Theme-SimpleMemory@v2.1.0/dist/simpleMemory.js" defer></script>

鼠标爱心特效

侧边栏配置


<!-- 为页面添加爱心特效 -->
<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>

页面动态线条

侧边栏配置


<!--线条-->
<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>

看板娘

上传文件
添加页首配置

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <link rel="stylesheet" type="text/css" href="https://blog-static.cnblogs.com/files/blogs/739550/waifu1.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://blog-static.cnblogs.com/files/blogs/739550/waifu1.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://blog-static.cnblogs.com/files/blogs/739550/live2d.js"></script>
    <script src="https://blog-static.cnblogs.com/files/blogs/739550/waifu-tips.js"></script>
    <script type="text/javascript">initModel()</script>

    <link rel="stylesheet" type="text/css" href="https://blog-static.cnblogs.com/files/blogs/739550/flat-ui.min.css"/>
</body>
</html>

posted @ 2022-03-08 17:22 小王而已阅读(52) 评论(0) 编辑收藏举报

刷新页面返回顶部

小王而已

博客园美化

博客园美化

SimpleMemory

鼠标爱心特效

页面动态线条

看板娘

公告