marquee

marquee即文字滚动效果

实现

• 使用HTML实现marquee
  HTML有一个marquee标签, 虽然可以使用, 但是这是个弃用的标签, 随时可能被浏览器不支持, 所以最好不要使用
• 使用CSS3动画
  1. 这里的需求又分为两种情况, 一种是你知道你要滚动的文字有多长, 那么实现如下

//html
<div class="box">asdfasdfasdfasdfasdfasdfasdfadf</div>
//css
.box {
    animation: marquee 5s linear infinite alternate;
}
@keyframes marquee {
    0%   { text-indent: 0em; }
    100% { text-indent: -10em; }
}

2. 你不知道你要滚动的文字有多长

//html
    <div class="contain">
         <div class="box">
    asdfasdfasdfasdfasdfasdfasdfadf
         </div>
    </div>
//css
.box {
    display: inline-block;
    background-color: #f00;
    animation: marquee1 5s linear infinite alternate;
}
.contain {
    width: 50px;
    overflow: hidden;
}
@keyframes marquee1 {
    0%   { transform: translate(0, 0); }
    100% { transform: translate(-100%, 0); }
}