微信公众号文章的弹幕效果怎么制作
百度UED编辑器
在百度里搜索到百度的这个编辑器,UEditor是由百度web前端研发部开发所见即所得富文本web编辑器,点进官网。
点进官网之后你会发现是这个界面,先不要急着下载,点击下中间的演示的选项,就是跳转到编辑的页面上去。
接着上一步到编辑之后,点击下左边那个小小的按钮HTML,直接将下面这段代码复制到编辑器里面去,当然文字的内容可以修改。
<p> <br/></p><section label="Copyright © 2016 playhudong All Rights Reserved." style="border:none;border-style:none;margin: 1em auto;width:100%;" id="shifu_bar_001" donone="shifuMouseDownStyle('shifu_bar_001')"> <svg class="xhr" xmlns="http://www.w3.org/2000/svg" style="width:100%;height:20em;background:rgb(255,255,255);box-sizing:border-box"> <text y="40" x="-5.34998" fill="rgb(235,166,36)" style="font-size:1em;box-sizing:border-box"> 好牛啊,好厉害 <animate attributename="x" from="800" to="-400" begin="3s" dur="11s" repeatcount="indefinite" style="box-sizing:border-box;"></animate> </text> <text y="90" x="736.008" fill="rgb(223,34,28)" style="font-size:1.2em;box-sizing:border-box"> 哈哈哈哈 <animate attributename="x" from="800" to="-400" begin="1s" dur="10s" repeatcount="indefinite" style="box-sizing:border-box;"></animate> </text> <text y="120" x="261.763" fill="rgb(40,216,8)" style="font-size:1em;box-sizing:border-box"> 我要上电视,终于上电视了,o(≧v≦)o~~好棒 <animate attributename="x" from="800" to="-600" begin="2s" dur="14s" repeatcount="indefinite" style="box-sizing:border-box;"></animate> </text> <text y="160" x="-541.18" fill="rgb(33,25,23)" style="font-size:0.875em;box-sizing:border-box"> 没人有问题问我吗? <animate attributename="x" from="800" to="-800" begin="3s" dur="10s" repeatcount="indefinite" style="box-sizing:border-box;"></animate> </text> <text y="210" x="527.729" fill="rgb(70,118,217)" style="font-size:1em;box-sizing:border-box"> 这个功能太棒了,不用就浪费了 <animate attributename="x" from="800" to="-800" begin="5s" dur="14s" repeatcount="indefinite" style="box-sizing:border-box;"></animate> </text> <text y="240" x="184.871" fill="rgb(255,92,139)" style="font-size:0.7em;box-sizing:border-box"> 哈哈哈哈哈哈 <animate attributename="x" from="800" to="-800" begin="2s" dur="14s" repeatcount="indefinite" style="box-sizing:border-box;"></animate> </text> <text y="280" x="-273.8" fill="rgb(7,140,59)" style="font-size:1.2em;box-sizing:border-box"> 哈哈哈哈 <animate attributename="x" from="800" to="-800" begin="3s" dur="11s" repeatcount="indefinite" style="box-sizing:border-box;"></animate> </text> </svg></section><p class="shifubrush"> <br/></p>
复制进去后,记住文字内容可以修改但是代码不要修改,复制好了之后再点击下HTML,就会看到弹幕飘来飘去的效果了,但是这个缺点就是不能直接应用到微信后台。
下面给大家介绍个傻瓜式的微信编辑器,你只需要更换弹幕的文字内容,然后直接复制到微信后台就可直接应用这个弹幕效果了。
这里不直接说是哪个编辑器了,大家可以在百度搜索,弹幕微信编辑器就可找到几个可以编辑弹幕的微信编辑器,界面和其他微信编辑器是差不多的。
最下面有个弹幕点击下,然后中间就会出来几个效果的,一个是图片上面覆盖弹幕的,还有是直接文字弹幕的,选择点击其中一个效果,右边编辑器就会出来,点击下右上角的HTML,编辑把你想要的文字即可。
编辑好文字之后,再点击下HTML,弹幕效果就出来了,如果改变图片点击图片改变即可,然后就可以直接复制到微信公众后台到文章里面使用了。