博客园美化系列总结

页面定制 css 代码

//鼠标指针
body {
    cursor: url('https://files-cdn.cnblogs.com/files/miluluyo/cursora.ico'), auto;
    background-color:whitesmoke;// 修改背景颜色为半透明
}
//loading
@keyframes spin3D{from{transform:rotate3d(0.5,0.5,0.5,360deg)}to{transform:rotate3d(0deg)}}#loading{height:100%;background-color:#1d2630;display:flex;justify-content:center;align-items:center;position:fixed;top:0;left:0;right:0;overflow:hidden;z-index:99999999}.spinner-box{width:300px;height:300px;display:flex;justify-content:center;align-items:center;background-color:transparent}.leo{position:absolute;display:flex;justify-content:center;align-items:center;border-radius:50%}.blue-orbit{width:165px;height:165px;border:1px solid #91daffa5;animation:spin3D 3s linear .2s infinite}.green-orbit{width:120px;height:120px;border:1px solid #91ffbfa5;animation:spin3D 2s linear 0s infinite}.red-orbit{width:90px;height:90px;border:1px solid #ffca91a5;animation:spin3D 1s linear 0s infinite}.white-orbit{width:60px;height:60px;border:2px solid #fff;animation:spin3D 10s linear 0s infinite}.w1{transform:rotate3D(1,1,1,90deg)}.w2{transform:rotate3D(1,2,0.5,90deg)}.w3{transform:rotate3D(0.5,1,2,90deg)}
//去掉推荐
#cnblogs_ch,charm-bar-main {display:none;!important}

页首 css 代码

<!--鼠标点击特效 -->
<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":0,
            "top":y,
            "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();});
    });
});
/*loading*/
</script>
<div id="loading">
    <div class="spinner-box">
        <div class="blue-orbit leo"></div>
        <div class="green-orbit leo"></div>
        <div class="red-orbit leo"></div>
        <div class="white-orbit w1 leo"></div>
        <div class="white-orbit w2 leo"></div>
        <div class="white-orbit w3 leo"></div>
    </div>
</div>

页脚 css 代码

<!-- 鼠标星星
<script type="text/javascript">
    if (screen && screen.width > 860) {
        document.write('<script type="text/javascript" src="https://blog-static.cnblogs.com/files/vivin-echo/cursor-effects.js"><\/script>');
    }
</script> -->

<!-- 鼠标粒子吸附 -->
<script id="c_n_script" src="https://blog-static.cnblogs.com/files/hxun/canvas-nest.js" 
    color="0,0,0"
    opacity="1" 
    count="500" 
    zindex="-1"> 
</script>

<!-- 浏览器标题切换-->
<div style = "display:none;" > </div>
<script>  
var OriginTitile = document.title;    // 保存之前页面标题  
var titleTime;  
document.addEventListener('visibilitychange', function(){  
    if (document.hidden){  
        document.title ='你不要我了么？qwq';  // 切出文字
        clearTimeout(titleTime);  
    }else{  
        document.title = '欢迎回来～';  // 切入文字
        titleTime = setTimeout(function() {document.title = OriginTitile;}, 1000); // 2秒后恢复原标题  
    }  
});  
</script>

<!-- 浏览器标题图片 -->
<script type="text/javascript" language="javascript">
　　var linkObject = document.createElement('link');
　　linkObject.rel = "shortcut icon";
　　linkObject.href = "https://files.cnblogs.com/files/ECJTUACM-873284962/favicon.ico";
　　document.getElementsByTagName("head")[0].appendChild(linkObject);
</script>

<!-- 鼠标特效烟花 -->
 <script src="https://blog-static.cnblogs.com/files/yjlblog/cursor-effects.js"></script>
 <canvas width="1366" height="662" style="position: fixed; left: 0px; top: 0px; z-index: 2147483647; pointer-events: none;"></canvas>

<!-- 樱花特效 -->
<script type="text/javascript">
    for(var i=1; i<=10; i++){$.getScript("https://files.cnblogs.com/files/blogs/710456/yinghua.js?t=1647783220");}
</script>

<!-- 小鱼-->
<div id="jsi-flying-fish-container" class="container" style="background-color:#F5f5f5"></div>
<script src='https://blog-static.cnblogs.com/files/yiyuzi/myfish.js'></script>
<style>
  @media only screen and (max-width: 767px){
  #sidebar_search_box input[type=text]{width:calc(100%-24px);   }}
  #jsi-flying-fish-container{
    opacity: 0.1;
    position:fixed;
    width: 100%;
    height: 10%;
	bottom: 0;
  }
</style>

<!-- 主题配置 -->
<script src="https://guangzan.gitee.io/awescnb/index.js"></script>
<script>
    const opts = {
    // 基本配置
    theme: {
        name: 'geek',
        color: '#87CEFA',
        avatar: 'https://pic.cnblogs.com/avatar/3230110/20230627230530.png',
        headerBackground: 'http://www.98qy.com/sjbz/api.php',
    },
    // 文章目录
    catalog: {enable: true,},
    // 博文签名
    postSignature: {
        enable: false,
        enableLicense: false,
    },
    // 右下角按钮组
    tools: {
        enable: true,
        initialOpen: true,
    },
    // live2d模型
    live2d: {
        enable: true,
        page: 'all',
        agent: 'pc',
        model: 'haru-02',
        width: 250,
        height: 630,
        position: 'left',
        gap: '0px',
    },
    // 暗色模式
    darkMode: {enable: true,},
    github: {enable: false,},
    // 个性签名
    signature: {
        enable: true,
        contents: [
            "<b style='color:#87CEFA'>Welcome to Liukejie's blog🎉</b>",
        ],
    },
    // 背景图片或颜色
    bodyBackground: {
        enable: true,
        value: 'http://www.98qy.com/sjbz/api.php',
        opacity: 0.8,
    },
    // 评论输入框表情
    emoji: {
        enable: true,
        buttonIcon: "🥳",
        emojiList: [
            {value:"🥳",},
            {value:"😀",},
            {value:"😃",},
            {value:"😄",},
            {value:"😁",},
            {value:"😆",},
            {value:"😅",},
            {value:"🤣",},
            {value:"😂",},
            {value:"🙂",},
            {value:"🙃",},
            {value:"😉",},
            {value:"😊",},
            {value:"😇",},
            {value:"🥰",},
            {value:"😍",},
            {value:"🤩",},
            {value:"😘",},
            {value:"😗",},
            {value:"😚",},
            {value:"😙",},
            {value:"😋",},
            {value:"😛",},
            {value:"😜",},
            {value:"🤪",},
            {value:"😝",},
            {value:"🤑",},
            {value:"🤗",},
            {value:"🤭",},
            {value:"🤫",},
            {value:"🤔",},
            {value:"🤐",},
            {value:"🤨",},
            {value:"😐",},
            {value:"😑",},
            {value:"😶",},
            {value:"😶‍🌫️",},
            {value:"😏",},
            {value:"😒",},
            {value:"🙄",},
            {value:"😬",},
            {value:"😮‍💨",},
            {value:"🤥",},
            {value:"😌",},
            {value:"😔",},
            {value:"😪",},
            {value:"🤤",},
            {value:"😴",},
            {value:"😷",},
            {value:"🤒",},
            {value:"🤕",},
            {value:"🤢",},
            {value:"🤮",},
            {value:"🤧",},
            {value:"🥵",},
            {value:"🥶",},
            {value:"🥴",},
            {value:"😵",},
            {value:"😵‍💫",},
            {value:"🤯",},
            {value:"🤠",},
            {value:"🥳",},
            {value:"😎",},
            {value:"🤓",},
            {value:"🧐",},
            {value:"😕",},
            {value:"😟",},
            {value:"🙁",},
            {value:"☹",},
            {value:"😮",},
            {value:"😯",},
            {value:"😲",},
            {value:"😳",},
            {value:"🥺",},
            {value:"😦",},
            {value:"😧",},
            {value:"😨",},
            {value:"😰",},
            {value:"😥",},
            {value:"😢",},
            {value:"😭",},
            {value:"😱",},
            {value:"😖",},
            {value:"😣",},
            {value:"😞",},
            {value:"😓",},
            {value:"😩",},
            {value:"😫",},
            {value:"🥱",},
            {value:"😤",},
            {value:"😡",},
            {value:"😠",},
            {value:"🤬",},
            {value:"😈",},
            {value:"👿",},
            {value:"💀",},
            {value:"☠",},
            {value:"💩",},
            {value:"🤡",},
            {value:"👹",},
            {value:"👺",},
            {value:"👻",},
            {value:"👽",},
            {value:"👾",},
            {value:"🤖",},
            {value:"😺",},
            {value:"😸",},
            {value:"😹",},
            {value:"😻",},
            {value:"😼",},
            {value:"😽",},
            {value:"🙀",},
            {value:"😿",},
            {value:"😾",},
            {value:"🙈",},
            {value:"🙉",},
            {value:"🙊",},
        ]
    },
}
$.awesCnb(opts)
</script>