子比主题美化教程WP美化集合【已更新8.5】

文章最后更新时间:2025-02-23 06:56:27

  • 分享一共文字效果代码看起来还不错,可以用于网站底部用,喜欢的拿走
  • 代码
<div id="chakhsu"></div>
<script>
    var chakhsu = function (r) {
        function t() {
            return b[Math.floor(Math.random() * b.length)]
        }
        function e() {
            return String.fromCharCode(94 * Math.random() + 33)
        }
        function n(r) {
            for (var n = document.createDocumentFragment(), i = 0; r > i; i++) {
                var l = document.createElement("span");
                l.textContent = e(), l.style.color = t(), n.appendChild(l)
            }
            return n
        }
        function i() {
            var t = o[c.skillI];
            c.step ? c.step-- : (c.step = g, c.prefixP < l.length ? (c.prefixP >= 0 && (c.text += l[c.prefixP]), c.prefixP++) : "forward" === c.direction ? c.skillP < t.length ? (c.text += t[c.skillP], c.skillP++) : c.delay ? c.delay-- : (c.direction = "backward", c.delay = a) : c.skillP > 0 ? (c.text = c.text.slice(0, -1), c.skillP--) : (c.skillI = (c.skillI + 1) % o.length, c.direction = "forward")), r.textContent = c.text, r.appendChild(n(c.prefixP < l.length ? Math.min(s, s + c.prefixP) : Math.min(s, t.length - c.skillP))), setTimeout(i, d)
        }
        /*以下内容自定义修改*/
        var l = "轩逸博客,",
            o = ["XUANYIIDC.CN。", ].map(function (r) {
                return r + ""
            }), a = 2, g = 1, s = 5, d = 75,
            b = ["rgb(110,64,170)", "rgb(150,61,179)", "rgb(191,60,175)", "rgb(228,65,157)", "rgb(254,75,131)", "rgb(255,94,99)", "rgb(255,120,71)", "rgb(251,150,51)", "rgb(226,183,47)", "rgb(198,214,60)", "rgb(175,240,91)", "rgb(127,246,88)", "rgb(82,246,103)", "rgb(48,239,130)", "rgb(29,223,163)", "rgb(26,199,194)", "rgb(35,171,216)", "rgb(54,140,225)", "rgb(76,110,219)", "rgb(96,84,200)"],
            c = {text: "", prefixP: -s, skillI: 0, skillP: 0, direction: "forward", delay: a, step: g};
        i()
    };
    chakhsu(document.getElementById('chakhsu'));
                    </script>
                  <div>

效果看本站首页底部

前言

分享一个网站运行时间代码可以更好的记录网站运行多久精确到秒

代码

<span id="runtime_span"></span>
<script type="text/javascript">function show_runtime(){window.setTimeout("show_runtime()",1000);X=new 
Date("09/30/2020 15:10:00");
Y=new Date();T=(Y.getTime()-X.getTime());M=24*60*60*1000;
a=T/M;A=Math.floor(a);b=(a-A)*24;B=Math.floor(b);c=(b-B)*60;C=Math.floor((b-B)*60);D=Math.floor((c-C)*60);
runtime_span.innerHTML="本站勉强运行: "+A+"天"+B+"小时"+C+"分"+D+"秒"}show_runtime();</script>
  • 后台设置—>外观—>小工具—>添加自定义 HTML 代码,加到合适侧边栏即可
<!--by:轩逸博客-img.buerds.com-->
<div id="he-plugin-standard"></div>
<script>
WIDGET = {
  "CONFIG": {
    "layout": "2",
    "width": "285",
    "height": "300",
    "background": "1",
    "dataColor": "FFFFFF",
    "borderRadius": "5",
    "key": "3180d3c43e524753ab8bcef69dba023a"
  }
}
</script>
<script src="https://widget.qweather.net/standard/static/js/he-standard-common.js?v=2.0"></script>
<!--by:轩逸博客-img.buerds.com-->
  • 网站后台--->外观--->小工具--->自定义HTML,然后添加到合适位置集合即可。
<!--跑马灯公告-->
<style>
  #nr{font-size:20px; margin: 0; background: -webkit-linear-gradient(left, #ffffff, #ff0000 6.25%, #ff7d00 12.5%, #ffff00 18.75%, #00ff00 25%, #00ffff 31.25%, #0000ff 37.5%, #ff00ff 43.75%, #ffff00 50%, #ff0000 56.25%, #ff7d00 62.5%, #ffff00 68.75%, #00ff00 75%, #00ffff 81.25%, #0000ff 87.5%, #ff00ff 93.75%, #ffff00 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-size: 200% 100%; animation: masked-animation 2s infinite linear;} @keyframes masked-animation{0%{background-position: 0 0;} 100%{background-position: -100%, 0;} }
</style>
    <div style="background-color:#333;border-radius:25px;box-shadow:0px 0px 5px #f200ff;padding:5px;margin-bottom:0px;">
        <marquee>
        <b id="nr">欢迎来到轩逸博客 - 专注于网络技术共享。</b> </marquee>
    </div>
  • 效果
子比主题美化教程WP美化集合-轩逸博客
  • CSS代码(本站的样式)
 /** 鼠标样式 开始**/
/** 普通指针样式**/
body{cursor: url(https://a-oss.zmki.cn/img/5ccab616ea9c8.cur), default;}
/** 链接指针样式**/
a:hover{cursor:url(https://a-oss.zmki.cn/img/5ccab63d8fc80.cur), pointer;}
/** 鼠标样式 结束**/

无法截图,效果请参考本站

  • CSS代码:
/*首页文章列表悬停上浮*/
@media screen and (min-width: 980px){.tab-content .posts-item:not(article){transition: all 0.3s;}.tab-content .posts-item:not(article):hover{transform: translateY(-10px); box-shadow: 0 8px 10px rgba(255, 112, 173, 0.35);}}

无法截图,效果请参考本站

  • CSS代码:
/*导航栏字体加粗*/
ul.nav {font-weight: 700;}
  • 效果截图:
子比主题美化教程WP美化集合-轩逸博客

  • 代码:
  • 注意:
    • 是一个简单的CSS代码,若要更换图片请把‘url(https://img.wiiuii.cn/img/20200829145305_5a9ac.jpg)’’更换成“url(自己的图片链接)”即可。
  • wordpress自带的分页按钮是比较丑的很突兀,经过社长一段下面的 CSS 代码优化之后会变得更加美观
  • 网站管理后台 —> 子比主题设置 —> 自定义代码 —> 自定义 CSS 样式,把下面的 css 代码复制粘贴到里面即可。

自定义 CSS 代码

/*文章分页按钮美化*/
.post-page-numbers{padding: 4px 10px;text-align:center;display: inline; }.post-nav-links{background:0;margin-left: -50px;}

无法截图,效果请参考本站

前言和教程

  • 这个代码适合用于纪念重大的沉重事件日子,只需把代码复制粘贴到自定义CSS样式里即可。
/*网站全局变成灰色*/
html{
    -webkit-filter: grayscale(100%);
            filter: grayscale(100%);
}

效果图:

子比主题美化教程WP美化集合-轩逸博客

1 2 3 4

------本页内容已结束,喜欢请分享------

感谢您的来访,获取更多精彩文章请收藏本站。

供学习和研究使用,请在下载后24小时内删除
购买前可以联系作者确认资源信息,防止交易矛盾
一月 14

本站历史上的今天

THE END
喜欢就支持一下吧
点赞1702发电 分享
评论 共180条

请登录后发表评论