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

Wordpress4年前 (2021)发布 cosdh

692 0 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>

# Wordpress