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;