纯css写滚动的弹幕特效

最近在写一个春节活动，里面有一个类似拼多多展示中奖用户的弹幕滚动。

后台给了随机滚动将近一百条数据，之前写过一版，是使用定位，将数据顶上去，但是一秒一动的效果略略有些卡顿。后来决定使用css动画来实现

先来上代码吧

<view class="chat"><view class="chatInfo"  v-for="(item,i) in chatArr" :key='i'><view class="chatItem">{{item}}</view><br></view>
</view>

css代码

.chatInfo{position: relative;top: 0;animation: rowScrollTest 200s linear infinite;
}
@keyframes rowScrollTest {0% {top: 0;}100% {top:-3960rpx;//高度是我自己计算的，因为展示的内容不重要，高度就随意了一些；}
}

　　效果如图

纯css写滚动的弹幕特效相关推荐

只需一个DOM，纯CSS实现线性跑马灯特效
只需一个DOM,纯CSS实现跑马灯线性特效引言跑马灯效果图&Demo 跑马灯代码样式分析解释引言之前看到一个效果,一条小细线,围绕着边框一直绕圈,不过它的实现方式使用了JavaScr ...
纯css写单选框和复选框的样式和功能
只用纯css写的单选框和复选框的样式和功能该怎么写?看这里,复制下面的代码运行一遍就知道了,快试试吧! 效果截图: <!doctype html> <html lang=" ...
175.纯 CSS 实现视频转场特效
效果 (源码网盘地址在最后) 源码 index.html <!DOCTYPE html> <html lang="en"><head><m ...
android三角形切图软件,还在为小三角形切图？使用纯CSS写一个简单的三角形
同学们,当美工给的设计图是这样: 或者这样: 我的内心其实是拒绝的-_-:但工作还得干,大部分同学会写 .icon{width:20px;height:20px;display:block;margi ...
纯css写的类似花纹图案的立体动态旋转
纯css写的类似花纹图案的立体动态旋转动态中的静态截图 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN&qu ...
纯css写出来的小彩虹
文章目录下面是效果图下面是源代码学到的知识点今天在CodePen上看见一个用纯css写出来的动画,所以就自己敲了一下源代码链接下面是效果图下面是源代码 <head><m ...
html css字幕滚动代码,纯CSS实现滚动3D字幕
一直以来我都想做一个滚动文本的效果,虽然有几种方法实现,其中还有使用WebGL的方法.但我还是想使用HTML和CSS来实现这样的效果. 很多年以前,在Web上实现滚动文本的动画效果一般是采用marqu ...
纯CSS打气球爆炸js特效
下载地址纯CSS打气球爆炸特效,没有使用任何JavaScript代码,可以打破气球的网页特效. dd:
html百叶窗效果代码,纯CSS 3D百叶窗图像过渡特效
你可能已经在网上看到过不少使用jQuery制作的百叶窗效果,我们可不可以使用纯CSS来完成这项工作呢?答案是肯定的.我们不仅可以制作出这种百叶窗效果,还可以使它具有响应性. 要制作纯CSS的百叶窗效果 ...

纯css写滚动的弹幕特效

纯css写滚动的弹幕特效相关推荐

最新文章

热门文章