之前项目遇到一个小的文字跑马灯特效，查阅了一下，可以采用html的marquee标签制作，但是兼容性不好；还可以采用css3动画制作，也可以采用js制作，但是最后采用css3动画制作以减少性能消耗;
啥话不多说，直接上代码
<template>
<div class="lap-coponent">
<div class="container">
<div class="lap">{{ text }}</div>
</div>
</div>
</template>
<script>
export default {
name: "LapComponent",
data() {
return {
text: "跑马灯测试",
};
},
mounted() {},
};
</script>
<style scoped lang="less">
.container {
margin-left: calc(50% - 100px);
width: 200px;
height: 40px;
overflow: hidden;
white-space: nowrap;
.lap {
display: inline-block;
padding-left: 100%;
animation: lapAnimate 8s linear infinite;
}
}
@keyframes lapAnimate {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-100%);
}
}
</style>
这样简单的文字跑马灯就出来啦
