marquee实现⽂字⽆缝滚动+css⽆缝滚动
<marquee direction=left behavior=scroll loop=3 scrollamount=1 scrolldelay=10 align=top bgcolor=#ffffff height=30 width=100 hspace=20 vspace=10 οnmοuseοver=this.stop() οnmοuseοut=this.start()> 内容内容 内容内容 内容内容 内容内容 </marquee>
direction表⽰滚动的⽅向，值可以是left，right，up，down，默认为left
behavior表⽰滚动的⽅式，值可以是scroll（连续滚动）slide（滑动⼀次）alternate（往返滚动）
marquee marqueeloop表⽰循环的次数，值是正整数，默认为⽆限循环
scrollamount表⽰运动速度，值是正整数，默认为6
scrolldelay表⽰停顿时间，值是正整数，默认为0，单位似乎是毫秒
align表⽰元素的垂直对齐⽅式，值可以是top，middle，bottom，默认为middle
bgcolor表⽰运动区域的背景⾊，值是16进制的RGB颜⾊，默认为⽩⾊
height、width表⽰运动区域的⾼度和宽度，值是正整数（单位是像素）或百分数，默认width=100% hei
ght为标签内元素的⾼度 hspace、vspace表⽰元素到区域边界的⽔平距离和垂直距离，值是正整数，单位是像素。
οnmοuseοver=this.stop() οnmοuseοut=this.start()表⽰当⿏标以上区域的时候滚动停⽌，当⿏标移开的时候⼜继续滚动。
.wrap{
width: 200px;
border: 1px solid red;margin: 200px auto;
background-color: yellow;
overflow: hidden;
}
.wrapFont{
transform: translateX(0%);
animation: scrols 10s infinite linear;
}
@keyframes scrols{
from{
transform: translateX(100%);
}
to{
transform: translateX(-100%);
}
}
<div class="wrap">
<div class="wrapFont">这个是轮播啊</div>
</div>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。