01

在《你点了我就翻脸》这篇文章里，点开一张图片，图片里的文字变成了另一段。

这个创意的关键点是，公众号文章页的背景是白色的，查看大图的背景是黑色的。

制作一张透明背景的图片，上面的文字用黑色，下面的文字用白色，那么分别在文章页和查看大图的时候，其中一边的文字就跟背景融合在一起了。

这样看就一清二楚了：

02

打开《:-) 此文没那么简单》这篇文章，一篇空白，但点空白处后文字会缓慢出现。

长按空白区域，发现不能保存下来，这不是图片。在浏览器中打开这篇文章，切换到阅读模式，可以看到文字都在，证明这些真的是文本。

那盖在文字上面的是什么？这时只能借助审查元素，发现其实是文字上面有一个白色的遮罩（ SVG 矩形元素），每次点击时，透明度会从 1 变为 0，持续 4 秒。

这么高级的功能，想必是用排版工具制作的。搜索之后发现，通过「135编辑器」这个工具来排版，修改文章里的 HTML 代码，就可以做出这个效果。

首先把文章写好，然后点击左上角「源代码」，切换到 HTML 代码界面。

切换前

切换后

然后把如下代码片段复制下来，添加到你想要加效果的那段文字的后面，效果就出来了。

<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>

如果想要调整速度，dur="1s"代表持续 1 秒，修改这里的数值就可以。