css3 marquee
  • 内容
  • 相关

TML结构如下:

<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); }
}

点赞
X
赞助一下:
    支付宝    微信    QQ红包

打开支付宝扫一扫
css3 marquee
         本页正文内容约845个文字
         本文标签:这篇文章木有标签

         版权声明:若无特殊注明,本文皆为“懒人的小窝”原创,转载请保留文章出处。

         本文链接:https://suppore.cn/109.html   百度已收录

发表评论

电子邮件地址不会被公开。 必填项已用*标注