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 秒,修改这里的数值就可以。