U.S. flag

咔咔技术站所属网站

Dot gov

所属网站使用 KKJSZ.CN
KKJSZ.CN 属于咔咔技术站及其附属网站使用


HTTPS

KKJSZ.CN域名全面使用 HTTPS
小锁 ( ) 或 https:// 表示您已安全连接到KKJSZ.CN网站。

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

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

咔咔云
2022-09-25 / 0 评论 / 160 阅读 / 正在检测是否收录...

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

效果

炫彩文字

教程

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

本文共 75 个字数,平均阅读时长 ≈ 1分钟
0

打赏

海报

正在生成.....

评论 (0)

取消