css3 marquee

原创
2016/07/18 23:00
阅读数 2.8K

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

展开阅读全文
打赏
0
1 收藏
分享
加载中
更多评论
打赏
0 评论
1 收藏
0
分享
返回顶部
顶部