css3 实现文字横幅无缝滚动

使用 css3 关键帧 @keyframes 和 animation 属性实现文字横幅无缝滚动。

<template><div class="skiHallBanner"><div class="skiHallBanner-text"><span>{{ text }}</span></div></div>
</template><script>
import '@/utils/rem/skiHallBanner'export default {name: 'SkiHallBanner',data() {return {text: 'xxx公告xxx公告xxx公告xxx公告xxx公告'.repeat(2),}},
}
</script><style lang="scss" scoped>
.skiHallBanner {width: 2300px;height: 230px;background: url('../../assets/images/skiHall/banner.png') no-repeat 100%/100%100%;&-text {position: relative;width: 2160px;height: 100%;margin: 0 auto;overflow: hidden;white-space: nowrap;span {position: absolute;top: 0;font-size: 49px;font-family: Adobe Heiti Std;font-weight: normal;font-style: italic;color: #e4f2ff;text-align: left;line-height: 4.6;text-shadow: 5px 7px 0px rgba(0, 66, 255, 0.2),16px 23px 16px rgba(14, 19, 48, 0.52);animation: 26s scroll linear infinite normal;&::before {content: '';display: inline-block;width: 2180px;height: 100%;}}}
}@keyframes scroll {from {transform: translate(0%, 0);}to {transform: translate(-100%, 0);}
}
</style>