网页的内容可以阅后即焚啦？ | svg应用

阅后即焚指的是在信息被阅读后自行销毁

本文用svg的动画实现控制盒子高度达到这个目的

用到的标签、属性

• SVG
• animate
• begin/end（触发条件：touchstart，结束条件：touchend）

代码

<section style="padding: 0px;background-image: url(清晰图片的地址);background-repeat: no-repeat;background-position: left top;background-size: contain;">
    <svg space="preserve" style="background-position:left top;background-repeat: no-repeat;background-size: 100%;background-attachment: scroll;background-image: url(模糊图地址);-webkit-tap-highlight-color:transparent;" version="1.1" viewBox="0 0 1024 1024" x="0px" y="0px">
        <animate xmlns="http://www.w3.org/2000/svg" attributeName="opacity" begin="touchstart" dur="9" repeatCount="1" values="1;0;0;0;0;0;0;0;0" end="touchend"></animate>
        <animate attributeName="height" begin="touchstart+5s" dur="0.001s" values="0" fill="freeze"></animate>
    </svg>
</section>

example

效果这里看

效果图

扫码在手机查看