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); }
}
css3 marquee
         本页正文内容约845个文字
         本文标签:这篇文章木有标签

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

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

发表评论

电子邮件地址不会被公开, 推荐使用QQ快速评论!

00:00 / 00:00
顺序播放