给网站添加渐变闪亮的移动通知公告代码-记录我的美好生活萝莉工坊

给网站添加渐变闪亮的移动通知公告代码

<meta charset="UTF-8"> 
    <meta name="viewport" id="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="shortcut icon" href="favicon.png" type="image/x-icon">   
</head> 
<body> 
   <style>
#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;
    }
}

本文作者为萝莉工坊，转载请注明。