01
在《你點(diǎn)了我就翻臉》這篇文章里椭住，點(diǎn)開一張圖片崇渗，圖片里的文字變成了另一段。
這個(gè)創(chuàng)意的關(guān)鍵點(diǎn)是京郑，公眾號(hào)文章頁的背景是白色的宅广，查看大圖的背景是黑色的。
制作一張透明背景的圖片些举，上面的文字用黑色跟狱，下面的文字用白色，那么分別在文章頁和查看大圖的時(shí)候户魏，其中一邊的文字就跟背景融合在一起了驶臊。
這樣看就一清二楚了：
02
打開《:-) 此文沒那么簡(jiǎn)單》這篇文章，一篇空白叼丑，但點(diǎn)空白處后文字會(huì)緩慢出現(xiàn)关翎。
長(zhǎng)按空白區(qū)域，發(fā)現(xiàn)不能保存下來鸠信，這不是圖片纵寝。在瀏覽器中打開這篇文章，切換到閱讀模式星立，可以看到文字都在爽茴，證明這些真的是文本葬凳。
那蓋在文字上面的是什么？這時(shí)只能借助審查元素室奏，發(fā)現(xiàn)其實(shí)是文字上面有一個(gè)白色的遮罩（ SVG 矩形元素）火焰，每次點(diǎn)擊時(shí)，透明度會(huì)從 1 變?yōu)?0胧沫，持續(xù) 4 秒昌简。
這么高級(jí)的功能，想必是用排版工具制作的琳袄。搜索之后發(fā)現(xiàn)江场，通過「135編輯器」這個(gè)工具來排版，修改文章里的 HTML 代碼窖逗，就可以做出這個(gè)效果址否。
首先把文章寫好，然后點(diǎn)擊左上角「源代碼」碎紊，切換到 HTML 代碼界面佑附。
切換前
切換后
然后把如下代碼片段復(fù)制下來，添加到你想要加效果的那段文字的后面仗考，效果就出來了音同。
<center style="box-sizing: border-box;">
<svg width="100%" height="400" xmlns="http://www.w3.org/2000/svg" style="margin-top: -400px; box-sizing: border-box; transform: rotateZ(0deg); -webkit-transform: rotateZ(0deg); -webkit-transform: rotateZ(0deg);">
<rect width="100%" height="400"style="fill: #ffffff; box-sizing: border-box;">
<animate attributename="opacity" begin="click" dur="1s" style="box-sizing: border-box;" from="1" to="0" fill="freeze"></animate>
</rect>
</svg>
</center>
如果想要調(diào)整速度，dur="1s"代表持續(xù) 1 秒秃嗜，修改這里的數(shù)值就可以权均。
