介绍

网站给导航菜单添加彩色渐变的文字有多个好处。

提高视觉吸引力：彩色渐变文字能够增加导航菜单的视觉吸引力，使其更加醒目和引人注目。这样的设计可以使导航菜单在网站上脱颖而出，吸引用户的注意力。

增强用户体验：通过彩色渐变文字，导航菜单的可读性和辨识度可能会得到提高。这种设计可以使菜单选项更加清晰易读，让用户更容易理解和导航网站的结构。

以下代码放到你的菜单

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

以下代码放入css样式

有时wordpress自带的自定义css无效，需放置在主题自定义中的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
}