marquee实现文字无缝滚动+css无缝滚动

<marquee style="border: 1px solid red;" 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（往返滚动） 
loop表示循环的次数，值是正整数，默认为无限循环 
scrollamount表示运动速度，值是正整数，默认为6 
scrolldelay表示停顿时间，值是正整数，默认为0，单位似乎是毫秒 
align表示元素的垂直对齐方式，值可以是top，middle，bottom，默认为middle 
bgcolor表示运动区域的背景色，值是16进制的RGB颜色，默认为白色 
height、width表示运动区域的高度和宽度，值是正整数（单位是像素）或百分数，默认width=100% height为标签内元素的高度 
hspace、vspace表示元素到区域边界的水平距离和垂直距离，值是正整数，单位是像素。
οnmοuseοver=this.stop() οnmοuseοut=this.start()表示当鼠标以上区域的时候滚动停止，当鼠标移开的时候又继续滚动。

 

转发自：https://www.cnblogs.com/tzdy/p/6002797.html

 

 

.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>