博客主题美化

滚动模糊

在 Argon主题选项 --> 脚本 --> 页头脚本加入下面代码:

<!--滚动模糊--><script>window.addEventListener("scroll", function (e) {  if (window.scrollY > window.innerHeight * 0.3) {    document.querySelector("#content").classList.add("scrolled");  } else {    document.querySelector("#content").classList.remove("scrolled");  }});</script><style>#content.scrolled::before {  filter: blur(13px);  transform: scale(1.02);}#content::before {  transition: filter .3s ease, transform .3s ease !important;  filter: blur(0px);  transform: scale(1.02);}</style>

主题透明

在 Argon主题选项 --> 脚本 --> 页尾脚本加入下面代码:

通过调整 op1、op2、op3、op4 来调整透明度

<script> function hexToRgb(hex,op){let str = hex.slice(1);let arr;if (str.length === 3) arr = str.split('').map(d => parseInt(d.repeat(2), 16));else arr = [parseInt(str.slice(0, 2), 16), parseInt(str.slice(2, 4), 16), parseInt(str.slice(4, 6), 16)];return `rgb(${arr.join(', ')}, ${op})`;}; let themeColorHex = getComputedStyle(document.documentElement).getPropertyValue('--themecolor').trim();let op1 = 0.8let themeColorRgb = hexToRgb(themeColorHex,op1);let themecolorGradient = getComputedStyle(document.documentElement).getPropertyValue('--themecolor-gradient') document.documentElement.style.setProperty('--themecolor-gradient',themeColorRgb)let op2 = 0.8let colorTint92 = getComputedStyle(document.documentElement).getPropertyValue('--color-tint-92').trim();colorTint92 += ', '+op2;document.documentElement.style.setProperty('--color-tint-92',colorTint92) let op3 = 0.8let colorShade90 = getComputedStyle(document.documentElement).getPropertyValue('--color-shade-90').trim();colorShade90 += ', ' + op3;document.documentElement.style.setProperty('--color-shade-90',colorShade90) let op4 = 0.8let colorShade86 = getComputedStyle(document.documentElement).getPropertyValue('--color-shade-86').trim();colorShade86 += ', ' + op4;document.documentElement.style.setProperty('--color-shade-86',colorShade86) </script>

然后在额外 CSS 中加入以下代码(/* 在不改变主题色的前提下,将卡片等事物的背景透明化 */)

/* 在不改变主题色的前提下,将卡片等事物的背景透明化 */#leftbar_announcement {background: var(--themecolor-gradient) !important;}#footer{background: var(--themecolor-gradient) !important}/*  * 页尾脚本: * op1——“白天”状态主题色透明度 * op2——“白天”状态卡片颜色透明度 * op3——“夜间”状态卡片颜色透明度 * op4——“夜间”状态主题色透明度 *  */

顶部 Banner (封面)

白云效果

在额外 CSS 中加入以下代码:

/* 白云效果 */.banner-title::before {content: '';position: absolute;top: 0;left: 50%;bottom: 0;right: 0;transform:translatex(-50%);max-width:500px;z-index: -100;background:white;filter: blur(30px);opacity: 0.5;}

这里周围有一团很浅的白白的效果


标题加粗

在额外 CSS 中加入以下代码:

/* 标题加粗 */.banner-title .banner-title-inner{font-size: 35px;    position:relative;background:inherit;}.banner-title{position: absolute;background: #5E72E4;background-size:200%;animation: ColdLight 3s linear infinite;color:transparent !important;-webkit-background-clip: text;font-weight: bold; /* 添加字体加粗属性 */}

副标题彩虹效果

在额外 CSS 中加入以下代码:

/* 副标题彩虹效果 */.banner-subtitle{font-size: 20px;-webkit-text-fill-color: transparent;background: linear-gradient(94.75deg,rgb(60, 172, 247) 0%,rgb(131, 101, 253) 43.66%, rgb(255, 141, 112) 64.23%,rgb(247, 201, 102) 83.76%,rgb(172, 143, 100) 100%);-webkit-background-clip: text;}

Banner 动态箭头

  1. 在后台外观 –> 主题文件编辑器 处找到主题页眉(header.php 文件)
  2. 在第 439 行找到:<div class="cover-scroll-down">将这个 div 代码块中的内容(也就是原本的 <i> 标签 )用下面的代码替换:<i class="fa fa-angle-down" aria-hidden="true" id="pointer1"></i><i class="fa fa-angle-down" aria-hidden="true" id="pointer2"></i><i class="fa fa-angle-down" aria-hidden="true" id="pointer3"></i>

然后在额外 CSS 中加入以下代码:

/*========Banner动态箭头===========*/@keyframes up-down-move {0% {opacity:0;transform:translate(-50%,-150px); }50% {opacity:1;transform:translate(-50%,-130px); }100% {opacity:0;transform:translate(-50%,-110px); }}.cover-scroll-down .fa-angle-down{font-size: 3rem;text-shadow: 0px 0px 8px #dc1111;position:absolute;transform: translate(-50%,-80px);opacity:0;}.cover-scroll-down #pointer1{animation: up-down-move 3s linear infinite;}.cover-scroll-down #pointer2{animation: up-down-move 3s 1s linear infinite;}.cover-scroll-down #pointer3{animation: up-down-move 3s 2s linear infinite;}

顶栏图标

在额外 CSS 中加入以下代码:

/*顶栏图标*/.navbar-brand {    font-family: 'Noto Serif SC',serif;    font-size: 1.25rem;    /*顶栏图标边界微调*/    margin-right: -3rem; /*左右偏移*/    padding-bottom: 0.3rem;}.navbar-brand img {   /* 图片高度*/    height: 35px;}

左侧作者栏

作者名称

在额外 CSS 中加入以下代码:

/* 作者名称 */#leftbar_overview_author_name {margin-top: 15px;font-size: 18px;align-content;color:#FFA500;/* color:#FA92B5; */}

作者名称自动缩放

在额外 CSS 中加入以下代码:

/* 作者名称自动缩放 */#leftbar_overview_author_name {    background-position: center;    background-repeat: no-repeat;    background-size: cover;    overflow: hidden;    transition: transform 0.3s ease; /*变化速度*/}#leftbar_overview_author_name:hover {    transform: scale(1.2); /*缩放大小*/    filter: brightness(110%); /*调节亮度*/}

简介

在额外 CSS 中加入以下代码:

/* 简介 */#leftbar_overview_author_description {font-size: 14px;margin-top: -4px;opacity: 0.8;color:#7E79E2;}

站点概览分隔线颜色修改

在额外 CSS 中加入以下代码:

/*站点概览分隔线颜色修改*/.site-state-item{    border-left: 1px solid #aaa;}.site-friend-links-title {    border-top: 1px dotted #aaa;}#leftbar_tab_tools ul li {    padding-top: 3px;    padding-bottom: 3px;    border-bottom:none;}html.darkmode #leftbar_tab_tools ul li {    border-bottom:none;}

头像自动缩放、高亮 / 暗

在额外 CSS 中加入以下代码:

/* 头像自动缩放、高亮 / 暗 */#leftbar_overview_author_image {    width: 100px;    height: 100px;    margin: auto;    background-position: center;    background-repeat: no-repeat;    background-size: cover;    background-color: rgba(127, 127, 127, 0.1);    overflow: hidden;    box-shadow: 0 0 5px rgba(116, 8, 204, 0.3);    transition: transform 0.3s ease; /*变化速度*/}#leftbar_overview_author_image:hover {    transform: scale(1.2); /*缩放大小*/    filter: brightness(110%); /*调节亮度*/}

鼠标悬停在上面的时候头像会变大,会变亮


点击头像 / 名称跳转相关页

在后台外观 –> 主题文件编辑器 处找到边栏 (sidebar.php) 文件

  1. 点击头像跳转相关链接大约在 127 行,把 <a> 标签 里的 url 换成自己的 url<a href="https://pidanxia.ink/superman/">
  2. 点击名称跳转相关链接大约在 129 行,把 <a> 标签 里的 url 换成自己的 url<a href="https://pidanxia.ink/superman/">

页脚内容

打开 Argon主题选项下拉到页脚

填入下面代码:

   <div class="github-badge-big">        <span class="badge-subject"><i class="fa fa-id-card"></i> 备案号 </span>        <span class="badge-value bg-orange">            <!-- 备案链接 -->            <a href="https://beian.miit.gov.cn/" target="_blank" one-link-mark="yes">  这里填写备案号  </a>    </div>     <!-- 联系我 -->    <div class="github-badge-big">        <span class="badge-subject"><i class="fa fa-envelope-o" aria-hidden="true"></i> 联系我 </span>        <span class="badge-value bg-red">  这里填写邮箱  </i>         </span>        </script>    </div>     <!-- 运行时间 -->    <div class="github-badge-big">        <span class="badge-subject"><i class="fa fa-clock-o"></i> Running Time</span><span            class="badge-value bg-apricots"><span id="blog_running_days" class="odometer odometer-auto-theme"></span>            天            <span id="blog_running_hours" class="odometer odometer-auto-theme"></span> 小时            <span id="blog_running_mins" class="odometer odometer-auto-theme"></span> 分钟            <span id="blog_running_secs" class="odometer odometer-auto-theme"></span>秒        </span>    </div>   <style>/* 核心样式 */.github-badge {display: inline-block;border-radius: 4px;text-shadow: none;font-size: 13.1px;color: #fff;line-height: 15px;margin-bottom: 5px;font-family: "Open Sans", sans-serif;}.github-badge .badge-subject {display: inline-block;background-color: #4d4d4d;padding: 4px 4px 4px 6px;border-top-left-radius: 4px;border-bottom-left-radius: 4px;font-family: "Open Sans", sans-serif;}.github-badge .badge-value {display: inline-block;padding: 4px 6px 4px 4px;border-top-right-radius: 4px;border-bottom-right-radius: 4px;font-family: "Open Sans", sans-serif;}.github-badge-big {display: inline-block;border-radius: 6px;text-shadow: none;font-size: 14.1px;color: #fff;line-height: 18px;margin-bottom: 7px;}.github-badge-big .badge-subject {display: inline-block;background-color: #4d4d4d;padding: 4px 4px 4px 6px;border-top-left-radius: 4px;border-bottom-left-radius: 4px;}.github-badge-big .badge-value {display: inline-block;padding: 4px 6px 4px 4px;border-top-right-radius: 4px;border-bottom-right-radius: 4px;}.bg-orange {background-color: #ec8a64 !important;}.bg-red {background-color: #cb7574 !important;}.bg-apricots {background-color: #f7c280 !important;}.bg-casein {background-color: #dfe291 !important;}.bg-shallots {background-color: #97c3c6 !important;}.bg-ogling {background-color: #95c7e0 !important;}.bg-haze {background-color: #9aaec7 !important;}.bg-mountain-terrier {background-color: #99a5cd !important;}</style> <script no-pjax="">var blog_running_days = document.getElementById("blog_running_days");var blog_running_hours = document.getElementById("blog_running_hours");var blog_running_mins = document.getElementById("blog_running_mins");var blog_running_secs = document.getElementById("blog_running_secs");function refresh_blog_running_time() {var time = new Date() - new Date(2023, 4, 29, 0, 0, 0); /*此处日期的月份改为自己真正月份的前一个月*/var d = parseInt(time / 24 / 60 / 60 / 1000);var h = parseInt((time % (24 * 60 * 60 * 1000)) / 60 / 60 / 1000);var m = parseInt((time % (60 * 60 * 1000)) / 60 / 1000);var s = parseInt((time % (60 * 1000)) / 1000);blog_running_days.innerHTML = d;blog_running_hours.innerHTML = h;blog_running_mins.innerHTML = m;blog_running_secs.innerHTML = s;}refresh_blog_running_time();if (typeof bottomTimeIntervalHasSet == "undefined") {var bottomTimeIntervalHasSet = true;setInterval(function () {refresh_blog_running_time();}, 500);}</script>

正文内容

正文表格样式修改

在额外 CSS 中加入以下代码:

/*正文表格样式修改*/article table > tbody > tr > td,article table > tbody > tr > th,article table > tfoot > tr > td,article table > tfoot > tr > th,article table > thead > tr > td,article table > thead > tr > th{    padding: 8px 10px;    border: 1px solid;}/*表格居中样式*/.wp-block-table.aligncenter{margin:10px auto;}
  1. 修改了表格线条的颜色
  2. 修改了表格居中样式

引文属性设置

在额外 CSS 中加入以下代码:

/*引文属性设置*/blockquote {    /*添加弱主题色为背景色*/    background: rgba(var(--themecolor-rgbstr), 0.13) !important;    width: 100%}/*引文颜色 建议用主题色*/:root {    /*也可以用类似于--color-border-on-foreground-deeper: #009688;这样的命令*/    --color-border-on-foreground-deeper: rgba(var(--themecolor-rgbstr));}

blockquote:修改的是背景颜色

:root:修改了左边那一竖的颜色


网站黑白色(悼念)

在额外 CSS 中加入以下代码:

需要在额外 CSS 的最底部(否则容易和其它 CSS 代码冲突)

/*网站黑白色(悼念)*//* 需要在额外CSS的最底部(否则容易和其它CSS代码冲突) *//* html {    filter: grayscale(100%);    -webkit-filter: grayscale(100%);    -moz-filter: grayscale(100%);    -ms-filter: grayscale(100%);    -o-filter: grayscale(100%);    filter: url("data:image/svg+xml;utf8,#grayscale");    filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);    -webkit-filter: grayscale(1);} */

额外 CSS 汇总

/* 在不改变主题色的前提下,将卡片等事物的背景透明化 */#leftbar_announcement {background: var(--themecolor-gradient) !important;}#footer{background: var(--themecolor-gradient) !important}/*  * 页尾脚本: * op1——“白天”状态主题色透明度 * op2——“白天”状态卡片颜色透明度 * op3——“夜间”状态卡片颜色透明度 * op4——“夜间”状态主题色透明度 *  */  /* 顶部 Banner (封面)开始 *//* 白云效果 */.banner-title::before {content: '';position: absolute;top: 0;left: 50%;bottom: 0;right: 0;transform:translatex(-50%);max-width:500px;z-index: -100;background:white;filter: blur(30px);opacity: 0.5;}/* 标题加粗 */.banner-title .banner-title-inner{font-size: 35px;    position:relative;background:inherit;}.banner-title{position: absolute;background: #5E72E4;background-size:200%;animation: ColdLight 3s linear infinite;color:transparent !important;-webkit-background-clip: text;font-weight: bold; /* 添加字体加粗属性 */}/* 副标题彩虹效果 */.banner-subtitle{font-size: 20px;-webkit-text-fill-color: transparent;background: linear-gradient(94.75deg,rgb(60, 172, 247) 0%,rgb(131, 101, 253) 43.66%, rgb(255, 141, 112) 64.23%,rgb(247, 201, 102) 83.76%,rgb(172, 143, 100) 100%);-webkit-background-clip: text;} /*========Banner动态箭头===========*/@keyframes up-down-move {0% {opacity:0;transform:translate(-50%,-150px); }50% {opacity:1;transform:translate(-50%,-130px); }100% {opacity:0;transform:translate(-50%,-110px); }}.cover-scroll-down .fa-angle-down{font-size: 3rem;text-shadow: 0px 0px 8px #dc1111;position:absolute;transform: translate(-50%,-80px);opacity:0;}.cover-scroll-down #pointer1{animation: up-down-move 3s linear infinite;}.cover-scroll-down #pointer2{animation: up-down-move 3s 1s linear infinite;}.cover-scroll-down #pointer3{animation: up-down-move 3s 2s linear infinite;}/* 顶部 Banner (封面)结束 */  /*顶栏图标*/.navbar-brand {    font-family: 'Noto Serif SC',serif;    font-size: 1.25rem;    /*顶栏图标边界微调*/    margin-right: -3rem; /*左右偏移*/    padding-bottom: 0.3rem;}.navbar-brand img {   /* 图片高度*/    height: 35px;}  /* 左侧作者栏开始 *//* 作者名称 */#leftbar_overview_author_name {margin-top: 15px;font-size: 18px;align-content;color:#FFA500;/* color:#FA92B5; */} /* 简介 */#leftbar_overview_author_description {font-size: 14px;margin-top: -4px;opacity: 0.8;color:#7E79E2;} /* 标题,链接等 *//* a, .btn-neutral {color:#AF7AC5;} */ /*站点概览分隔线颜色修改*/.site-state-item{    border-left: 1px solid #aaa;}.site-friend-links-title {    border-top: 1px dotted #aaa;}#leftbar_tab_tools ul li {    padding-top: 3px;    padding-bottom: 3px;    border-bottom:none;}html.darkmode #leftbar_tab_tools ul li {    border-bottom:none;} /* 头像自动缩放、高亮 / 暗 */#leftbar_overview_author_image {    width: 100px;    height: 100px;    margin: auto;    background-position: center;    background-repeat: no-repeat;    background-size: cover;    background-color: rgba(127, 127, 127, 0.1);    overflow: hidden;    box-shadow: 0 0 5px rgba(116, 8, 204, 0.3);    transition: transform 0.3s ease; /*变化速度*/}#leftbar_overview_author_image:hover {    transform: scale(1.2); /*缩放大小*/    filter: brightness(110%); /*调节亮度*/}/* 左侧作者栏结束 */  /*正文表格样式修改*/article table > tbody > tr > td,article table > tbody > tr > th,article table > tfoot > tr > td,article table > tfoot > tr > th,article table > thead > tr > td,article table > thead > tr > th{    padding: 8px 10px;    border: 1px solid;}/*表格居中样式*/.wp-block-table.aligncenter{margin:10px auto;} /*引文属性设置*/blockquote {    /*添加弱主题色为背景色*/    background: rgba(var(--themecolor-rgbstr), 0.13) !important;    width: 100%}/*引文颜色 建议用主题色*/:root {    /*也可以用类似于--color-border-on-foreground-deeper: #009688;这样的命令*/    --color-border-on-foreground-deeper: rgba(var(--themecolor-rgbstr));} /*网站黑白色(悼念)*//* 需要在额外CSS的最底部(否则容易和其它CSS代码冲突) *//* html {    filter: grayscale(100%);    -webkit-filter: grayscale(100%);    -moz-filter: grayscale(100%);    -ms-filter: grayscale(100%);    -o-filter: grayscale(100%);    filter: url("data:image/svg+xml;utf8,#grayscale");    filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);    -webkit-filter: grayscale(1);} */

引文颜色修改项中,需要在主题文件编译器的样式表(stytle.css)中的第 141 行,注释掉 --color-border-on-foreground-deeper 这一行

html.immersion-color body {    --color-background: rgb(var(--color-tint-86));    --color-foreground: rgb(var(--color-tint-92));    --color-widgets: rgb(var(--color-tint-95));    --color-widgets-disabled: rgb(var(--color-tint-86));    --color-border: rgb(var(--color-tint-78));    --color-border-on-foreground: rgb(var(--color-tint-86));/*  --color-border-on-foreground-deeper: rgb(var(--color-tint-80)); */    --color-text-deeper: rgb(var(--color-shade-82));    --color-selection: rgb(var(--color-tint-70));}

春节灯笼挂件

在 footer.php文件的 </body> 标签前加入下列 HTML 代码:

<!--春节灯笼开始--><link href="https://cdn.jsdelivr.net/gh/huangwb8/bloghelper@latest/css/deng.css" rel="stylesheet"><div class="deng-box"><div class="deng"><div class="xian"></div><div class="deng-a"><div class="deng-b"><div class="deng-t">春节</div></div></div><div class="shui shui-a"><div class="shui-c"></div><div class="shui-b"></div></div></div></div> <div class="deng-box1"><div class="deng"><div class="xian"></div><div class="deng-a"><div class="deng-b"><div class="deng-t">快乐</div></div></div><div class="shui shui-a"><div class="shui-c"></div><div class="shui-b"></div></div></div></div><!--春节灯笼结束-->

鼠标移动的仙女棒特效

编辑 footer.php 文件。还是刚刚那个界面。在末尾 </body> 上方(这样可以最后加载特效,以免影响其他内容的访问速度),添加以下代码

需要用哪个特效就开放哪个特效的代码

<!--全页特效开始--><script src="https://cdn.jsdelivr.net/gh/huangwb8/bloghelper@latest/js/mobile-detect.js"></script><script type="text/javascript">    // 设备检测    var md = new MobileDetect(window.navigator.userAgent);     // PC生效,手机/平板不生效    // md.mobile(); md.phone();     if(!md.phone()){        if(!md.tablet()){                // 鼠标移动的仙女棒特效。                $.getScript("https://cdn.jsdelivr.net/gh/huangwb8/bloghelper@latest/mouse/halo-dream/fairyDustCursor.min.js");                // 雪花                // $.getScript("https://cdn.jsdelivr.net/gh/huangwb8/bloghelper@latest/js/xiaxue.js");                 // 樱花                // $.getScript("https://cdn.jsdelivr.net/gh/huangwb8/bloghelper@latest/js/yinghua.js");                 // 小烟花特效                // $.getScript("https://cdn.jsdelivr.net/gh/huangwb8/bloghelper@latest/js/mouse-click.js");                 // 大烟花特效                $.getScript("https://cdn.jsdelivr.net/gh/huangwb8/bloghelper@latest/mouse/mouse-click-02/mouse-canvas.js");                document.write('<style>#mouse-canvas {z-index:217483647; pointer-events: none;  box-sizing: border-box !important; display: block !important; position: fixed !important; left: 0; right: 0; top: 0; bottom: 0; width: 100%; height: 100vh;}</style>')        }       }</script><!--全页特效结束--> 

移动鼠标会有星星拖尾效果


鼠标外观

鼠标外观在 footer.php 里加入这个代码即可:

<!--鼠标指针特效2 开始--><style type="text/css">.main-content img,body{cursor:url(https://cdn.jsdelivr.net/gh/huangwb8/bloghelper@latest/mouse/halo-dream/cursor/breeze/Arrow.cur),auto}.actions>div,.expand-done,.main-content figure>figcaption div,.navbar-above .navbar-nav .item,.navbar-searchicon,.navbar-slideicon,.photos .picture-details,.widget .ad-tag .click-close,a,button{cursor:url(https://cdn.jsdelivr.net/gh/huangwb8/bloghelper@latest/mouse/halo-dream/cursor/breeze/Hand.cur),auto}blockquote,code,h1,h2,h3,h4,h5,h6,hr,input[type=text],li,p,td,textarea,th{cursor:url(https://cdn.jsdelivr.net/gh/huangwb8/bloghelper@latest/mouse/halo-dream/cursor/breeze/IBeam.cur),auto}</style><!--鼠标指针特效2 结束-->

鼠标文字特效

和雪花特效是一样的用法。在末尾 </body> 上方加入。当然 a 变量中的文字就自定义了!你可以改成自己喜欢的文字。

<!--鼠标特效开始--><script type="text/javascript">var a_idx = 0;jQuery(document).ready(function($) {   $("body").click(function(e) {       var a = new Array("富强", "民主", "文明", "和谐", "自由", "平等", "公正", "法治", "爱国", "敬业", "诚信", "友善");       var $i = $("<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": "#ff6651"       });       $("body").append($i);       $i.animate({           "top": y - 180,           "opacity": 0       },       1500,       function() {           $i.remove();       });   });});</script><!--鼠标特效结束-->

鼠标点击会出现相应的文字


文字输入撒花特效

在末尾 </body> 上方加入代码:

<!--网站输入效果开始--><script src="https://cdn.jsdelivr.net/gh/huangwb8/bloghelper@latest/js/input-with-fire.js"></script>

打字会有撒花特效


footer.php 汇总

在末尾 </body> 上方加入代码:

…… <!--全页特效开始--><script src="https://cdn.jsdelivr.net/gh/huangwb8/bloghelper@latest/js/mobile-detect.js"></script><script type="text/javascript">    // 设备检测    var md = new MobileDetect(window.navigator.userAgent);     // PC生效,手机/平板不生效    // md.mobile(); md.phone();     if(!md.phone()){        if(!md.tablet()){                // 鼠标移动的仙女棒特效。                $.getScript("https://cdn.jsdelivr.net/gh/huangwb8/bloghelper@latest/mouse/halo-dream/fairyDustCursor.min.js");        }       }</script><!--全页特效结束--> <!--网站输入效果开始--><script src="https://cdn.jsdelivr.net/gh/huangwb8/bloghelper@latest/js/input-with-fire.js"></script> <!--鼠标特效开始--><!-- <script type="text/javascript">var a_idx = 0;jQuery(document).ready(function($) {   $("body").click(function(e) {       var a = new Array("富强", "民主", "文明", "和谐", "自由", "平等", "公正", "法治", "爱国", "敬业", "诚信", "友善");       var $i = $("<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": "#ff6651"       });       $("body").append($i);       $i.animate({           "top": y - 180,           "opacity": 0       },       1500,       function() {           $i.remove();       });   });});</script> --><!--鼠标特效结束--> <!--鼠标指针特效2 开始--><style type="text/css">.main-content img,body{cursor:url(https://cdn.jsdelivr.net/gh/huangwb8/bloghelper@latest/mouse/halo-dream/cursor/breeze/Arrow.cur),auto}.actions>div,.expand-done,.main-content figure>figcaption div,.navbar-above .navbar-nav .item,.navbar-searchicon,.navbar-slideicon,.photos .picture-details,.widget .ad-tag .click-close,a,button{cursor:url(https://cdn.jsdelivr.net/gh/huangwb8/bloghelper@latest/mouse/halo-dream/cursor/breeze/Hand.cur),auto}blockquote,code,h1,h2,h3,h4,h5,h6,hr,input[type=text],li,p,td,textarea,th{cursor:url(https://cdn.jsdelivr.net/gh/huangwb8/bloghelper@latest/mouse/halo-dream/cursor/breeze/IBeam.cur),auto}</style><!--鼠标指针特效2 结束--> <!--春节灯笼开始--><!-- <link href="https://cdn.jsdelivr.net/gh/huangwb8/bloghelper@latest/css/deng.css" rel="stylesheet"><div class="deng-box"><div class="deng"><div class="xian"></div><div class="deng-a"><div class="deng-b"><div class="deng-t">春节</div></div></div><div class="shui shui-a"><div class="shui-c"></div><div class="shui-b"></div></div></div></div> <div class="deng-box1"><div class="deng"><div class="xian"></div><div class="deng-a"><div class="deng-b"><div class="deng-t">快乐</div></div></div><div class="shui shui-a"><div class="shui-c"></div><div class="shui-b"></div></div></div></div> --><!--春节灯笼结束--> </body> ……

相关链接

本文一些代码参考自下面的文章:

Echo:Argon 主题博客美化

Bensz:Docker 系列 WordPress 系列 特效

北冥红烧鱼:Argon 主题美化

博客内容均系原创,未经允许严禁转载!

评论

  1. 1 月前
    2025-10-29 17:27:08

    您好,这是一条评论。若需要审核、编辑或删除评论,请访问仪表盘的评论界面。评论者头像来自 Gravatar

  2. 玉与煜
    Android Chrome
    1 月前
    2025-10-29 21:19:07

    憨憨

发送评论 编辑评论


				
|´・ω・)ノ
ヾ(≧∇≦*)ゝ
(☆ω☆)
(╯‵□′)╯︵┴─┴
 ̄﹃ ̄
(/ω\)
∠( ᐛ 」∠)_
(๑•̀ㅁ•́ฅ)
→_→
୧(๑•̀⌄•́๑)૭
٩(ˊᗜˋ*)و
(ノ°ο°)ノ
(´இ皿இ`)
⌇●﹏●⌇
(ฅ´ω`ฅ)
(╯°A°)╯︵○○○
φ( ̄∇ ̄o)
ヾ(´・ ・`。)ノ"
( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃
(ó﹏ò。)
Σ(っ °Д °;)っ
( ,,´・ω・)ノ"(´っω・`。)
╮(╯▽╰)╭
o(*////▽////*)q
>﹏<
( ๑´•ω•) "(ㆆᴗㆆ)
😂
😀
😅
😊
🙂
🙃
😌
😍
😘
😜
😝
😏
😒
🙄
😳
😡
😔
😫
😱
😭
💩
👻
🙌
🖕
👍
👫
👬
👭
🌚
🌝
🙈
💊
😶
🙏
🍦
🍉
😣
Source: github.com/k4yt3x/flowerhd
颜文字
Emoji
小恐龙
花!
下一篇