前端实现弹幕效果的方法总结(包含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%)
}
起始位置和结束位置的具体图示如下所示: