animation实现
var winwidth = $(window).width();
$(".barrage p").each(function (index, value) {
var width = $(value).width()
$(value).css({ 'right': -width})
var keyframes = `
@keyframes ani${index} {
0%{
right:${-width}px
}
100%{
right:${winwidth}px
}
}
`
$("<style>").attr("type", "text/css").html(keyframes).appendTo($("head"));
var aniList = [5, 7, 9, 8];
var aniTime = Math.floor(Math.random() * 4);
$(value).css({ "top": `${index * 0.6}rem`;"animation": `ani${index} ${aniList[aniTime]}s linear ${index * 1.5+1}s infinite`, "-webkit-animation": `ani${index} ${aniList[aniTime]}s linear ${index * 1.5+1}s infinite` });
});
有个弊端，会掉帧。
为什么会卡顿？
有一个前提必须要提，前端开发者们都知道，浏览器是单线程运行的。但是我们要明确以下几个概念：单线程，主线程和合成线程。
虽然说浏览器执行js是单线程执行（注意，是执行，并不是说浏览器只有1个线程，而是运行时，runing），但实际上浏览器的2个重要的执行线程，这 2 个线程协同工作来渲染一个网页：主线程和合成线程。
一般情况下，主线程负责：运行 JavaScript；计算 HTML 元素的 CSS 样式；页面的布局；将元素绘制到一个或多个位图中；将这些位图交给合成线程。
相应地，合成线程负责：通过 GPU 将位图绘制到屏幕上；通知主线程更新页面中可见或即将变成可见的部分的位图；计算出页面中哪部分是可见的；计算出当你在滚动页面时哪部分是即将变成可见的；当你滚动页面时将相应位置的元素移动到可视区域。
那么为什么会造成动画卡顿呢？
原因就是主线程和合成线程的调度不合理。
下面来详细说一下调度不合理的原因。
在使用height，width，margin，padding作为transition的值时，会造成浏览器主线程的工作量较重，例如从margin-left：-20px渲染到margin-left:0，主线程需要计算样式margin-left:-19px,margin-left:-18px，一直到margin-left:0，而且每一次主线程计算样式后，合成进程都需要绘制到GPU然后再渲染到屏幕上，前后总共进行20次主线程渲染，20次合成线程渲染，20+20次，总计40次计算。
浏览器的渲染引擎工作的几个关键环节：
1.使用 HTML 创建文档对象模型（DOM）
2.使用 CSS 创建 CSS 对象模型（CSSOM）
3.基于 DOM 和 CSSOM 执行脚本（Scripts）
4.合并 DOM 和 CSSOM 形成渲染树（Render Tree）
5.使用渲染树布局（Layout）所有元素
6.渲染（Paint）所有元素**
也就是说，主线程每次都需要执行Scripts，Render Tree ,Layout和Paint这四个阶段的计算。
而如果使用transform的话，例如tranform:translate(-20px,0)到transform:translate(0,0)，主线程只需要进行一次tranform:translate(-20px,0)到transform:translate(0,0)，然后合成线程去一次将-20px转换到0px，这样的话，总计1+20计算。
由此可见，通过定位来实现动画是很耗性能的。所以改成transform
@keyframes ani${index} {
0%{
transform:translateX(0);
}
100%{
transform:translateX(-300%)
}
效果确实比定位要好
canvas画布实现
css部分
<style>
.main{
position: absolute;
left: 40%;
top: 40%;
}
#canvas{
background: #000;
}
</style>
html部分
<div class="main">
<canvas id="canvas" width="500" height="500">您的浏览器不支持，请升级</canvas>
</div>
js部分
<script>
var canvas=document.getElementById("canvas")
if(canvas.getContext){
var cvs=canvas.getContext('2d')
cvs.font="20px"
var textArr=[
"17素材网不错我经常去，嘿嘿！",
"今晚有没有LOL的一块啊？",
"这种烟真心不好抽",
"星期天我想去爬长城",
"边喝酒边看电影",
"如果有任何疑问可以扫码联系我哦！"
]
var colorArr=["yellow","pink","orange","red","green"];
var numArrL=[80,100,5,300,500,430];//初始的X
var numArrT=[80,100,20,300,380,210];//初始的Y
setInterval(function(){
cvs.clearRect(0,0,500,500)
cvs.save()
for(var i=0;i<textArr.length;i++){
numArrL[i]-=(i+1)*0.6;
cvs.fillStyle=colorArr[i]
cvs.fillText(textArr[i],numArrL[i],numArrT[i])
}
for(var j=0;j<textArr.length;j++){
if(numArrL[j]<=-500){
numArrL[j]=400;
}
}
cvs.restore()
},30)
}else{
console.log(111)
}
</script>
canvas 的save()方法：保存状态
canvas的restore()方法：恢复之前保存的状态，防止save之后的操作对canvas有影响
