详情
评论
问答

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

智能总结摘要
AI助理
生成中...

文章最后更新时间: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>
  • 效果
图片[1]-子比主题美化教程WP美化集合【已更新8.5】-轩逸博客
  • 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;}
  • 效果截图:
图片[2]-子比主题美化教程WP美化集合【已更新8.5】-轩逸博客

  • 代码:
  • 注意:
    • 是一个简单的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%);
}

效果图:

图片[3]-子比主题美化教程WP美化集合【已更新8.5】-轩逸博客

1 2 3 4

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

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

供学习和研究使用,请在下载后24小时内删除
购买前可以联系作者确认资源信息,防止交易矛盾
It doesn't matter how slow you are, as long as you're determined to get there, you'll get there.
不管你有多慢,都不要紧,只要你有决心,你最终都会到达想去的地方
一月 14

本站历史上的今天

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

请登录后发表评论

    • 轩逸的头像-轩逸博客钻石菁英轩逸徽章-𝟚𝟘𝟚𝟝蛇年快乐-轩逸博客等级-LV10-轩逸博客作者0