引言
最近由于實(shí)在挺忙的岸梨，就沒有時(shí)間寫東西犬钢，憋了好幾個(gè)題材匈挖，打算在接下來的復(fù)習(xí)周學(xué)得無(wú)聊的時(shí)候就寫寫碾牌，這是第一個(gè)。（然而現(xiàn)在并沒到復(fù)習(xí)周呵呵呵
最初這些效果都是我從其他推送看來的儡循，至于是哪篇推送我也忘記了哈哈哈哈哈哈哈...
先看效果：
【群星閃耀】第五屆SKY之星評(píng)選開始接受報(bào)名
『迎接我們的18』2017-2018跨年留言征集活動(dòng)
你可以看到舶吗，在里頭是包含兩種效果的：
- 圖文漸顯
- 彈幕效果
由于第二種效果已經(jīng)看到有的編輯器（i排版，在他的互動(dòng)樣式里頭）已經(jīng)玩出花來了择膝，并且它的實(shí)現(xiàn)比較簡(jiǎn)單誓琼，就不教了，具體可以參考這篇文章：彈幕還可以點(diǎn)擊顯示ｋ茸健腹侣？你需要了解的彈幕排版都在這里了
這里主要介紹第一種效果（圖文漸顯）的實(shí)現(xiàn)。
正文
準(zhǔn)備
- 看懂本文需要一些基本的HTML知識(shí)齿穗，可以從w3school的HTML教程中基礎(chǔ)傲隶、屬性、元素的篇章中獲得窃页。
- 你或許需要一個(gè)稱手的文本編輯器：Notepad++
在編輯時(shí)將語(yǔ)言設(shè)置為HTML即可獲得良好的閱讀體驗(yàn)??
在使用時(shí)請(qǐng)把自動(dòng)換行關(guān)掉 - 鑒于易用性以及廣告騷擾等原因跺株，這里我們用135編輯器，而非 i 排版
- 善于使用
Ctlr + A - HTML源碼
你可以輕松地從網(wǎng)頁(yè)中獲取它的全套源碼脖卖，如果你懶的話在這里我也單獨(dú)給出：
這里你會(huì)理解我為啥叫你用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>
文字漸顯
文字的效果編輯我們分為兩個(gè)部分：
- 文本妓雾、出現(xiàn)時(shí)序娶吞、效果持續(xù)時(shí)間的編輯——在文本編輯器中完成
- 文字排版的編輯——在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>
編輯好了文本之后烈钞，我們就要對(duì)出現(xiàn)時(shí)序進(jìn)行編輯。方法是編輯每段文字的代碼里animate標(biāo)簽中begin屬性的值坤按。通常上一段與下一段的時(shí)間間隔為1500~2000ms毯欣，并且第一段的值一般為1000-2000ms。這里的修改我是沒有想到有什么方便的方法臭脓，只能一個(gè)個(gè)按順序修改咯酗钞，具體的例子可以在上面看到。
另外来累，你可以看到animate標(biāo)簽中還有其他的屬性：
- dur - 動(dòng)畫持續(xù)時(shí)間砚作，在這里可以理解為文字顯示過程需要的時(shí)間
- from/to - 這里的
1和0代表文字從透明(1)到不透明(0)的過程，即文字透明度的變化初狀態(tài)與末狀態(tài)嘹锁，這里你可以將0和1換過來并配合其他屬性的修改來玩出其他的效果葫录。- fill - 我也不知道是啥...
- 更多其他屬性請(qǐng)參考：https://developer.mozilla.org/zh-CN/docs/Web/SVG/Attribute#ConditionalProccessing
其他的玩法請(qǐng)搜索：svg animate stml
135編輯器中的編輯
編輯好了代碼之后，打開135編輯器领猾，點(diǎn)擊編輯頁(yè)面左上角 HTML 字樣的按鈕压昼，把你的代碼全復(fù)制進(jìn)去，再點(diǎn)一次那個(gè)按鈕就可以看到你的文本了瘤运，需要注意窍霞，在這個(gè)界面你看到的是不帶動(dòng)畫效果的，需要查看效果請(qǐng)點(diǎn)擊右邊的 手機(jī)預(yù)覽拯坟。
在這里進(jìn)行文字的排版但金，你可以進(jìn)行你熟悉的 左右對(duì)齊/居中、文字大小郁季、加粗斜體下劃線冷溃、文字顏色、陰影等等等等等等你熟悉的編輯梦裂，你也可以對(duì)段落中的文字進(jìn)行刪改似枕，但應(yīng)盡量避免段落的增減以及段落位序改變，不然就會(huì)出現(xiàn)奇奇怪怪的效果（如果要進(jìn)行修改請(qǐng)回到文本編輯器中修改）年柠。
圖片漸顯
具體操作和文字漸顯差不多凿歼，具體就是怎么放上你的圖片，這里我們需要一個(gè)叫 圖床 的東西，它的作用相當(dāng)于幫你存儲(chǔ)圖片答憔，并給你一個(gè)可以直接獲取圖片的鏈接巴拉巴拉巴拉...
你可以自建味赃，比如利用七牛云的10g免費(fèi)空間配合極簡(jiǎn)圖床使用。
也可以用一些國(guó)內(nèi)的公共圖床比如：https://imgchr.com/
另：國(guó)外的公共圖床大多在微信中不能訪問虐拓，或訪問速度偏慢心俗。微博圖床也是一個(gè)目前來說不錯(cuò)選擇，不過很久很久之后你的直鏈還能不能訪問取決于微博
獲取到圖片的直鏈后蓉驹，替換掉代碼中的兩個(gè)http://你的圖片鏈接你的圖片鏈接即可城榛，圖片可以是靜態(tài)的jpg/png等，也可以是動(dòng)態(tài)的gif态兴。
替換完成之后你也可以插入文本的HTML代碼中進(jìn)行時(shí)間的排序吠谢，同樣是編輯animate中begin的值。
135編輯器中對(duì)圖片的編輯除了邊框诗茎、大小調(diào)整工坊、左右對(duì)齊/居中外都是收費(fèi)的。它還有一個(gè)換圖的功能敢订，我不知道換過后漸顯效果還在不王污，你們自己去試吧??
與其他編輯器素材的結(jié)合
有時(shí)候你想用用這個(gè)編輯器的素材，然后那個(gè)編輯器你也有一些素材想用楚午，怎么怎么辦呢昭齐？
這里有一個(gè)辦法，先統(tǒng)計(jì)你有多少塊素材矾柜，然后按素材的塊數(shù)在微信公眾號(hào)的編輯器中打入相應(yīng)數(shù)量的換行（就是回車阱驾，最好再多幾個(gè)）。然后按順序在各自的行中粘貼素材就行怪蔑。
舉個(gè)例子里覆，我有一個(gè)135編輯器的素材，一個(gè)秀米的素材缆瓣，以及兩個(gè)自己需要在微信編輯器中插入的素材（一段文字喧枷、一個(gè)投票窗）。
- 在微信編輯器中打入五或六個(gè)換行
- 插入投票窗弓坞，并調(diào)整投票窗所在的位置（行）
- 在相應(yīng)位置寫下自己需要的文字
- 在相應(yīng)位置將粘貼素材
- 將多出來的行視情況刪除
注：在微信編輯器中就盡量不要對(duì)素材進(jìn)行額外的編輯了隧甚，很多時(shí)候會(huì)出現(xiàn)一些奇奇怪怪的現(xiàn)象，對(duì)素材的編輯請(qǐng)回到相應(yīng)的編輯器中進(jìn)行渡冻。
最后請(qǐng)不要忘記發(fā)到自己手機(jī)上預(yù)覽一下效果戚扳，畢竟一天只有一次推。
最后
這些效果似乎都可以在 i排版 中實(shí)現(xiàn)族吻，不過我看了看它的界面呵呵呵立馬不想用了帽借≈樵觯可以這么說，所有的效果也都是建立在HTML上的宜雀，既然是HTML，那么代碼也必然會(huì)暴露給別人握础，你也就可以很輕易地從中學(xué)習(xí)它效果的實(shí)現(xiàn)方法辐董，看到感興趣的，右鍵-檢查/查看源代碼 就行了禀综。
話說回來简烘，大一里一年的院會(huì)干事時(shí)光就要結(jié)束了，可以說被逼得學(xué)到很多東西了定枷，也過得很開心孤澎，不過說回來，大二的夜宵估計(jì)是沒著落了呵呵呵呵呵呵呵呵...
