vue 跑马灯,vue文字滚动跑马灯
这篇文章主要为大家详细介绍了某视频剪辑软件动画动画实现跑马灯效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了某视频剪辑软件动画动画实现跑马灯效果的具体代码，供大家参考，具体内容如下
1、单行显示，每行只显示一条
效果图
上代码
模板
div class=容器
div class=box
！-假设列表列表有四个项，设置保险商实验所的宽度为800%(相对于框),设置里的宽度为12.5%(相对于保险商实验所是12.5%;相对于包厢是100%),但是里要有8个，其中四个是复制的，用来占位-
ul:style= width:列表。长度* 100 * 2 %；动画-持续时间：列表。长度* 2的；
李：style= width: 100/(列表。长度* 2) %；列表中的v-for=(item，index):key= index
div class= content"{ item。name } }/div
/李
李：style= width: 100/(列表。长度* 2) %；列表中的v-for=(item，index):key= index
div class= content"{ item。name } }/div
/李
/ul
/div
/div
/模板
脚本
导出默认值{
名称："活动",
data() {
返回{
列表：[
{姓名： 马云阿萨 },
{姓名： 雷军的 },
{姓名： 王勤啊啊啊啊 },
{姓名： 等伦伦 }
]
};
},
};
/脚本
样式范围。方框{
宽度：100%;
身高：0.6雷姆；
背景色：# b32855
溢出：隐藏；
}。框ul {
动画-名称：移动；
/* 在风格中动态设置每一个里花费的时间为2s */
/*动画——时长：8s；*/
动画-计时-功能：线性；
动画-迭代-计数：无限；
}
ul li {
浮动：左；
身高：0.6雷姆；
显示器：flex
对齐-项目：居中；
}
保险商实验所李。内容{
身高：0.4雷姆；
填充：0 0.2雷姆；
边框半径：0.2毫米；
背景色：rgba(0，0，0，0.2)；
颜色：# fff
显示器：flex
对齐-项目：居中；
justify-content:space-around；
}
@关键帧移动{
0% {
transform:平移x(0)；
}
100% {
/* 平移自身宽度的50%，ul宽度的50%,剩下的那50%用来在下一次显示时占位*/
transform:平移x(-50%)；
}
}
/风格
2、单行显示，每行显示多条
效果图
上代码
模板
div class=容器
div class=box
！-假设列表列表有四个项，设置保险商实验所的宽度为400%(相对于框),设置里的宽度为12.5%(相对于保险商实验所是12.5%;相对于包厢是50%),但是里要有8个，其中四个是复制的，用来占位-
ul:style= width:列表。长度* 100% %；动画-持续时间：列表。长度* 2的；
李：style= width: 100/(列表。长度* 2) %；列表中的v-for=(item，index):key= index
div class= content"{ item。name } }/div
/李
李：style= width: 100/(列表。长度* 2) %；列表中的v-for=(item，index):key= index
div class= content"{ item。name } }/div
/李
/ul
/div
/div
/模板
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。