设置微信公众号的文章要点击一次才显示出来

今天公司同事看到一个微信公众号的文章特别有趣。有趣的东西是文章内容需要人工点击才会显示出来。

于是，研究就开始了。经过一个多小时的大脑组织html、css、js代码。终于把代码弄出来了。

下面就贴上代码：
这里是点击一次才会显示内容文字的代码

<section label="Copyright © 2017 playhudong All Rights Reserved." style="
border:none;
border-style:none;
margin:0rem auto;" id="shifu_flo_001" donone="shifuMouseDownPayStyle(&#39;shifu_flo_001&#39;)">
<section style="
overflow:hidden;">
<section style="width:100%;
text-align: left;
padding: 0rem 1rem;
box-sizing: border-box;
font-size: 0.875rem;
line-height: 1.5;
height:auto;
overflow:hidden;
color: #000;">
<p style="margin:0">
//这里是文字点击一下才会显示的内容
</p>
</section>
<svg style="width:100%;
height:40rem;
margin-top:-40rem;
" data-ipaiban-svg="style中的height、margin-top和rect标签中的height的高度保持一致">
<rect style="width:100%;
height:40rem;
fill: #fff;">
<animate attributename="opacity" begin="click" data-ipaiban-begin="begin可以写0s（秒数）或者click（点击触发）" dur="3s" data-ipaiban-dur="dur写几秒，动画就持续执行几秒" from="1" data-ipaiban-from="from写0~1，透明度就是从几开始" to="0" data-ipaiban-to="to写0~1，0为完全透明" fill="freeze" data-ipaiban-fill="fill指是否还原初始状态，freeze为不恢复"></animate>
</rect>
</svg>
</section>
</section>
<p class="shifubrush">
<br/>
</p>

这里是点击一次才会显示图片的代码：

<section label="Copyright © 2017 playhudong All Rights Reserved." style="
border:none;
border-style:none;
margin:0rem auto;" id="shifu_flo_005" donone="shifuMouseDownPayStyle(&#39;shifu_flo_005&#39;)">
<section style="
overflow:hidden;">
<section style="width:100%;
text-align: left;
box-sizing: border-box;
font-size: 0.875rem;
line-height: 1.5;
height:auto;
overflow:hidden;
color: #000;">
<img src="http://cwhello.com/wp-content/themes/wpdx/images/pic/4-330x200.jpg" data-ipaiban-src="此处把需要替换的图片地址粘贴过来放入scr的引号中间" style="width:100%;"/>
</section>
<svg width="100%" style="width:100%;
height:25rem;
margin-top:-25rem" data-ipaiban-svg="style中的height、margin-top和rect标签中的height的高度保持一致">
<rect style="width:100%;
height:25rem;
fill: #fff;">
<animate attributename="opacity" begin="click" data-ipaiban-begin="begin可以写0s（秒数）或者click（点击触发）" dur="3s" data-ipaiban-dur="dur写几秒，动画就持续执行几秒" from="1" data-ipaiban-from="from写0~1，透明度就是从几开始" to="0" data-ipaiban-to="to写0~1，0为完全透明" fill="freeze" data-ipaiban-fill="fill指是否还原初始状态，freeze为不恢复"></animate>
</rect>
</svg>
</section>
</section>
<p class="shifubrush">
<br/>
</p>