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;
marquee marqueeanimation: 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 = ElementById('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 = ElementById('marquee_left');
const contents =  marquee.innerHTML;
marquee.innerHTML = contents + contents;

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