marquee即文字滾動效果
實現(xiàn)
- 使用HTML實現(xiàn)marquee
HTML有一個marquee標簽, 雖然可以使用, 但是這是個棄用的標簽, 隨時可能被瀏覽器不支持, 所以最好不要使用
- 使用CSS3動畫
- 這里的需求又分為兩種情況, 一種是你知道你要滾動的文字有多長, 那么實現(xiàn)如下
//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); }
}
最后編輯于 ：
?著作權歸作者所有,轉載或內(nèi)容合作請聯(lián)系作者
