css：动画实现文字无缝滚动详解

主要用css动画，手撸两个文字滚动效果

一、竖直滚动

思路：

1、translateY对内容的容器进行位移，最外层套个小容器，设为overflow: hidden;这样就是一个竖直滚动的效果了

2、用 js 动态复制一份需要滚动的内容，填充滚动到末端时出现的空白，实现无缝滚动

3、利用动画自带的animation-play-state:paused;属性实现鼠标经过暂停，同理也可以用 js 添加点击暂停事件等等

HTML 部分

<div id="marquee">
  <div>
        <p>1</p>
        <p>2</p>
        <p>3</p>
        <p>4</p>
        <p>5</p>
    </div>
</div>

CSS 部分

#marquee{
	height: 60px;
	overflow: hidden;
}
#marquee>div {
    text-align: center;
    animation: marquee 10s linear infinite;
}
/*鼠标经过暂停*/
#marquee:hover>div{
	animation-play-state:paused;
}
#marquee p{
	height: 30px;
	margin: 0;
}
@keyframes marquee {
    0% {
        transform: translateY(0%);
    }
    100% {
        transform: translateY(-100%); 
    }
}

JS 部分

const marquee = document.getElementById('marquee');
const contents =  marquee.innerHTML;
marquee.innerHTML = contents + contents;//让最后一帧衔接复制出来的第一帧，实现无缝衔接

二、横向滚动

思路：

1、最外层小 div 设为溢出隐藏，包裹内容的div宽度设大点，这样内容 p 元素的内容才不会被挤换行

2、为什么使用 display:inline-block; ? 因为 display:block; 会换行， display:inline; transform无效

HTML 部分

 <div class="marquee_box">
        <div id="marquee_left">
            <p>定义了鼠标移入容器时的效果</p>
        </div>
    </div>

CSS 部分

 .marquee_box{
	  width: 150px;height: 30px;
      overflow: hidden;
  }
  #marquee_left{
      width: 1000px;
  }
  #marquee_left>p{
	  display:inline-block;
      animation: infinite 10s left linear;
  }
  #marquee_left:hover p{
 	  animation-play-state:paused;
  }
  @keyframes left{
      from{transform: translateX(0);}
      to{transform: translateX(-100%);}
  }

JS 部分

const marquee = document.getElementById('marquee_left');
const contents =  marquee.innerHTML;
marquee.innerHTML = contents + contents;