商品分類

CSS 跑馬燈

2021-10-07 09:39

HTML

<div class="alert alert-info" style="overflow:hidden;">
    <div class="marquee">
        <div>
            AAA
        </div>
    </div>
</div>

CSS

.marquee div {
    display: block;
    width: 100%;
    height: 30px;
    position: relative;
    left: 100%
    overflow: hidden;
    animation: marquee 5s linear infinite;
}

@keyframes marquee {
    0% {
        left: 100%;
    }
    100% {
        left: 0;
    }
}