子比主题美化 – 给导航菜单添加彩色渐变的文字

效果展示

彩色渐变文字能够瞬间抓住用户的目光。与单调的纯色文字相比，渐变效果使文字呈现出丰富的色彩变化，在页面中更加突出。例如，在一个以简洁设计为主的子比主题网站上，彩色渐变的导航菜单文字就像一道亮丽的风景线，引导用户自然地将视线聚焦在菜单上，从而提高用户对菜单选项的关注度。清晰且富有吸引力的导航菜单文字能够提高用户浏览菜单的效率和愉悦感。彩色渐变文字不仅在视觉上更引人注目，还可以在一定程度上区分不同的菜单选项，帮助用户更快地识别和选择他们需要的内容。特别是在菜单选项较多的情况下，这种视觉上的区分更加明显，减少了用户的决策时间。

代码部署

以下代码放到你的菜单

<span class="meihua">你的菜单名称</span>

以下代码放入css样式

.meihua {
background: linear-gradient(90deg, rgba(131, 58, 180, 1) 0%, rgba(253, 29, 29, 1) 33.3%, rgba(252, 176, 69, 1) 66.6%, rgba(131, 58, 180, 1) 100%);
-webkit-background-clip: text;
color: transparent !important;
background-size: 300% 100%;
animation: text 4s infinite linear
}
@media (max-width:768px) {
span.ua-info {
display: none
}
.comment-author .user-title {
width: 40% !important
}
}
.comment-author .user-title {
font-size: 13px;
background: linear-gradient(90deg, rgba(131, 58, 180, 1) 0%, rgba(253, 29, 29, 1) 33.3%, rgba(252, 176, 69, 1) 66.6%, rgba(131, 58, 180, 1) 100%);
-webkit-background-clip: text;
color: transparent !important;
background-size: 300% 100%;
animation: text 4s infinite linear
}
@keyframes text {
0% {
background-position: 0 0
}
100% {
background-position: -150% 0
}
}
.b2-qr-code-fill {
background: linear-gradient(90deg, rgba(131, 58, 180, 1) 0%, rgba(253, 29, 29, 1) 33.3%, rgba(252, 176, 69, 1) 66.6%, rgba(131, 58, 180, 1) 100%);
-webkit-background-clip: text;
color: transparent !important;
background-size: 300% 100%;
animation: text 4s infinite linear
}