子比主题美化教程WP美化集合【已更新8.5】轩逸关注私信18010.7W+1702 文章最后更新时间: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> 效果 添加鼠标样式 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;} 效果截图: 左侧菜单添加背景图片(手机才能看) 代码: 此处内容已隐藏,请评论后刷新页面查看. 注意: 这是一个简单的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%); } 效果图: 1 2 3 4------本页内容已结束,喜欢请分享------ 感谢您的来访,获取更多精彩文章请收藏本站。 供学习和研究使用,请在下载后24小时内删除 购买前可以联系作者确认资源信息,防止交易矛盾 一月 14 本站历史上的今天 2025:01月14日,星期二, 每天60秒读懂全世界! (0)2023:ZIBB子比小黑屋 (7)2023:1月14日,星期六,在这里每天60秒读懂世界! (0) THE END子比美化技术分享教程网站建设# 子比美化# 教程# WordPress美化# wp美化# WordPress# 免费# 子比主题# wordpress主题# WordPress教程# ico# 美化教程# 悬浮按钮栏美化# 评论区# 夸夸功能# 新通知# 弹窗样式# 发布ICON图标# 已更新 喜欢就支持一下吧点赞1702发电 分享QQ空间微博QQ好友海报分享复制链接收藏