分享一款轮播式公告炫酷代码HTML+CSS

Wordpress 3个月前 acg
423 次浏览 0
ACGPK.COM导航网,分享本站原创资源+集合全网优质资源,打造全网高质量网站!

以上就是效果图,具体代码参考下面

<div class="gonggao"><marquee><b id="nr">ACGPK.COM导航网,分享本站原创资源+集合全网优质资源,打造全网高质量网站!</b></marquee></div>

<style>
.gonggao {
    background-color: #333;
    border-radius: 25px;
    box-shadow: 0 0 5px #f200ff;
    padding: 5px;
    margin-top: 10px;
    margin-bottom: 0;
}
#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;
}
marquee {
    display: inline-block;
    width: -webkit-fill-available;
}
</style>
版权声明:acg 发表于 2021-05-11 9:23:26。
转载请注明:分享一款轮播式公告炫酷代码HTML+CSS | ACGPK精选导航网

暂无评论

暂无评论...