html 文字滚动组件
看了好多网上的文本组件,发现好多都有这样那样的问题;特别是滚动的时候失真的感觉,今天整合了文本滚动的方式用CSS的
animation写出一套组件;VUE项目直接用。感觉有用的朋友关注下 效果图,gif制作有卡顿,实际效果我是没发现卡顿使用方法
"app">横向文本滚动
class="inner2">class="scroll">
- for="item in arr2" :key="item"> {{item}}
class="inner2">class="scroll">
- for="item in arr" :key="item"> {{item}}
多行间歇滚动
class="inner">"arr"> 单行间歇滚动
class="inner2">"arr2"> 无缝滚动
class="inner">"arr"> 无缝滚动内容不足停止滚动
class="inner3">"arr2">
1. 横向文本滚动
/* 横向文本滚动 */class="scroll-inner" ref="scrollInner">class="scroll-wrap" ref="scrollWrap" :style="wrapStyle"> class="scroll-wrap">
2. 断点滚动
/* 间歇滚动 */class="scroll-inner">class="scroll-wrap" :style="scrollWrapClass" v-bind="$attrs">
- for="(item, index) in runArr" :key="index"> {{item}}
3. 无缝滚动
/* 无缝滚动 */class="scroll-inner" ref="scrollInner">class="scroll-wrap" v-bind="$attrs" :class="{canPause: canPause}" :style="wrapStyle" ref="scrollWrap">
- for="item in runArr" :key="item"> {{item}}
class="scroll-wrap" v-if="canRun">
- for="item in runArr" :key="item"> {{item}}