html中实现类似于弹幕的效果代码,前端实现弹幕效果的方法总结(包含css3和canvas的实现方式)...

前端实现弹幕效果的方法总结(包含css3和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%)

}

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