网站底部文字炫彩代码分享

emlog教程 2年前 (2018) Mgo
0

TIM截图20181023165532.png

底部文字炫彩滚动代码设置教程,仅凉兮授权模板 【站长聚集地首发】使用,其他模板 【站长聚集地首发】请行膝盖自己的东西。

查找模板 【站长聚集地首发】 style.css 内160行

.footer a{color:#878787;}

替换为

/*底部炫彩*/
.footer a{color:#878787;
	      width:50%;
          margin:0 auto;
          line-height:0px;
          text-align:center;
          -webkit-background-clip: text;    /*按文字裁剪*/
          -webkit-text-fill-color: transparent;    /*文字的颜色使用背景色*/
          background-color:#FFFFFF;    /*设置一个背景色*/
          background-image: -webkit-linear-gradient(-45deg, rgba(0, 0, 0, 0.6) 40%, #aff0ff 50%, rgba(0, 0, 0, 0.6) 60%);        /*设置渐变的背景,按对角线渐变*/
          background-blend-mode: hard-light;    /*设置背景为混合模式下的强光模式*/
          background-size: 270%;
          -webkit-animation: shine 4s infinite;
          }
@-webkit-keyframes shine {
          from {background-position: 100%;}
          to {background-position: 0;}
          }     
.phone_logo_text{  
          width:28%;
          margin:0 auto;
          line-height:0px;
          text-align:center;
          -webkit-background-clip: text;/*按文字裁剪*/
          -webkit-text-fill-color:transparent;/*文字的颜色使用背景色*/
          background-color:#FFFFFF;/*设置一个背景色*/
          background-image: -webkit-linear-gradient(-45deg, rgba(0, 0, 0, 0.6) 40%, #aff0ff 50%, rgba(0, 0, 0, 0.6) 60%);/*设置渐变的背景,按对角线渐变*/
          background-blend-mode: hard-light;/*设置背景为混合模式下的强光模式*/
          background-size: 270%;
          -webkit-animation: shine 4s infinite;/*给背景添加动画改变位置*/
          }
@-webkit-keyframes shine {
          from {background-position: 100%;}
          to {background-position: 0;}
          } 

然后在模板 【站长聚集地首发】设置里将要显示的文字前面添加

<a id="lxizyxc">要显示炫彩的文字</a>

即可完成炫彩

版权声明:Mgo 发表于 2018-10-30 14:07:05。
转载请注明:网站底部文字炫彩代码分享 | 站长聚集地

暂无评论

暂无评论...