单行文本左右跑马灯效果
效果
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/20866eaacdb982254a32feef252f6aa2.gif#pic_center)
代码
<div class="wrap">
<p>
<span class="text">这是一段测试文本跑马灯效果的文本,看看效果----------------------</span>
<span>这是一段测试文本跑马灯效果的文本,看看效果----------------------</span>
</p>
</div>
<style>
.wrap {
width: 500px;
height: 30px;
display: flex;
background-color: #ccc;
overflow: hidden;
position: relative;
}
.text {
width: 560px;
}
p {
width: auto;
padding: 0;
margin: 0;
position: absolute;
height: 30px;
line-height: 30px;
left: 34px;
white-space: nowrap;
display: flex;
animation: move linear 5s infinite;
overflow: hidden;
}
p:hover {
animation-play-state: paused;
}
@keyframes move {
0% {
left: 34px;
}
100% {
left: -526px;
}
}
</style>
多行不同宽度的文本跑马灯效果
效果
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/1326de6edaed8db3065191404667ea18.gif#pic_center)
代码
<ul id="app">
<li class="item">
<p>
<span class="text">----这是一段测试文本跑马灯效果的文本,看看效果,看看效果,看看效果---------</span>
<span class="temp">----这是一段测试文本跑马灯效果的文本,看看效果,看看效果,看看效果---------</span>
</p>
</li>
<li class="item">
<p>
<span class="text">----这是一段测试文本跑马灯效果的文本,看看效果-------------这是一段测试文本跑马灯效果的文本,看看效果---------</span>
<span class="temp">----这是一段测试文本跑马灯效果的文本,看看效果-------------这是一段测试文本跑马灯效果的文本,看看效果---------</span>
</p>
</li>
<li class="item">
<p>
<span class="text">----这是一段测试文本跑马灯效果的文本,看看效果-</span>
<span class="temp">----这是一段测试文本跑马灯效果的文本,看看效果-</span>
</p>
</li>
</ul>
<style>
.item {
width: 500px;
height: 30px;
display: flex;
background-color: #ccc;
overflow: hidden;
position: relative;
margin-bottom: 10px;
}
.text {
width: auto;
}
p {
width: auto;
padding: 0;
margin: 0;
height: 30px;
line-height: 30px;
white-space: nowrap;
display: flex;
}
p:hover {
animation-play-state: paused;
}
@keyframes move {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-50%);
}
}
span {
padding-right: 100px;
}
</style>
<script>
const item = document.querySelectorAll('#app .item')[0]
const itemW = item.clientWidth
const text = document.querySelectorAll('.text')
const ps = document.querySelectorAll('p')
text.forEach((t, i) => {
const tw = t.clientWidth
if (tw > itemW) {
const sec = (tw - itemW) / 20
ps[i].style.animation = `move linear ${sec}s infinite`
}
})
</script>