子比主题-全套实用美化代码-闲云笔记

简介

本合集针对WordPress 子比主题整理海量纯代码美化方案，无需额外插件，涵盖界面样式、图标、布局、按钮、弹窗、列表、滚动、角标、侧边栏、评论区、移动端适配等常用美化功能。代码轻量兼容主流子比版本，可按需单独启用 / 关闭，上手简单，一键粘贴即可改造站点视觉效果，兼顾颜值与访问性能。

代码部署

通用部署规则（统一参照）

CSS 代码：后台 → 子比主题设置 → 自定义代码 → 自定义 CSS 样式，粘贴保存
JS 代码：后台 → 子比主题设置 → 自定义代码 → 自定义 javascript 代码，粘贴保存
HTML / 小工具代码：后台 → 外观 → 小工具 → 添加【自定义 HTML】组件，粘贴代码并保存
无特殊说明时，均按以上规则部署，不再重复标注位置

1.文章列表左上角三个点美化css

/*文章列表左上角MAC边框美化 */
.posts-item.card:last-child {
    margin-bottom: 8px !important;
}

.training-camp__wrapper .header__title-wrapper {
    font-size: 16px;
}

.sec-wrapper {
    margin-bottom: 10px;
}

.training-camp__wrapper .header__title-wrapper {
    color: #22ab80;
}

.training-camp__wrapper {
    background-image: linear-gradient(150deg, #cff0fb 20%, #cbf4e4 40%);
    padding: 0 12px 12px;
    border-radius: 16px;
}

button.button---AUM5ZP.text---pn4pHz.medium---OGt5iw.header__btn {
    background: #ffffff00;
    border: 1px solid #fc3c2d00;
    border-radius: 0px;
}

.training-camp__wrapper .training-camp__header {
    padding: 24px 0 24px 12px;
    display: -webkit-flex;
    display: flex;
    background: url(/pic/kuangwenlu.png) 100% 0/433px 126px no-repeat;
}

.training-camp__wrapper .header__title-wrapper {
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
}

.training-camp__wrapper .title__img-wrapper {
    height: 20px;
}

.training-camp__wrapper .header__btn-wrapper {
    margin-left: auto;
    display: -webkit-flex;
    display: flex;
}

.training-camp__wrapper .header__btn-wrapper button[class*=button---] {
    height: 20px;
    line-height: 20px;
    padding: 0 12px;
}

.training-camp__wrapper .header__btn {
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    font-size: 14px;
    color: #22ab80;
}

.medium---OGt5iw {
    height: 36px;
    padding: 8px 24px;
    font-size: 14px;
}

.outlined---BKvHAe,
.text---pn4pHz {
    background-color: initial;
    color: #3e454d;
}

.button---AUM5ZP {
    position: relative;
    display: inline-block;
    height: 36px;
    padding: 8px 24px;
    border-radius: 22px;
    cursor: pointer;
    border: unset;
    font-size: 14px;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
}

.ke-icon---zeGrGg+i {
    display: inline-block;
    vertical-align: middle;
}

.training-camp__wrapper>div.sec-bd {
    background-color: var(--body-bg-color);

}

.sec-wrapper .sec-bd {
    position: relative;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;

}

.training-camp__wrapper .sec-bd {
    padding: 12px;
    border-radius: 16px;
}

img.title-macyingyong {
    /* width: 120px; */
    height: 50px;
}

.posts-item.card {
    padding: 35px 10px 10px 10px !important;
}

.posts-item {
    position: relative !important;
}

.posts-item.card::before {
    content: "";
    display: block;
    background: #fc625d;
    top: 13px;
    left: 15px;
    border-radius: 50%;
    width: 9px;
    height: 9px;
    box-shadow: 16px 0 #fdbc40, 32px 0 #35cd4b;
    margin: 0px 2px -7px;
    z-index: 1;
    position: absolute;
}

2.底部加群美化css

/*底部板块三图片border*/
.footer-miniimg p {

  position: relative;

}

.footer-miniimg p:hover {

  filter: contrast(1.1);

}

.footer-miniimg p:active {

  filter: contrast(0.9);

}

.footer-miniimg p::before,

.footer-miniimg p::after {

  content: "";

  border: 2px solid;

  border-image: linear-gradient(45deg, gold, deeppink) 1;

  position: absolute;

  top: -5px;

  left: -5px;

  right: -5px;

  bottom: -5px;

  animation: clippath 3s infinite;

}

.footer-miniimg p::before {

  animation: clippath 3s infinite -1.5s linear;

}

@keyframes clippath {

  0%,

  100% {

    clip-path: inset(0 0 96% 0);

    filter: hue-rotate(0deg);

  }

  25% {

    clip-path: inset(0 96% 0 0);

  }

  50% {

    clip-path: inset(96% 0 0 0);

    filter: hue-rotate(360deg);

  }

  75% {

    clip-path: inset(0 0 0 96%);

  }

}

3.右键复制美化css

/* 子比主题 - 自定义文字选中样式（无系统边框+蓝色文字+无额外边框） */
::selection {
    background: transparent !important; /* 去除选中时的背景色（无框选视觉） */
    color: #007bff !important; /* 选中文字设为蓝色（可替换#1677ff等子比主题蓝） */
    text-shadow: none !important; /* 去除文字阴影，避免边框感 */
}
::-moz-selection {
    /* 火狐浏览器兼容 */
    background: transparent !important;
    color: #007bff !important;
    text-shadow: none !important;
}

/* 若需禁止特定区域文字被框选，可添加以下类名控制 */
.no-select {
    user-select: none !important; /* 直接禁止文字被选中 */
    -webkit-user-select: none !important;
    -moz-user-select: none !important;
}

4.备案号彩色美化css

/*底部备案炫彩*/
.by-p {

        font-weight: 600;

        color: #8c888b;

        background: -webkit-linear-gradient(45deg, #70f7fe, #fbd7c6, #fdefac, #bfb5dd, #bed5f5);

        background: -moz-linear-gradient(45deg, #70f7fe, #fbd7c6, #fdefac, #bfb5dd, #bed5f5);

        background: -ms-linear-gradient(45deg, #70f7fe, #fbd7c6, #fdefac, #bfb5dd, #bed5f5);

        color: transparent;

        -webkit-background-clip: text;

        animation: ran 20s linear infinite;

    }

    @keyframes ran {

        from {

            background-position: 0;

        }

        to {

            background-position: 2000px 0;

        }

<a href="http://beian.miit.gov.cn/" rel="external nofollow" rel="external nofollow"><span class="by-p">这填写你的备案号</span></a>

5.打字彩色颗美化css

<!--彩色粒子特效-->

(function webpackUniversalModuleDefinition(a, b) {

    if (typeof exports === "object" && typeof module === "object") {

        module.exports = b()

    } else {

        if (typeof define === "function" && define.amd) {

            define([], b)

        } else {

            if (typeof exports === "object") {

                exports["POWERMODE"] = b()

            } else {

                a["POWERMODE"] = b()

            }

        }

    }

})(this, function() {

    return (function(a) {

        var b = {};

 

        function c(e) {

            if (b[e]) {

                return b[e].exports

            }

            var d = b[e] = {

                exports: {},

                id: e,

                loaded: false

            };

            a[e].call(d.exports, d, d.exports, c);

            d.loaded = true;

            return d.exports

        }

        c.m = a;

        c.c = b;

        c.p = "";

        return c(0)

    })([function(c, g, b) {

        var d = document.createElement("canvas");

        d.width = window.innerWidth;

        d.height = window.innerHeight;

        d.style.cssText = "position:fixed;top:0;left:0;pointer-events:none;z-index:999999";

        window.addEventListener("resize", function() {

            d.width = window.innerWidth;

            d.height = window.innerHeight

        });

        document.body.appendChild(d);

        var a = d.getContext("2d");

        var n = [];

        var j = 0;

        var k = 120;

        var f = k;

        var p = false;

        o.shake = true;

 

        function l(r, q) {

            return Math.random() * (q - r) + r

        }

        function m(r) {

            if (o.colorful) {

                var q = l(0, 360);

                return "hsla(" + l(q - 10, q + 10) + ", 100%, " + l(50, 80) + "%, " + 1 + ")"

            } else {

                return window.getComputedStyle(r).color

            }

        }

        function e() {

            var t = document.activeElement;

            var v;

            if (t.tagName === "TEXTAREA" || (t.tagName === "INPUT" && t.getAttribute("type") === "text")) {

                var u = b(1)(t, t.selectionStart);

                v = t.getBoundingClientRect();

                return {

                    x: u.left + v.left,

                    y: u.top + v.top,

                    color: m(t)

                }

            }

            var s = window.getSelection();

            if (s.rangeCount) {

                var q = s.getRangeAt(0);

                var r = q.startContainer;

                if (r.nodeType === document.TEXT_NODE) {

                    r = r.parentNode

                }

                v = q.getBoundingClientRect();

                return {

                    x: v.left,

                    y: v.top,

                    color: m(r)

                }

            }

            return {

                x: 0,

                y: 0,

                color: "transparent"

            }

        }

        function h(q, s, r) {

            return {

                x: q,

                y: s,

                alpha: 1,

                color: r,

                velocity: {

                    x: -1 + Math.random() * 2,

                    y: -3.5 + Math.random() * 2

                }

            }

        }

        function o() {

            var t = e();

6.苹果设备提示弹窗 – 自定义CSS

/* 苹果设备提示弹窗 - 自定义CSS */
.apple-alert {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.9);
    width: 90%;
    max-width: 450px;
    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    z-index: 10000;
    opacity: 0;
    transition: all 0.3s ease-out;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, sans-serif;
    overflow: hidden;
    pointer-events: none;
}

.apple-alert.active {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
    pointer-events: auto;
}

.apple-alert-header {
    background: #1a73e8;
    color: white;
    padding: 22px 24px;
    display: flex;
    align-items: center;
}

.apple-alert-icon {
    font-size: 28px;
    margin-right: 16px;
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.apple-alert-title {
    font-size: 1.3rem;
    font-weight: 600;
}

.apple-alert-content {
    padding: 28px 24px 20px;
    color: #202124;
    line-height: 1.6;
}

.apple-alert-text {
    margin-bottom: 18px;
    font-size: 1.05rem;
}

.apple-alert-actions {
    display: flex;
    flex-direction: column;
    padding: 10px 16px 20px;
}

.apple-alert-btn {
    font-family: inherit;
    font-weight: 600;
    font-size: 0.95rem;
    letter-spacing: 0.015em;
    padding: 14px 16px;
    border-radius: 8px;
    border: none;
    background: none;
    cursor: pointer;
    color: #1a73e8;
    transition: background-color 0.2s;
    text-align: center;
    width: 100%;
    margin-bottom: 12px;
}

.apple-alert-btn:hover {
    background-color: rgba(26, 115, 232, 0.08);
}

.apple-alert-btn:active {
    background-color: rgba(26, 115, 232, 0.16);
}

.apple-alert-btn.primary {
    background-color: #1a73e8;
    color: white;
}

.apple-alert-btn.primary:hover {
    background-color: #0d62c9;
}

.apple-alert-dont-show {
    display: flex;
    align-items: center;
    margin: 0 0 20px 0;
    padding: 12px 16px;
    background: rgba(26, 115, 232, 0.05);
    border-radius: 8px;
    font-size: 0.95rem;
    cursor: pointer;
}

.apple-alert-dont-show input {
    margin-right: 12px;
    width: 18px;
    height: 18px;
    cursor: pointer;
}

.apple-alert-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 9999;
    opacity: 0;
    transition: opacity 0.3s ease-out;
    backdrop-filter: blur(4px);
    pointer-events: none;
}

.apple-alert-backdrop.active {
    opacity: 1;
    pointer-events: auto;
}

7.网站运行时间底部显示

安全运行:<span id=span_dt_dt style="color: #2F889A;"></span>
<script language=javascript>
function show_date_time(){
window.setTimeout("show_date_time()", 1000);
BirthDay=new Date("1/1/2025 1:1:1");
today=new Date();
timeold=(today.getTime()-BirthDay.getTime());
sectimeold=timeold/1000
secondsold=Math.floor(sectimeold);
msPerDay=24*60*60*1000
e_daysold=timeold/msPerDay
daysold=Math.floor(e_daysold);
e_hrsold=(e_daysold-daysold)*24;
hrsold=Math.floor(e_hrsold);
e_minsold=(e_hrsold-hrsold)*60;
minsold=Math.floor((e_hrsold-hrsold)*60);
seconds=Math.floor((e_minsold-minsold)*60);
span_dt_dt.innerHTML='<font style=color:#C40000>'+daysold+'</font> 天 <font style=color:#C40000>'+hrsold+'</font> 时 <font style=color:#C40000>'+minsold+'</font> 分 <font style=color:#C40000>'+seconds+'</font> 秒';
}
show_date_time();
</script>

8.脚页美化

第一版

<style>
.button-container {
  width: 100%;
  margin: 20px 0;
}

.button-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 8px;
  margin-bottom: 10px;
}

.button-first-row {
  width: 100%;
  display: flex;
  justify-content: flex-start;
  gap: 8px;
  margin-bottom: 8px;
}

.github-badge {
  display: flex;
  border-radius: 4px;
  font-size: 12px;
  color: #fff;
  line-height: 15px;
  background-color: #abbac3;
  overflow: hidden;
  text-shadow: none;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  transition: transform 0.2s ease;
}

.github-badge:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}

.github-badge .badge-subject {
  display: inline-block;
  background-color: #ffa500;
  padding: 4px 8px 4px 10px;
  font-weight: 600;
}

.github-badge a {
  display: inline-block;
  padding: 4px 10px;
  text-decoration: none;
  color: #fff !important;
  font-weight: 500;
}

.github-badge .bg-cai {
  background-image: linear-gradient(120deg, #3ca5f6, #a86af9);
}
.github-badge .bg-green {
  background-color: #3bca6e;
}
.github-badge .bg-blue {
  background-color: #007bff;
}
.github-badge .bg-orange {
  background-color: #ff7f50;
}
.github-badge .bg-red {
  background-color: #f55066;
}
.github-badge .bg-fen {
  background-color: #e76dcb;
}
.github-badge .bg-purple {
  background-color: #6a5acd;
}

@media (max-width: 768px) {
  .button-row,
  .button-first-row {
    justify-content: center;
  }
}
</style>

<div class="button-container">
  <div class="button-first-row">
    <div class="github-badge">
      <span class="badge-subject">网站托管于</span>
      <a class="bg-cai" href="(填写地址)aff/CNKVIIGL" rel="external nofollow" target="_blank">
        名称
      </a>
    </div>
    
    <div class="github-badge">
      <span class="badge-subject">网站主题为</span>
      <a class="bg-green" href="(填写地址)" rel="external nofollow" target="_blank">
        子比主题
      </a>
    </div>
  </div>
  
  <div class="button-row">
    
    <div class="github-badge">
      <a class="bg-orange" href="(填写地址)wp-sitemap.xml" rel="external nofollow" target="_blank">
        站点地图
      </a>
    </div>
    
    <div class="github-badge">
      <a class="bg-red" href="(填写地址)?page_id=3" rel="external nofollow" target="_blank">
        隐私声明
      </a>
    </div>
    
    <div class="github-badge">
      <a class="bg-fen" href="(填写地址)agreement" rel="external nofollow" target="_blank">
        用户协议
      </a>
    </div>
    
    <div class="github-badge">
      <a class="bg-purple" href="(填写地址)/267.html" rel="external nofollow" target="_blank">
        关于我们
      </a>
    </div>
  </div>
</div>

第二版

页面&显示–>>底部页脚–>>版块二，直接替换就行可以了！


页面&显示–>>底部页脚–>>版块二，直接替换就行可以了！

<div class="github-badge">
  <span class="badge-subject bg-blue">
     <a href="/" target="_blank">友链申请</a>
  </span>
  <span class="badge-subject bg-brightgreen">
     <a href="/" target="_blank">免责声明</a>
  </span>
  <span class="badge-subject bg-orange">
     <a href="/" target="_blank">用户协议</a>
  </span>
  <span class="badge-subject bg-blueviolet">
     <a href="/" target="_blank">隐私声明</a>
  </span>
</div>

<style>
.github-badge {
  text-align: center;
  margin-bottom: 5px;
}

.badge-subject {
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  list-style: none;
  box-sizing: border-box;
  outline: 0 !important;
  font-family: "lovely", sans-serif;
  display: inline-block;
  border-radius: 4px;
  text-shadow: none;
  font-size: 12px;
  color: #fff;
  line-height: 15px;
  margin-bottom: 5px;
  margin-right: 8px;
  padding: 8px 16px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.badge-subject:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.bg-blue { 
  background-color: #007bff;
}

.bg-brightgreen { 
  background-color: #28a745;
}

.bg-orange { 
  background-color: #fd7e14;
}

.bg-blueviolet { 
  background-color: #6f42c1;
}

.badge-subject a {
  color: #fff !important;
  text-decoration: none;
  display: block;
  width: 100%;
  height: 100%;
}

.badge-subject a:hover {
  color: #fff !important;
}
</style>

9.复制自动带上文章标题和文章链接（JS代码）

document.addEventListener('copy', function(e) {
    const selection = window.getSelection();
    const selectedText = selection.toString();
    
    if (!selectedText) return;

    const postTitle = document.title;
    const postUrl = window.location.href;

    const copyright = '\n\n---\n文章标题：' + postTitle + '\n原文链接：' + postUrl + '\n转载请注明出处。';

    e.clipboardData.setData('text/plain', selectedText + copyright);
    e.preventDefault();
});

10.给你的网站添加帧率显示

后台=>>主题设置=>>自定义代码=>>自定义 javascript 代码，把下面的 js 代码复制粘贴到里面即可。

// FPS 帧开始
$('body').before('<div id="fps" style="z-index:10000;position:fixed;top:3;left:3;font-weight:bold;"></div>');
var showFPS = (function(){ 
    var requestAnimationFrame =  
        window.requestAnimationFrame || 
        window.webkitRequestAnimationFrame || 
        window.mozRequestAnimationFrame ||
        window.oRequestAnimationFrame ||
        window.msRequestAnimationFrame || 
        function(callback) { 
            window.setTimeout(callback, 1000/60); 
        }; 
    var e,pe,pid,fps,last,offset,step,appendFps; 
 
    fps = 0; 
    last = Date.now(); 
    step = function(){ 
        offset = Date.now() - last; 
        fps += 1; 
        if( offset >= 1000 ){ 
        last += offset; 
        appendFps(fps); 
        fps = 0; 
        } 
        requestAnimationFrame( step ); 
    }; 
    appendFps = function(fps){ 
        console.log(fps+'FPS');
        $('#fps').html(fps+'FPS');
    };
    step();
})();
// FPS 帧结束

11.给网站背景添加格子背景

CSS

body::before {
            background-image: linear-gradient(90deg, rgba(60, 10, 30, .04) 3%, transparent 0), linear-gradient(1turn, rgba(60, 10, 30, .04) 3%, transparent 0);
            background-size: 20px 20px;
            background-position: 50%;
            background-repeat: repeat;
}

12.手机左侧菜单添加图片

CSS

/*手机侧边栏背景图片*/
@media (max-width: 767px){
.mobile-navbar.show,.mobile-navbar.left{
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    cursor: pointer;
  background-image:linear-gradient(rgba(255, 255,255,0),rgba(255,255,255, 0.3)),url(https://picshack.net/ib/7Lm5teUTyV.jpg);}
  .mobile-nav-widget .box-body {
    background: var(--muted-border-color) !important;}
}

13.自定义网站字体

@font-face{font-family: "lovely";src: url("字体链接") format("woff2");font-display: swap;}
*{font-family: "lovely"}

14.子比主题搜索框打字粒子特效

<!--彩色粒子特效-->
(function webpackUniversalModuleDefinition(a, b) {
    if (typeof exports === "object" && typeof module === "object") {
        module.exports = b()
    } else {
        if (typeof define === "function" && define.amd) {
            define([], b)
        } else {
            if (typeof exports === "object") {
                exports["POWERMODE"] = b()
            } else {
                a["POWERMODE"] = b()
            }
        }
    }
})(this, function() {
    return (function(a) {
        var b = {};
 
        function c(e) {
            if (b[e]) {
                return b[e].exports
            }
            var d = b[e] = {
                exports: {},
                id: e,
                loaded: false
            };
            a[e].call(d.exports, d, d.exports, c);
            d.loaded = true;
            return d.exports
        }
        c.m = a;
        c.c = b;
        c.p = "";
        return c(0)
    })([function(c, g, b) {
        var d = document.createElement("canvas");
        d.width = window.innerWidth;
        d.height = window.innerHeight;
        d.style.cssText = "position:fixed;top:0;left:0;pointer-events:none;z-index:999999";
        window.addEventListener("resize", function() {
            d.width = window.innerWidth;
            d.height = window.innerHeight
        });
        document.body.appendChild(d);
        var a = d.getContext("2d");
        var n = [];
        var j = 0;
        var k = 120;
        var f = k;
        var p = false;
        o.shake = true;
 
        function l(r, q) {
            return Math.random() * (q - r) + r
        }
        function m(r) {
            if (o.colorful) {
                var q = l(0, 360);
                return "hsla(" + l(q - 10, q + 10) + ", 100%, " + l(50, 80) + "%, " + 1 + ")"
            } else {
                return window.getComputedStyle(r).color
            }
        }
        function e() {
            var t = document.activeElement;
            var v;
            if (t.tagName === "TEXTAREA" || (t.tagName === "INPUT" && t.getAttribute("type") === "text")) {
                var u = b(1)(t, t.selectionStart);
                v = t.getBoundingClientRect();
                return {
                    x: u.left + v.left,
                    y: u.top + v.top,
                    color: m(t)
                }
            }
            var s = window.getSelection();
            if (s.rangeCount) {
                var q = s.getRangeAt(0);
                var r = q.startContainer;
                if (r.nodeType === document.TEXT_NODE) {
                    r = r.parentNode
                }
                v = q.getBoundingClientRect();
                return {
                    x: v.left,
                    y: v.top,
                    color: m(r)
                }
            }
            return {
                x: 0,
                y: 0,
                color: "transparent"
            }
        }
        function h(q, s, r) {
            return {
                x: q,
                y: s,
                alpha: 1,
                color: r,
                velocity: {
                    x: -1 + Math.random() * 2,
                    y: -3.5 + Math.random() * 2
                }
            }
        }
        function o() {
            var t = e();
            var s = 5 + Math.round(Math.random() * 10);
            while (s--) {
                n[j] = h(t.x, t.y, t.color);
                j = (j + 1) % 500
            }
            f = k;
            if (!p) {
                requestAnimationFrame(i)
            }
            if (o.shake) {
                var r = 1 + 2 * Math.random();
                var q = r * (Math.random() > 0.5 ? -1 : 1);
                var u = r * (Math.random() > 0.5 ? -1 : 1);
                document.body.style.marginLeft = q + "px";
                document.body.style.marginTop = u + "px";
                setTimeout(function() {
                    document.body.style.marginLeft = "";
                    document.body.style.marginTop = ""
                }, 75)
            }
        }
        o.colorful = false;
 
        function i() {
            if (f > 0) {
                requestAnimationFrame(i);
                f--;
                p = true
            } else {
                p = false
            }
            a.clearRect(0, 0, d.width, d.height);
            for (var q = 0; q < n.length; ++q) {
                var r = n[q];
                if (r.alpha <= 0.1) {
                    continue
                }
                r.velocity.y += 0.075;
                r.x += r.velocity.x;
                r.y += r.velocity.y;
                r.alpha *= 0.96;
                a.globalAlpha = r.alpha;
                a.fillStyle = r.color;
                a.fillRect(Math.round(r.x - 1.5), Math.round(r.y - 1.5), 3, 3)
            }
        }
        requestAnimationFrame(i);
        c.exports = o
    }, function(b, a) {
        (function() {
            var d = ["direction", "boxSizing", "width", "height", "overflowX", "overflowY", "borderTopWidth", "borderRightWidth", "borderBottomWidth", "borderLeftWidth", "borderStyle", "paddingTop", "paddingRight", "paddingBottom", "paddingLeft", "fontStyle", "fontVariant", "fontWeight", "fontStretch", "fontSize", "fontSizeAdjust", "lineHeight", "fontFamily", "textAlign", "textTransform", "textIndent", "textDecoration", "letterSpacing", "wordSpacing", "tabSize", "MozTabSize"];
            var e = window.mozInnerScreenX != null;
 
            function c(k, l, o) {
                var h = o && o.debug || false;
                if (h) {
                    var i = document.querySelector("#input-textarea-caret-position-mirror-div");
                    if (i) {
                        i.parentNode.removeChild(i)
                    }
                }
                var f = document.createElement("div");
                f.id = "input-textarea-caret-position-mirror-div";
                document.body.appendChild(f);
                var g = f.style;
                var j = window.getComputedStyle ? getComputedStyle(k) : k.currentStyle;
                g.whiteSpace = "pre-wrap";
                if (k.nodeName !== "INPUT") {
                    g.wordWrap = "break-word"
                }
                g.position = "absolute";
                if (!h) {
                    g.visibility = "hidden"
                }
                d.forEach(function(p) {
                    g[p] = j[p]
                });
                if (e) {
                    if (k.scrollHeight > parseInt(j.height)) {
                        g.overflowY = "scroll"
                    }
                } else {
                    g.overflow = "hidden"
                }
                f.textContent = k.value.substring(0, l);
                if (k.nodeName === "INPUT") {
                    f.textContent = f.textContent.replace(/\s/g, "\u00a0")
                }
                var n = document.createElement("span");
                n.textContent = k.value.substring(l) || ".";
                f.appendChild(n);
                var m = {
                    top: n.offsetTop + parseInt(j["borderTopWidth"]),
                    left: n.offsetLeft + parseInt(j["borderLeftWidth"])
                };
                if (h) {
                    n.style.backgroundColor = "#aaa"
                } else {
                    document.body.removeChild(f)
                }
                return m
            }
            if (typeof b != "undefined" && typeof b.exports != "undefined") {
                b.exports = c
            } else {
                window.getCaretCoordinates = c
            }
        }())
    }])
});
POWERMODE.colorful = true;
POWERMODE.shake = false;
document.body.addEventListener("input", POWERMODE);
<!--彩色粒子特效结束-->

文章版权归作者所有，未经允许请勿转载。

THE END