文章最后更新时间:
网站上的美化基本教程
子比标签随机颜色【放到自定义css】
logo扫光【放到自定义css】
子比主题侧边栏滚动条美化【放到自定义css】

文章添加彩色渐变标题【放到自定义css】
/*宇凌云界www.yulll.com*//*文章标题加上渐变彩色文字 开始*/
.item-heading :hover,
.text-ellipsis :hover,
.text-ellipsis-2 :hover,
.links-lists :hover {
background-image: -webkit-linear-gradient(30deg, #32c5ff 25%, #b620e0 50%, #f7b500 75%, #20e050 100%);
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
-webkit-background-size: 200% 100%;
-webkit-animation: maskedAnimation 4s infinite linear;
}
@keyframes maskedAnimation {
0% {
background-position: 0 0
}
100% {
background-position: -100% 0
}
}/*转载https://www.tfbkw.com/73.html/3*/
/*文章标题加上渐变彩色文字 结束*/
文章强制每行5个【卡片模式】【放到自定义css】
/*文章卡片排列X5*/
@media (min-width: 769px) {
.posts-item.card {
width: calc(20% - 16px);
}
}/*宇凌云界www.yulll.com*/
括号里的数值可以自己定义,不难理解就是控制卡片&列表宽度用的。这个根据自己的页面情况需求修改就好!
需要多个列表修改百分比即可,5个=20%以此类推。
每行两个【列表模式】【放到自定义css】
/*文章列表排列X2*/
@media (min-width: 1500px) {
.posts-item {
display: inline-flex;
width: calc(50% - 16px);
}
}/*宇凌云界www.yulll.com*/
括号里的数值可以自己定义,不难理解就是控制卡片&列表宽度用的。这个根据自己的页面情况需求修改就好!
需要多个列表修改百分比即可,2个=50%以此类推。
注:双列模式下文章形式为“图库”会有几率影响版面错乱。
其他美化【放到自定义css】
/*隐藏卡片列表内容并取消占位*/
.theme-bg{background: var(--main-bg-color);border-radius:10px;} /*大盒子背景,可以是图片,需要更改文件class,不更改应该也可以*/
.posts-item.card .item-tags{visibility: hidden;DISPLAY: none;} /*隐藏标签*/
.posts-item.card .item-meta{visibility: hidden;DISPLAY: none;} /*隐藏浏览量数据*/
/*卡片列表标题*/
.tab-content>.active {padding: 0px 10px;} /*边距*/
.index-tab ul>li.active { height: 40px;width: 100%;background: var(--muted-bg-color);border-radius:10px 10px 0px 0px;margin: 0;padding:8px 20px; } /*盒子标题样式背景*/
.index-tab ul>li.active a {color: var(--key-color)!important;font-weight:bold;vertical-align:text-top;} /*标题字体样式*/
.posts-item .item-heading {-webkit-line-clamp: 1;} /*文章标题行数从2行修改位1行*/
.posts-item.card .item-heading {min-height: 0;} /*文章标题盒子高度修改*/
/*宇凌云界www.yulll.com*/
打字有粒子效果【放到自定义css】
<!--宇凌云界www.yulll.com-->
(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);
<!--彩色粒子特效结束-->
标签云小工具随机颜色【放到自定义css】
/*文章随机彩色标签*/
.widget-tag-cloud.fixed-width .but:hover{opacity: 1;}.widget-tag-cloud.fixed-width .but{opacity: 0.6;line-height: 20px !important;padding: 4px 10px !important;font-size: 12px !important;}.widget-tag-cloud.fixed-width .but:nth-child(5n){background-color: #4A4A4A;color: #FFF}.widget-tag-cloud.fixed-width .but:nth-child(5n+1){background-color: #ff5e5c;color: #FFF}.widget-tag-cloud.fixed-width .but:nth-child(5n+2){background-color: #ffbb50;color: #FFF}.widget-tag-cloud.fixed-width .but:nth-child(5n+3){background-color: #1ac756;color: #FFF}.widget-tag-cloud.fixed-width .but:nth-child(5n+4){background-color: #19B5FE;color: #FFF}/*宇凌云界www.yulll.com*/
添加一个区块>>外观>>小工具>>自定义HTML代码

<link rel="stylesheet" href="https://www.yulll.com/wp-content/themes/zibll/css/headyul.css" >
<div id="home_top">
<style type="text/css">
.todayCard-title,
.todayCard-tips,
.topGroup.banner-button {
color: #ffffff;
}
.topGroup.todayCard {
background: #000000;
}
</style>
<div class="recent-top-post-group" id="recent-top-post-group">
<div class="recent-post-top" id="recent-post-top">
<div id="bannerGroup">
<div id="banners">
<div class="banners-title">
<div class="banners-title-big">
分享设计
</div>
<div class="banners-title-big">
与科技生活
</div>
<div class="banners-title-small">
YULLL.COM
</div>
</div>
<!--YULLL.COM -->
<div class="tags-group-all">
<div class="tags-group-wrapper">
<div class="tags-group-icon-pair">
<div class="tags-group-icon" style="background:#989bf8">
<img title="AfterEffects"
onerror="this.onerror=null;this.src='https://bu.dusays.com/2023/03/03/6401a79030db5.png'"
class="entered exited"
src="https://p.zhheo.com/20239df3f66615b532ce571eac6d14ff21cf072602.png!cover">
</div>
<div class="tags-group-icon" style="background:#ffffff">
<img src="https://p.zhheo.com/2023e0ded7b724a39f12d59c3dc8fbdc7cbe074202.png!cover"
title="Sketch"
onerror="this.onerror=null;this.src='https://bu.dusays.com/2023/03/03/6401a79030db5.png'">
</div>
</div>
<div class="tags-group-icon-pair">
<div class="tags-group-icon" style="background:#57b6e6">
<img title="Docker"
onerror="this.onerror=null;this.src='https://bu.dusays.com/2023/03/03/6401a79030db5.png'"
class="entered exited"
src="https://p.zhheo.com/20231108a540b2862d26f8850172e4ea58ed075102.png!cover">
</div>
<div class="tags-group-icon" style="background:#4082c3">
<img src="https://p.zhheo.com/2023e4058a91608ea41751c4f102b131f267075902.png!cover"
title="Photoshop"
onerror="this.onerror=null;this.src='https://bu.dusays.com/2023/03/03/6401a79030db5.png'">
</div>
</div>
<div class="tags-group-icon-pair">
<div class="tags-group-icon" style="background:#ffffff">
<img src="https://p.zhheo.com/20233e777652412247dd57fd9b48cf997c01070702.png!cover"
title="FinalCutPro"
onerror="this.onerror=null;this.src='https://bu.dusays.com/2023/03/03/6401a79030db5.png'"
data-ll-status="" class="entered ">
</div>
<div class="tags-group-icon" style="background:#ffffff">
<img src="https://p.zhheo.com/20235c0731cd4c0c95fc136a8db961fdf963071502.png!cover"
title="Python"
onerror="this.onerror=null;this.src='https://bu.dusays.com/2023/03/03/6401a79030db5.png'">
</div>
</div>
<div class="tags-group-icon-pair">
<div class="tags-group-icon" style="background:#eb6840">
<img title="Swift"
onerror="this.onerror=null;this.src='https://bu.dusays.com/2023/03/03/6401a79030db5.png'"
class="entered "
src="https://p.zhheo.com/202328bbee0b314297917b327df4a704db5c072402.png!cover"
data-ll-status="">
</div>
<div class="tags-group-icon" style="background:#8f55ba">
<img title="Principle"
onerror="this.onerror=null;this.src='https://bu.dusays.com/2023/03/03/6401a79030db5.png'"
class="entered exited"
src="https://p.zhheo.com/2023f76570d2770c8e84801f7e107cd911b5073202.png!cover">
</div>
</div>
<div class="tags-group-icon-pair">
<div class="tags-group-icon" style="background:#f29e39">
<img title="illustrator"
onerror="this.onerror=null;this.src='https://bu.dusays.com/2023/03/03/6401a79030db5.png'"
class="entered "
src="https://p.zhheo.com/20237359d71b45ab77829cee5972e36f8c30073902.png!cover"
data-ll-status="">
</div>
<div class="tags-group-icon" style="background:#2c51db">
<img src="https://p.zhheo.com/20237c548846044a20dad68a13c0f0e1502f074602.png!cover"
title="CSS3"
onerror="this.onerror=null;this.src='https://bu.dusays.com/2023/03/03/6401a79030db5.png'"
data-ll-status="" class="entered ">
</div>
</div>
<!--wniui.com -->
<div class="tags-group-icon-pair">
<div class="tags-group-icon" style="background:#f7cb4f">
<img title="JS"
onerror="this.onerror=null;this.src='https://bu.dusays.com/2023/03/03/6401a79030db5.png'"
class="entered "
src="https://p.zhheo.com/2023786e7fc488f453d5fb2be760c96185c0075502.png!cover"
data-ll-status="">
</div>
<div class="tags-group-icon" style="background:#e9572b">
<img title="HTML"
onerror="this.onerror=null;this.src='https://bu.dusays.com/2023/03/03/6401a79030db5.png'"
class="entered "
src="https://p.zhheo.com/202372b4d760fd8a497d442140c295655426070302.png!cover"
data-ll-status="">
</div>
</div>
<div class="tags-group-icon-pair">
<div class="tags-group-icon" style="background:#df5b40">
<img title="Git"
onerror="this.onerror=null;this.src='https://bu.dusays.com/2023/03/03/6401a79030db5.png'"
class="entered "
src="https://p.zhheo.com/2023ffa5707c4e25b6beb3e6a3d286ede4c6071102.png!cover"
data-ll-status="">
</div>
<div class="tags-group-icon" style="background:#1f1f1f">
<img title="Rhino"
onerror="this.onerror=null;this.src='https://bu.dusays.com/2023/03/03/6401a79030db5.png'"
class="entered "
src="https://p.zhheo.com/20231ca53fa0b09a3ff1df89acd7515e9516173302.png!cover"
data-ll-status="">
</div>
</div>
<div class="tags-group-icon-pair">
<div class="tags-group-icon" style="background:#989bf8">
<img title="AfterEffects"
onerror="this.onerror=null;this.src='https://bu.dusays.com/2023/03/03/6401a79030db5.png'"
class="entered exited"
src="https://p.zhheo.com/20239df3f66615b532ce571eac6d14ff21cf072602.png!cover">
</div>
<div class="tags-group-icon" style="background:#ffffff">
<img title="Sketch"
onerror="this.onerror=null;this.src='https://bu.dusays.com/2023/03/03/6401a79030db5.png'"
class="entered exited"
src="https://p.zhheo.com/2023e0ded7b724a39f12d59c3dc8fbdc7cbe074202.png!cover">
</div>
</div>
<!--wniui.com -->
<div class="tags-group-icon-pair">
<div class="tags-group-icon" style="background:#57b6e6">
<img title="Docker"
onerror="this.onerror=null;this.src='https://bu.dusays.com/2023/03/03/6401a79030db5.png'"
class="entered exited"
src="https://p.zhheo.com/20231108a540b2862d26f8850172e4ea58ed075102.png!cover">
</div>
<div class="tags-group-icon" style="background:#4082c3">
<img title="Photoshop"
onerror="this.onerror=null;this.src='https://bu.dusays.com/2023/03/03/6401a79030db5.png'"
class="entered exited"
src="https://p.zhheo.com/2023e4058a91608ea41751c4f102b131f267075902.png!cover">
</div>
</div>
<div class="tags-group-icon-pair">
<div class="tags-group-icon" style="background:#ffffff">
<img title="FinalCutPro"
onerror="this.onerror=null;this.src='https://bu.dusays.com/2023/03/03/6401a79030db5.png'"
class="entered exited"
src="https://p.zhheo.com/20233e777652412247dd57fd9b48cf997c01070702.png!cover">
</div>
<div class="tags-group-icon" style="background:#ffffff">
<img title="Python"
onerror="this.onerror=null;this.src='https://bu.dusays.com/2023/03/03/6401a79030db5.png'"
class="entered exited"
src="https://p.zhheo.com/20235c0731cd4c0c95fc136a8db961fdf963071502.png!cover">
</div>
</div>
<div class="tags-group-icon-pair">
<div class="tags-group-icon" style="background:#eb6840">
<img title="Swift"
onerror="this.onerror=null;this.src='https://bu.dusays.com/2023/03/03/6401a79030db5.png'"
class="entered exited"
src="https://p.zhheo.com/202328bbee0b314297917b327df4a704db5c072402.png!cover">
</div>
<div class="tags-group-icon" style="background:#8f55ba">
<img title="Principle"
onerror="this.onerror=null;this.src='https://bu.dusays.com/2023/03/03/6401a79030db5.png'"
class="entered exited"
src="https://p.zhheo.com/2023f76570d2770c8e84801f7e107cd911b5073202.png!cover">
</div>
</div>
<div class="tags-group-icon-pair">
<div class="tags-group-icon" style="background:#f29e39">
<img title="illustrator"
onerror="this.onerror=null;this.src='https://bu.dusays.com/2023/03/03/6401a79030db5.png'"
class="entered exited"
src="https://p.zhheo.com/20237359d71b45ab77829cee5972e36f8c30073902.png!cover">
</div>
<div class="tags-group-icon" style="background:#2c51db">
<img title="CSS3"
onerror="this.onerror=null;this.src='https://bu.dusays.com/2023/03/03/6401a79030db5.png'"
class="entered exited"
src="https://p.zhheo.com/20237c548846044a20dad68a13c0f0e1502f074602.png!cover">
</div>
</div>
<!-- 星雨-xkzhi.cn -->
<div class="tags-group-icon-pair">
<div class="tags-group-icon" style="background:#f7cb4f">
<img src="https://p.zhheo.com/2023786e7fc488f453d5fb2be760c96185c0075502.png!cover"
title="JS"
onerror="this.onerror=null;this.src='https://bu.dusays.com/2023/03/03/6401a79030db5.png'">
</div>
<div class="tags-group-icon" style="background:#e9572b">
<img src="https://p.zhheo.com/202372b4d760fd8a497d442140c295655426070302.png!cover"
title="HTML"
onerror="this.onerror=null;this.src='https://bu.dusays.com/2023/03/03/6401a79030db5.png'">
</div>
</div>
<div class="tags-group-icon-pair">
<div class="tags-group-icon" style="background:#df5b40">
<img src="https://p.zhheo.com/2023ffa5707c4e25b6beb3e6a3d286ede4c6071102.png!cover"
title="Git"
onerror="this.onerror=null;this.src='https://bu.dusays.com/2023/03/03/6401a79030db5.png'">
</div>
<div class="tags-group-icon" style="background:#1f1f1f">
<img src="https://p.zhheo.com/20231ca53fa0b09a3ff1df89acd7515e9516173302.png!cover"
title="Rhino"
onerror="this.onerror=null;this.src='https://bu.dusays.com/2023/03/03/6401a79030db5.png'">
</div>
</div>
</div>
</div>
<a id="banner-hover" href="/?random" rel="external nofollow" data-pjax-state="">
<i class="heofont icon-right">
</i>
<span class="bannerText">
随便逛逛
</span>
</a>
</div>
<!-- 星雨-xkzhi.cn -->
<div class="categoryGroup">
<div class="categoryItem">
<a class="categoryButton wniui_one" href="/category/yulll原创" rel="external nofollow" data-pjax-state="">
<span class="categoryButtonText">
必看精选
</span>
<i class="heofont icon-star-smile-fill">
</i>
</a>
</div>
<div class="categoryItem">
<a class="categoryButton wniui_two" href="/?s=子比&type=post" rel="external nofollow" data-pjax-state="">
<span class="categoryButtonText">
子比美化
</span>
<i class="heofont icon-fire-fill">
</i>
</a>
</div>
<div class="categoryItem">
<a class="categoryButton wniui_three" href="/category/好资源" rel="external nofollow" data-pjax-state="">
<span class="categoryButtonText">
实用教程
</span>
<i class="heofont icon-book-mark-fill">
</i>
</a>
</div>
</div>
</div>
<div class="topGroup">
<div class="todayCard" id="todayCard" style="z-index: 1;">
<div class="todayCard-cover"
style="background: url('https://www.yulll.com/wp-content/uploads/2025/06/c24ad8fa3120250629201841.jpg') no-repeat center /cover">
</div>
<div class="banner-button-group">
<a class="banner-button" href="/newposts" rel="external nofollow" >
<i class="heofont icon-add-circle-fill">
</i>
<span class="banner-button-text">
发布文章
</span>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
© 版权声明
© 版权声明 All Rights Reserved
THE END








暂无评论内容