给网站添加一个炫彩滚动文字效果

一个非常好看的跑马灯效果，可以简单的美化网站公告等。

效果

教程

1.将css代码复制到你的style.css或者主要样式布局文字中

#nr {
    font-size: 20px;
    margin: 0;
    background: -webkit-linear-gradient(left, #ffffff, #ff0000 6.25%, #ff7d00 12.5%, #ffff00 18.75%, #00ff00 25%, #00ffff 31.25%, #0000ff 37.5%, #ff00ff 43.75%, #ffff00 50%, #ff0000 56.25%, #ff7d00 62.5%, #ffff00 68.75%, #00ff00 75%, #00ffff 81.25%, #0000ff 87.5%, #ff00ff 93.75%, #ffff00 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-size: 200% 100%;
    animation: masked-animation 2s infinite linear;
}

@keyframes masked-animation {
    0% {
        background-position: 0 0;
    }

    100% {
        background-position: -100%, 0;
    }
}

2.在你想要展示效果的地方调用css，格式：

<div style="background-color:#333;border-radius: 25px;box-shadow: 0px 0px 5px #f200ff;padding:5px;margin-top: 10px;margin-bottom:0px;"> 
  <marquee> 
    <b id="nr">欢迎来到咔咔技术站：www.kkjsz.cn
  </marquee> 
</div>

本文首发于：https://www.kkjsz.cn/archives/195.html