今天给大家分享一个渐变的首页栏目,之前写了一篇二次元美化的,今天给大家分享一下这个效果!原创应该是炙焰!我也算是记录一下,防治效果丢失! 演示效果: 代码部署: [hidecontent type="payshow"] 直接把下方代码放到后台子比设置-自定义css样式即可! .index-tab ul>li{border-radius:7px;background:none;color:#000;transition:background-color .5s ease}.index-tab ul>li.active{background:linear-gradient(45deg,var(--gradient-active));background-size:400% 400%;animation:GradientShift 15s ease infinite}@keyframes GradientShift{0%{background-position:0 50%}50%{background-position:100% 50%}to{background-position:0 50%}} :root { --gradient-base-1: 255,127,80; --gradient-base-2: 148,143,255; --gradient-base-3: 76,175,80; --gradient-base-4: 255,165,0; --gradient-active: rgba(var(--gradient-base-1),0.3) 0%,rgba(var(--gradient-base-2),0.3) 25%,rgba(var(--gradient-base-3),0.3) 50%,rgba(var(--gradient-base-4),0.3) 75%,rgba(var(--gradient-base-1),0.3)... 大家好,今天汇聚访给大家分享两款渐变颜色代码,希望大家能够喜欢!效果还是很不错的!有喜欢的自行部署吧! 演示效果: 效果一: 效果二: 代码部署: [hidecontent type="payshow"] 效果一效果二 .zbbox-p{font-weight:600;color:#8c888b;background:-webkit-linear-gradient(45deg,#70f7fe,#fbd7c6,#fdefac,#bfb5dd,#bed5f5);background:-moz-linear-gradient(45deg,#70f7fe,#fbd7c6,#fdefac,#bfb5dd,#bed5f5);background:-ms-linear-gradient(45deg,#70f7fe,#fbd7c6,#fdefac,#bfb5dd,#bed5f5);color:transparent;-webkit-background-clip:text;animation:ran 20s linear infinite}@keyframes ran{from{background-position:0}to{background-position:2000px 0}} 代码为了减少加载速度,已压缩处理!放在子比后台-自定义CSS样式即可!随后自行引入样式即可! .wniui-colorful{ font-weight: 700; background-image: linear-gradient(90deg, #673ab7, #e91e63); background-clip: text; -webkit-background-clip: text; color: transparent; background-image: linear-gradient(90deg, rgb(255, 167, 69), rgb(254, 134,...