本文作者:Jaden

动态彩色渐变文字的代码

Jaden 4个月前 ( 08-23 ) 338 抢沙发 百度已收录
动态彩色渐变文字的代码摘要: CSS代码:@keyframes move { 0% { background-position: 0 0; }...

CSS代码:

@keyframes move {
      0% {        background-position: 0 0;
      }
      100% {        /*宽度固定,如果为百分比背景不会滚动*/
        background-position: -300px 0;
      }
    }    .wrap {      /*设置背景渐变色*/
      background-image: linear-gradient(to right, red, orange, yellow, green, yellow, orange, red, orange, yellow, green, yellow, orange, red);      /*chrome私有样式,加前缀,文字显示背景图片*/
       -webkit-background-clip: text;      animation: move 5s infinite;      /*文字颜色设为透明*/
      color: transparent;      /*宽度固定*/
      width: 300px;
    }

html代码:

<div class="wrap">夜光阁博客</div>

演示:

夜光阁博客
文章版权及转载声明:

作者:Jaden本文地址:https://www.ygg.kim/post/18.html发布于 4个月前 ( 08-23 )
文章转载或复制请以超链接形式并注明出处夜光阁

发表评论

快捷回复:

评论列表 (暂无评论,338人围观)参与讨论

还没有评论,来说两句吧...