我是个注重精致形式多于内容的人,可能注定了做不好编辑只能做产品运营。今天杜蕾丝的微信公众号推送在大鹏的照片上应用了弹幕。
看上去非常的接地气,一点也不土。实现起来也不费劲。 首先注册一个i排版,然后去后台点html代码按钮,再然后,贴上下面这段代码。
背景图片地址填到下面image:url后面的括号里,图片大小配合svg width后面的宽和高。文字大家都会改,文字前的font-family是字体,font-size是字号,y和x是弹幕滚犊子的起始点,fill后面的颜色代码随便找个取色器就行。
编辑完直接微信同步,就出现在公众号的后台了。
<section class=”addbg1″ style=”background-image:url(https://image.ipaiban.com/upload-ueditor-image-20180426-1524732989298045568.jpg);background-color:rgba(255, 255, 255, 0);background-postion:center;background-size:100%;padding:1rem 0;box-sizing: border-box;overflow: hidden;”>
<svg width=”600″ height=”703″ xmlns=”http://www.w3.org/2000/svg” style=”box-sizing: border-box;”>
<text font-family=”microsoft yahei” font-size=”20″ y=”40″ x=”-178.182″ fill=”#FFCBD4″ style=”box-sizing: border-box;”>
做人呢,最紧要就是开心!
<animate attributename=”x” from=”800″ to=”-400″ begin=”0s” dur=”11s” repeatcount=”indefinite” style=”box-sizing: border-box;”></animate>
</text>
<text font-family=”microsoft yahei” font-size=”22″ y=”149″ x=”104.854″ fill=”#FF6600″ style=”box-sizing: border-box;”>
直接搜hao_nb关注微信公众号:流弊闪闪放光彩,就可以勾搭我了!
<animate attributename=”x” from=”800″ to=”-400″ begin=”3s” dur=”10.3s” repeatcount=”indefinite” style=”box-sizing: border-box;”></animate>
</text>
<text font-family=”microsoft yahei” font-size=”18″ y=”75″ x=”-85.1852″ fill=”#fffffb” style=”box-sizing: border-box;”>
你饿不饿?我下面给你吃吧……
<animate attributename=”x” from=”800″ to=”-400″ begin=”1s” dur=”10.8s” repeatcount=”indefinite” style=”box-sizing: border-box;”></animate>
</text>
<text font-family=”microsoft yahei” font-size=”17″ y=”108″ x=”-80″ fill=”#463a3e” style=”box-sizing: border-box;”>
你走,你也走,都给走!!
<animate attributename=”x” from=”800″ to=”-400″ begin=”2s” dur=”9.5s” repeatcount=”indefinite” style=”box-sizing: border-box;”></animate>
</text>
<text font-family=”microsoft yahei” font-size=”18″ y=”175″ x=”258.182″ fill=”#FA9D87″ style=”box-sizing: border-box;”>
你就只顾自己爽,有考虑过我的感受吗?
<animate attributename=”x” from=”800″ to=”-400″ begin=”4s” dur=”11s” repeatcount=”indefinite” style=”box-sizing: border-box;”></animate>
</text>
<text font-family=”microsoft yahei” font-size=”14″ y=”210″ x=”433.846″ fill=”#463A3E” style=”box-sizing: border-box;”>
你知不知道大家都好担心你会下垂啊!
<animate attributename=”x” from=”800″ to=”-400″ begin=”5s” dur=”13s” repeatcount=”indefinite” style=”box-sizing: border-box;”></animate>
</text>
<text font-family=”microsoft yahei” font-size=”20″ y=”280″ x=”-178.182″ fill=”#deab8a” style=”box-sizing: border-box;”>
虾:这就叫做牡丹花下死,做鬼也风流!
<animate attributename=”x” from=”800″ to=”-400″ begin=”0s” dur=”11s” repeatcount=”indefinite” style=”box-sizing: border-box;”></animate>
</text>
<text font-family=”microsoft yahei” font-size=”22″ y=”333″ x=”104.854″ fill=”#2b4490″ style=”box-sizing: border-box;”>
项链和我的是同款!
<animate attributename=”x” from=”800″ to=”-400″ begin=”3s” dur=”10.3s” repeatcount=”indefinite” style=”box-sizing: border-box;”></animate>
</text>
<text font-family=”microsoft yahei” font-size=”18″ y=”450″ x=”-85.1852″ fill=”#817936″ style=”box-sizing: border-box;”>
妹子联系方式给我,晚上我教你做虾……
<animate attributename=”x” from=”800″ to=”-400″ begin=”1s” dur=”10.8s” repeatcount=”indefinite” style=”box-sizing: border-box;”></animate>
</text>
<text font-family=”microsoft yahei” font-size=”17″ y=”600″ x=”-80″ fill=”#afb4db” style=”box-sizing: border-box;”>
妹子几岁了?有男朋友了吗?
<animate attributename=”x” from=”800″ to=”-400″ begin=”2s” dur=”9.5s” repeatcount=”indefinite” style=”box-sizing: border-box;”></animate>
</text>
<text font-family=”microsoft yahei” font-size=”18″ y=”640″ x=”258.182″ fill=”#402e4c” style=”box-sizing: border-box;”>
好大的虾?
<animate attributename=”x” from=”800″ to=”-400″ begin=”4s” dur=”11s” repeatcount=”indefinite” style=”box-sizing: border-box;”></animate>
</text>
<text font-family=”microsoft yahei” font-size=”14″ y=”680″ x=”333.846″ fill=”#feeeed” style=”box-sizing: border-box;”>
大吉大利,晚上吃鸡儿!
<animate attributename=”x” from=”800″ to=”-400″ begin=”5s” dur=”13s” repeatcount=”indefinite” style=”box-sizing: border-box;”></animate>
</text>
</svg>
</section>