使用css绘制弹幕,实现弹幕效果的方法总结（css和canvas）

这篇文章主要介绍了关于实现弹幕效果的方法总结(css和canvas) ，有着一定的参考价值，现在分享给大家，有需要的朋友可以参考一下

之前在一个移动端的抽奖页面中，在抽奖结果的展示窗口需要弹幕轮播显示，之前踩过一些小坑，现在总结一下前端弹幕效果的实现方式。

css3实现乞丐版的弹幕

css3弹幕性能优化

canvas实现弹幕

canva弹幕的扩展功

1. css3实现乞丐版的弹幕

(1)如何通过css3实现弹幕

首先来看如何通过css的方法实现一个最简单的弹幕：

首先在html中定义一条弹幕的dom结构：

我是弹幕

弹幕的移动可以通过移动这个block来实现，以从右向左移动的弹幕为例，弹幕的初始位置在容器的最左侧且贴边隐藏(弹幕的最左边与容器的最右贴合),可以通过绝对定位加transform来实现：.block{

position:absolute;

}

初始位置：from{

left:100%;

transform:translateX(0)

}

移动到最左边的结束位置为(弹幕的最右边与容器的最左边贴合)：to{

left:0;

transform:translateX(-100%)

}

起始位置和结束位置的具体图示如下所示：