html点击按钮切换图片代码_排版技巧｜不懂代码也能搞定弹幕样式

弹幕样式

ID:95631

【样式介绍】：在样式区域内顺序飘过的文字效果，可分为有背景与无背景弹幕样式。

【以下样式均可使用本教程进行修改操作】：

ID90308；ID90306；ID90307；ID90019；ID90018；ID90017；ID89134；ID91743；ID89438；ID86297

【可调整参数】：弹幕文字、颜色、背景图片、运动方向、文字大小、运动速度、起始位置。

由于编辑器升级了专业版，简化了部分svg样式的操作流程，使得修改svg样式大部分参数无需再通过html代码实现。

将编辑器切换到专业版模式，点击样式区域弹出对话框，在【全局样式】中点击动画按钮，开始修改SVG样式参数。

1.修改文字
弹出动画设置框后，在【文字】栏修改弹幕文字。由于案例中的弹幕样式一共由10句话组成，所以需要从1-10分别进行文字动画效果的设置与修改。

（更换文字前vs更换文字后）

2.修改字号、颜色

弹出动画设置框后，在【字号】栏修改弹幕文字的字号、颜色，还可以选择是否对重点文字进行加粗展示。适用于有色彩的弹幕样式。

（修改字号/字色前vs修改字号/字色后）

3.修改运动速度

弹出动画设置框后，在【运动快慢】栏设置弹幕文字飘过屏幕的运动速度。秒数越高，文字运动速度越慢；秒数越低，文字运动速度则越快。

建议设置文字运动速度在7-20s之间，过快过慢都会影响用户的阅读体验。

4.修改弹幕背景图片

135提供了两种弹幕样式，一种是有背景图的，一种是没有背景图的。要更换背景图建议直接使用此样式（id86279），我们可以通过点击弹幕样式图片区域，使用换图的方式进行图片替换。

（换图前vs换图后）

5.修改弹幕位置与顺序

如果我们想在弹幕样式上玩出更多的创意，还可以更改弹幕文字的运动起始位置或出场顺序。这里选择样式id89438作为案例参考。

为了方便大家阅读，这里简单更改了样式的颜色和字号大小。打开HTML按钮，找到此样式对应代码段，更改“from”和“to”的数值即可。

这个弹幕位置值是：from="500" to="-600"

如果想让它从中间的位置开始飘，可以修改from值="150"（修改后的效果见下方）

如果我们把起始数值改成from="-600" to="500"，那么弹幕样式就变为倒着入场。

【温馨提示】

通过好友邀请注册135编辑器，成功邀请后 邀请者 和 被邀请者 双方都可获得7天白银会员。没有获得邀请链接可以关注公众号 135编辑器（ID：editor135），从菜单栏获取邀请链接。

如果你还没有注册135编辑器账号，你也可以通过这个链接注册：Register-135编辑器即可获得7天白银会员。