css实现跑马灯效果
最近有⼀个跑马灯的效果，需要实现。本来想偷个懒从⽹上随便拷贝⼀个，结果发现都不太理想，于是⾃⼰动⼿封装了⼀个，和⼤家分享⼀下。
⾸先我们要知道跑马灯的具体效果是什么样⼦的。
效果图
我们通过效果图可以看到，在可是区域内有⼀⾏⽂字，当⽂字从左侧消失后，需要在右侧展⽰，⼀直循环展⽰。
上代码
//html
<div class="box">
<p class="txt" v-for="(n,j) in 2":key="j">将要跑起来的⽂案--------------跑起来</p>
</div>
//css
.box{
color: #A35FB3;
font-size:20px;
line-height:50px;
.txt{
display: inline-block;
width:100%;
animation:20s wordsLoop linear infinite normal;
}
}
@keyframes wordsLoop {
0%{
transform:translateX(0px);
}
100%{
transform:translateX(-100%);
}
}
分析
css特效文字
可能有的⼩伙伴会问到，我为什么把⽂字 渲染了两遍？
那是因为 跑马灯效果，并不只是单纯的将⼀⾏⽂字动起来，还需要考虑消失的⽂字，需要接着从后边⽆缝的跑出来，其实⼀段⽂字也能跑，但是没有两段⽂字的效果完美。
扩展 如果是要求封装组件的话，只需要props接收参数，将 ⽂案 .txt 部分替换就好
当然还有更好的实现⽅式的话，欢迎评论区留⾔~

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