引言
最近由于实在挺忙的，就没有时间写东西，憋了好几个题材，打算在接下来的复习周学得无聊的时候就写写，这是第一个。（然而现在并没到复习周呵呵呵
最初这些效果都是我从其他推送看来的，至于是哪篇推送我也忘记了哈哈哈哈哈哈哈...
先看效果：
【群星闪耀】第五届SKY之星评选开始接受报名
『迎接我们的18』2017-2018跨年留言征集活动
你可以看到，在里头是包含两种效果的：
- 图文渐显
- 弹幕效果
由于第二种效果已经看到有的编辑器（i排版，在他的互动样式里头）已经玩出花来了，并且它的实现比较简单，就不教了，具体可以参考这篇文章：弹幕还可以点击显示！？你需要了解的弹幕排版都在这里了
这里主要介绍第一种效果（图文渐显）的实现。
正文
准备
- 看懂本文需要一些基本的HTML知识，可以从w3school的HTML教程中基础、属性、元素的篇章中获得。
- 你或许需要一个称手的文本编辑器：Notepad++
在编辑时将语言设置为HTML即可获得良好的阅读体验👍
在使用时请把自动换行关掉 - 鉴于易用性以及广告骚扰等原因，这里我们用135编辑器，而非 i 排版
- 善于使用
Ctlr + A - HTML源码
你可以轻松地从网页中获取它的全套源码，如果你懒的话在这里我也单独给出：
这里你会理解我为啥叫你用Notepad++而不是记事本
文字渐显：
<section style="border-width: initial; border-color: initial; border-style: none; margin: 0rem auto;">
<section style="overflow: hidden; text-align: center;">
<section style="width: 100%; padding: 0rem 1rem; font-size: 0.875rem; line-height: 1.5; height: auto; overflow: hidden;" data-width="100%">
<p class="" data-brushtype="text" style="text-align: center;">
<span style="font-size: 16px; font-family: 微软雅黑;">你！的！文！本！你！的！文！本！</span>
</p>
</section>
<svg width="100%" class="hiddenIn135" style="width:100%;height:40rem;margin-top:-40rem" data-width="100%">
<rect style="width:100%;height:40rem;opacity:1;fill: #fff;" data-width="100%">
<animate attributename="opacity" begin="2000ms" dur="1s" from="1" to="0" fill="freeze"></animate>
</rect>
</svg>
</section>
</section>
图片渐显：
<section style="border-width: initial; border-color: initial; border-style: none; margin: 0rem auto;">
<section style="overflow: hidden; text-align: center;">
<section style="width: 100%; padding: 0rem 1rem; font-size: 0.875rem; line-height: 1.5; height: auto; overflow: hidden;" data-width="100%">
<p class="135brush" data-brushtype="text" style="text-align: center;">
<img data-src="http://你的图片链接你的图片链接" style="z-index: -1; cursor: pointer; text-align: center; white-space: pre-wrap; width: auto !important; height: auto !important; visibility: visible !important;" class=" " data-ratio="0.32669616519174044" data-w="1356" data-type="gif" src="http://你的图片链接你的图片链接" data-fail="0"/>
</p>
</section>
<svg width="100%" class="hiddenIn135" style="width:100%;height:40rem;margin-top:-40rem" data-width="100%">
<rect style="width:100%;height:40rem;opacity:1;fill: #fff;" data-width="100%">
<animate attributename="opacity" begin="2000ms" dur="1s" from="1" to="0" fill="freeze"></animate>
</rect>
</svg>
</section>
</section>
文字渐显
文字的效果编辑我们分为两个部分：
- 文本、出现时序、效果持续时间的编辑——在文本编辑器中完成
- 文字排版的编辑——在135编辑器中完成
文本编辑器中的编辑
首先是文本，你有多少段文字就要有多少段上面文字渐显的代码块，将你每段的文本填入代码中你！的！文！本！你！的！文！本！的位置中即可。
例如你有两段文字要顺序显示：
我是第一段
我是第二段
那么你的代码：
<section style="border-width: initial; border-color: initial; border-style: none; margin: 0rem auto;">
<section style="overflow: hidden; text-align: center;">
<section style="width: 100%; padding: 0rem 1rem; font-size: 0.875rem; line-height: 1.5; height: auto; overflow: hidden;" data-width="100%">
<p class="" data-brushtype="text" style="text-align: center;">
<span style="font-size: 16px; font-family: 微软雅黑;">我是第一段</span>
</p>
</section>
<svg width="100%" class="hiddenIn135" style="width:100%;height:40rem;margin-top:-40rem" data-width="100%">
<rect style="width:100%;height:40rem;opacity:1;fill: #fff;" data-width="100%">
<animate attributename="opacity" begin="2000ms" dur="1s" from="1" to="0" fill="freeze"></animate>
</rect>
</svg>
</section>
</section>
<section style="border-width: initial; border-color: initial; border-style: none; margin: 0rem auto;">
<section style="overflow: hidden; text-align: center;">
<section style="width: 100%; padding: 0rem 1rem; font-size: 0.875rem; line-height: 1.5; height: auto; overflow: hidden;" data-width="100%">
<p class="" data-brushtype="text" style="text-align: center;">
<span style="font-size: 16px; font-family: 微软雅黑;">我是第二段</span>
</p>
</section>
<svg width="100%" class="hiddenIn135" style="width:100%;height:40rem;margin-top:-40rem" data-width="100%">
<rect style="width:100%;height:40rem;opacity:1;fill: #fff;" data-width="100%">
<animate attributename="opacity" begin="4000ms" dur="1s" from="1" to="0" fill="freeze"></animate>
</rect>
</svg>
</section>
</section>
编辑好了文本之后，我们就要对出现时序进行编辑。方法是编辑每段文字的代码里animate标签中begin属性的值。通常上一段与下一段的时间间隔为1500~2000ms，并且第一段的值一般为1000-2000ms。这里的修改我是没有想到有什么方便的方法，只能一个个按顺序修改咯，具体的例子可以在上面看到。
另外，你可以看到animate标签中还有其他的属性：
- dur - 动画持续时间，在这里可以理解为文字显示过程需要的时间
- from/to - 这里的
1和0代表文字从透明(1)到不透明(0)的过程，即文字透明度的变化初状态与末状态，这里你可以将0和1换过来并配合其他属性的修改来玩出其他的效果。- fill - 我也不知道是啥...
- 更多其他属性请参考：https://developer.mozilla.org/zh-CN/docs/Web/SVG/Attribute#ConditionalProccessing
其他的玩法请搜索：svg animate stml
135编辑器中的编辑
编辑好了代码之后，打开135编辑器，点击编辑页面左上角 HTML 字样的按钮，把你的代码全复制进去，再点一次那个按钮就可以看到你的文本了，需要注意，在这个界面你看到的是不带动画效果的，需要查看效果请点击右边的 手机预览。
在这里进行文字的排版，你可以进行你熟悉的 左右对齐/居中、文字大小、加粗斜体下划线、文字颜色、阴影等等等等等等你熟悉的编辑，你也可以对段落中的文字进行删改，但应尽量避免段落的增减以及段落位序改变，不然就会出现奇奇怪怪的效果（如果要进行修改请回到文本编辑器中修改）。
图片渐显
具体操作和文字渐显差不多，具体就是怎么放上你的图片，这里我们需要一个叫 图床 的东西，它的作用相当于帮你存储图片，并给你一个可以直接获取图片的链接巴拉巴拉巴拉...
你可以自建，比如利用七牛云的10g免费空间配合极简图床使用。
也可以用一些国内的公共图床比如：https://imgchr.com/
另：国外的公共图床大多在微信中不能访问，或访问速度偏慢。微博图床也是一个目前来说不错选择，不过很久很久之后你的直链还能不能访问取决于微博
获取到图片的直链后，替换掉代码中的两个http://你的图片链接你的图片链接即可，图片可以是静态的jpg/png等，也可以是动态的gif。
替换完成之后你也可以插入文本的HTML代码中进行时间的排序，同样是编辑animate中begin的值。
135编辑器中对图片的编辑除了边框、大小调整、左右对齐/居中外都是收费的。它还有一个换图的功能，我不知道换过后渐显效果还在不，你们自己去试吧🙃
与其他编辑器素材的结合
有时候你想用用这个编辑器的素材，然后那个编辑器你也有一些素材想用，怎么怎么办呢？
这里有一个办法，先统计你有多少块素材，然后按素材的块数在微信公众号的编辑器中打入相应数量的换行（就是回车，最好再多几个）。然后按顺序在各自的行中粘贴素材就行。
举个例子，我有一个135编辑器的素材，一个秀米的素材，以及两个自己需要在微信编辑器中插入的素材（一段文字、一个投票窗）。
- 在微信编辑器中打入五或六个换行
- 插入投票窗，并调整投票窗所在的位置（行）
- 在相应位置写下自己需要的文字
- 在相应位置将粘贴素材
- 将多出来的行视情况删除
注：在微信编辑器中就尽量不要对素材进行额外的编辑了，很多时候会出现一些奇奇怪怪的现象，对素材的编辑请回到相应的编辑器中进行。
最后请不要忘记发到自己手机上预览一下效果，毕竟一天只有一次推。
最后
这些效果似乎都可以在 i排版 中实现，不过我看了看它的界面呵呵呵立马不想用了。可以这么说，所有的效果也都是建立在HTML上的，既然是HTML，那么代码也必然会暴露给别人，你也就可以很轻易地从中学习它效果的实现方法，看到感兴趣的，右键-检查/查看源代码 就行了。
话说回来，大一里一年的院会干事时光就要结束了，可以说被逼得学到很多东西了，也过得很开心，不过说回来，大二的夜宵估计是没着落了呵呵呵呵呵呵呵呵...
