css3 marquee

最新推荐文章于 2024-07-05 23:43:33 发布

转载最新推荐文章于 2024-07-05 23:43:33 发布 · 201 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://my.oschina.net/u/2324376/blog/714173

2019独角兽企业重金招聘Python工程师标准>>>

HTML结构如下：

<div class="marquee"><div><span>marquee标签拥有很多的动效，可惜遭到HTML5废弃，本文利用css3模拟其水平滚动效果。</span></div></div>

原本一层DIV足够，又加了一层是为了增加左右的空白间隙。

然后就可以应用transform动画了：

.marquee {
    height: 36px;
    line-height: 36px;
    color: #f90;
    background-color: #ffc;
    border-top: 1px solid #f2f2f2;
    border-bottom: 1px solid #f2f2f2;
    box-sizing: border-box;
    word-break: break-all;
    white-space: nowrap;

    div {
        margin: 0 10px;
        overflow: hidden;
    }

    span {
        display: inline-block;
        padding-left: 100%;  /* 从右至左开始轮播 */
        -webkit-animation: marquee 16s linear infinite;
        animation: marquee 16s linear infinite;
    }
    span:hover { /* 鼠标点击时暂停轮播 */
        -webkit-animation-play-state: paused;
        animation-play-state: paused;
    }
}

/* Make it move */
@-webkit-keyframes marquee {
    0%   { -webkit-transform: translate(0, 0); }
    100% { -webkit-transform: translate(-100%, 0); }
}
@keyframes marquee {
    0%   { transform: translate(0, 0); }
    100% { transform: translate(-100%, 0); }
}

方案源于stackoverflow：css3-marquee-effect

转载于:https://my.oschina.net/u/2324376/blog/714173