纯CSS实现弹幕效果

动画相关的属性和方法已经本部分的开头简单提过了，我们来看一下本次要实现的效果——弹幕～

当你在阅读、看视频的时候经常会遇见一段文件或者一张表情从页面划过，要实现一个完整的功能很复杂，但是我们仅仅是看上去和它一样即可～

先放一下实现出来的效果图

有轨弹幕

看标题就可以知道，我们要实现的的在固定行上移动的弹幕（再自己的轨道上移动）。

一、简单画一个背景板，三个轨道

CSS:

.box{width: 600px;height: 240px;background: rgba(0,0,0,0.1);margin: 100px auto 0;display: flex;flex-direction: column;justify-content: space-around;overflow: hidden;
}
.track{height: 30px;border: 4px solid rgba(0,0,0,0.3);
}

Html

<div class="box"><div class="track"></div><div class="track"></div><div class="track"></div>
</div>

效果图：

二、在每条轨道上添加一条文字

<div class="box"><div class="track"><div class="child child-1">我是弹幕</div></div><div class="track"><div class="child child-2">我是弹幕</div></div><div class="track"><div class="child child-3">我是弹幕</div></div>
</div>

三、添加动画，让文字动起来

这里为了让大家有一个直观的感受，我用代码来将一个div盒子移动的全过程显示出来（弹幕），我们来看看它的背后都经历了什么～

移动的思想

注意实际情况是，可视区域外的元素是不会被看见的（设置overflow：hidden）
用户可通过transform:translateX()的方式进行移动，也可以通过 left、right的方式进行移动.

附上CSS代码（Html代码同上一步骤）：

Css：

.box{width: 600px;height: 240px;background: rgba(0,0,0,0.1);margin: 100px auto 0;display: flex;flex-direction: column;justify-content: space-around;overflow: hidden;
}
.track{height: 40px;border: 4px solid rgba(0,0,0,0.3);color: rgb(127, 197, 35);
}
.child{width: 80px;height: 20px;border: 2px solid red;margin-bottom: 20px;transform: translateX(1000px);animation: scrollTo linear 4s infinite
}// 弹幕盒子的样式
@keyframes scrollTo {to{transform: translateX(-100px);}
}

效果图：

注意：

此时三条弹幕的运动速度相同，起始点和结束点的位置也相同，效果如图上

四、优化弹幕（注意，这里的代码为修改部分，最后会贴出完整代码）

先上一个真实的弹幕截图

我们总结一下他有什么特点？

弹幕通常在屏幕的上部分
为了区别每一条弹幕，颜色会有不同
每条弹幕的移动速度都不会相同
弹幕的数量可以适当的增加
（题外话，弹幕比电视剧有意思的多～）

我们一一去实现它

弹幕通常在屏幕的上部分
- 调整一下可视区域的宽高比。

.box{width: 800px;height: 400px;background: rgba(0,0,0,0.1);margin: 100px auto 0;overflow: hidden;
}
.track{height: 40px;line-height: 40px;border: 2px solid rgba(0,0,0,0.3);margin-bottom: 5px;
}

为了区别每一条弹幕，颜色会有不同
- 删除弹幕的边框。
- 修改弹幕的文案。
- 调整弹幕颜色、适当添加光效。

.child{width: 80px;line-height: 20px;margin-bottom: 10px;text-shadow: 2px 2px 2px rgba(0,0,0,0.1)
}
//第一个弹幕
.child-1{color: brown; //文字颜色text-shadow: 2px 2px 3px rgb(248, 81, 20); // 文字阴影transform: translateX(1000px);  //文字起始位置animation: scrollTo linear 4s infinite; //动画
}
//第二个弹幕
.child-2{color: rgb(127, 197, 35);//文字颜色text-shadow: 2px 2px 3px rgb(173, 255, 80);// 文字阴影transform: translateX(1050px); //文字起始位置animation: scrollTo linear 7s infinite; //动画
}
//第三个弹幕
.child-3{color: coral;//文字颜色text-shadow: 2px 2px 3px coral; // 文字阴影transform: translateX(800px); //文字起始位置animation: scrollTo linear 5s infinite; //动画
}
@keyframes scrollTo {to{transform: translateX(-100px);}
}

效果如图

这里我们不考虑数量的增加，大家可以考虑用Js动态生成弹幕的方式，本篇文章仅考虑用纯CSS模拟一个弹幕，并尽可能真实。

PS：（如果你想增加弹幕的数量，可以在代码中在复制child-X出来）

最后优化

最后我们要做的事
1. 给它添加一张背景图（假装我们在看剧）
2. 删除凸显轨道的边框
3. 微调整体样式

最后的结果就是这样

本篇博客会收录到有趣的CSS仓库中

有趣的CSS传送门

如果您觉得感兴趣，或者还有帮助到您，不妨给我的github点个star吧～

github传送门

纯CSS实现弹幕效果相关推荐

纯 CSS 实现波浪效果！
一直以来,使用纯 CSS 实现波浪效果都是十分困难的. 因为实现波浪的曲线需要借助贝塞尔曲线. 而使用纯 CSS 的方式,实现贝塞尔曲线,额,暂时是没有很好的方法. 当然,借助其他力量(SVG.CAN ...
制作css开关,纯css实现开关效果
大家好,我又来了,这次给大家表演使用纯css实现开关效果首先是构思我们使用标签来实现这个效果. checkbox的选中.未选中的特性,刚好对应开关的打开.关闭 on:打开 off:关闭未选中,则 ...
html实现开关,使用纯css实现开关效果
首先是构思我们使用标签来实现这个效果. checkbox的选中.未选中的特性,刚好对应开关的打开.关闭 on:打开 off:关闭未选中,则关闭开关选中,则打开开关开始画出off.on状态的草图 ...
如何用纯 CSS 实现优惠券效果
背景本文来自CODE.FUN ,讲述如何用纯 CSS 实现优惠券效果的实践案例,分享给大家. 优惠券视觉效果上面是优惠券的视觉效果,本文分享如何使用纯 CSS 实现它的主要框架,希望对大家有 ...
Php开源h5相册系统,HTML5 CSS3专题纯CSS打造相册效果的示例代码详解
HTML5 CSS3专题纯CSS打造相册效果的示例代码详解: 今天偶然发现电脑里面还有这样的一个例子,感觉效果还不错,不记得啥时候下载的了,也好久没上w3cfuns了,怀念学习前台的日子,给大家分享 ...
css中间镂空,怎么用纯CSS实现镂空效果
怎么用纯CSS实现镂空效果发布时间:2021-03-19 09:49:16 来源:亿速云阅读:99 作者:小新小编给大家分享一下怎么用纯CSS实现镂空效果,希望大家阅读完这篇文章之后都有所收获, ...
纯css实现信封效果
纯css实现信封效果 <body><div id="dialog"><div id="envelope"><div i ...
HTML中 css红绿黄灯,纯CSS实现红绿灯效果(面试常见)
先看题,别看答案试下吧 ~_~ 1.下面的代码输出的内容是什么? function O(name){ this.name=name||'world'; } O.prototype.hello=func ...
css3波浪纹路_纯 CSS 实现波浪效果！
一直以来,使用纯 CSS 实现波浪效果都是十分困难的. 因为实现波浪的曲线需要借助贝塞尔曲线. 而使用纯 CSS 的方式,实现贝塞尔曲线,额,暂时是没有很好的方法. 当然,借助其他力量(SVG.CAN ...

纯CSS实现弹幕效果

纯CSS实现弹幕效果

有轨弹幕

一、简单画一个背景板，三个轨道

二、在每条轨道上添加一条文字

三、添加动画，让文字动起来

四、优化弹幕（注意，这里的代码为修改部分，最后会贴出完整代码）

这里我们不考虑数量的增加，大家可以考虑用Js动态生成弹幕的方式，本篇文章仅考虑用纯CSS模拟一个弹幕，并尽可能真实。

最后优化

有趣的CSS传送门

github传送门

纯CSS实现弹幕效果相关推荐

最新文章

热门文章