通过CSS3实现弹幕效果
想要做个疯狂的网页弹幕？没问题，CSS3统统帮你搞定！利用它，你可以做出漂亮到爆的文字蹦出效果，简直让人着迷，同时还能加强与用户间的互动~
我是弹幕
使用CSS3实现乞丐版的弹幕
.block{
position:absolute;
}
就这么简单的弄个CSS3动画，我们也能轻松搞定滚动弹幕。首要任务就是搞定弹幕的HTML结构，再用CSS搞定它们的样子还有动起来的方式，文字就能像子弹一样从右边飞到左边。这个方法虽然很简单，但是应付大部分情况都还行！
from{
left:100%;
transform:translateX(0)
}
搞好弹幕效果要注意字数啊、速度啦还有动画设定这些事情。开关弹幕、控制节奏这些都不是事儿！用CSS3做出的弹幕，网页瞬间有趣可爱起来了。
to{
left:0;
transform:translateX(-100%)
}
解决CSS3弹幕效果中的性能问题
@keyframes barrage{
from{
left:100%;
transform:translateX(0);
}
to{
left:0;
transform:translateX(-100%);
}
}
要是想在网站上搞个弹幕效果，用CSS3还真挺方便的。只不过，手机看起来就容易卡卡的还有耗电量大些。要搞定这个问题，你可以试试开启动画特效或者调节一下硬件速度。
.block{
position:absolute;
/* other decorate style */
animation:barrage 5s linear 0s;
}
想要网页速度飞快？试试看硬件加速！让浏览器把作图的活交给GPU处理，CPU就可以休息，加载网页瞬间提升好几倍！再者，把动画效果换成translate3d，立马就能启动硬件加速，网页流畅得飞起。
别折腾了，尽量避免那种让浏览器崩溃的行为，比如在弹幕中乱窜。这能稍微降低回流的影响~记得在制作动画时也得注意它的性能，看情况优化一下哈～
使用Canvas实现弹幕效果
话说不仅是CSS3，用Canvas也能做出超炫的弹幕！Canvas就是HTML5送给我们的大宝剑，让每一个像素都听你指挥。对那些经常要改来改去、搞活动的小伙伴们来说，真是太给力了。
用Canvas做弹幕超简单，就靠那个定时器！设定时间后，文字就会自动滚动了，还能随心所欲地变换它们的样子和路径。外面办事儿时，想怎么改都行，特别适合需要很多特效的你，方便快捷！
画布上玩转弹幕？那可得处理好快速出字、找准坐标和防止撞车这些麻烦事。 Canvas的功能虽然比CSS3多，但设计和优化起来可真够折腾人的
总结与展望
看完这个之后，你会发现CSS3跟Canvas都是能干掉弹幕效果滴！但它们各有所长，适合不同的场合CSS3，轻轻松松就能搞定弹幕，但是遇到有点麻烦或要求特殊效果的时候，那可得靠Canvas了。
棍棒！网络前端技术可是飞快以后咱们肯定会看见好多炫酷实用的弹幕！就像WebGL还有Web Animation API这种新的技术，说不定能给我们带来更多新奇的想法。希望这篇小文章能帮助大家解决前端设计中的弹幕问题喽！
@keyframes barrage{
from{
left:100%;
transform:translate3d(0,0,0);
}
to{
left:0;
transform:translate3d(-100%,0,0);
}
}
。
评论0