专栏名称: 新媒体大学
9年互联网+垂直行业经验,只做精品的新媒体课程。
目录
相关文章推荐
魁北客传媒  ·  魁北克华人便利店老板仰天长叹,政府把6000 ... ·  23 小时前  
魁北客传媒  ·  魁北克华人便利店老板仰天长叹,政府把6000 ... ·  23 小时前  
济南时报  ·  黄晓明最新发声 ·  昨天  
济南时报  ·  黄晓明最新发声 ·  昨天  
坦克的书摊儿  ·  唐果——角色图! ·  3 天前  
广西交通台  ·  太意外!44岁女演员官宣分手 ·  3 天前  
广西交通台  ·  太意外!44岁女演员官宣分手 ·  3 天前  
南京日报  ·  呀,哪吒“露馅”了…… ·  3 天前  
南京日报  ·  呀,哪吒“露馅”了…… ·  3 天前  
51好读  ›  专栏  ›  新媒体大学

为你们准备了一个可以刷爆朋友圈的黑科技,要吗?

新媒体大学  · 公众号  ·  · 2017-07-08 19:40

正文

今天推什么? 明天推什么? 这是今天的原创文,大家帮忙转发一下呗 天天都想10W+
0成本涨粉10W+ 转发朋友圈才是兄弟 发送前预览10遍 粉丝爹爹千万别取关!



上周 滴滴顺风车凭借一条“咋眼看上去没有文字,但其实点击就会出现内容”的推文一举刷爆了朋友圈 (还没有看过的小伙伴点击这里 :-)


顿时在业界掀起一股排版黑科技浪潮,微信小编们纷纷模仿。有部分运营经验稍丰富的小编已经做出来了,但还是有 很多小伙伴不会做。


其实“点击后出现文字”的原理跟上面的弹幕一样,涉及到修改代码。 但千万不要听到需要修改代码就怕了,代码没大家想象的那么难。


今天小编以拆解上面的弹幕制作原理, 带大家走进代码的世界。




打开HTML编辑模式


如果小伙伴们有一直关注新媒体大学订阅号的推文,应该知道前段时间小王推过一篇文章里面教过大家如何打开浏览器的HTML编辑模式(忘记的朋友可点击 传送门 回看


打开HTML编辑模式的操作很简单:

第一步,把鼠标移动至浏览器的部分,右键点击“审查元素”。


因为各家的浏览器不一样,你也可以直接 按快捷键F12或Fn+F12.



第二步,在网页下方或右方就会下面的代码区域



第三步,点击导航栏“放大镜” (各家浏览器图标会不太一样) ,成功点击后图标会变成蓝色。



第四步,将鼠标移动至编辑区域,选中要添加弹幕的地方,然后插入段代 码,然后就大功告成。





拆解弹幕代码


看完上面的操作还是不会怎么办?别急,下面小编给你一步步讲解。



rgb: 表示弹幕文字颜色;


font-size: 表示字号大小;


text: 表示一条完整的弹幕信息;


animate attributename=“x”: 表示弹幕左右飞行 (x代表左右飞行;y代表上下飞行,可选择上下飞行的样式切换);


from...to...: 表示弹幕左右起始距离,决定弹幕之间的距离;


begin: 表示弹幕延迟,决定这条弹幕出现在屏幕内的先后顺序;


dur: 表示弹幕速度:决定弹幕的飞行速度。




修改弹幕效果展示


1)修改弹幕颜色

修改rgb的颜色即可改变弹幕的颜色,如








请到「今天看啥」查看全文