SVG排版公众号文章『CSS滤色混合模式』模板代码
发布于 4 年前 作者 laijie 5294 次浏览 来自 分享

模板效果

点击查看效果

模板代码

效果一

<section>
    <section style="overflow: hidden;-webkit-touch-callout:none;user-select:none;line-height: 0;">
        <svg style="display: inline-block;background-image: url(https://mmbiz.qpic.cn/mmbiz_jpg/JpraGu7eGqRDrawZKOO7ia7g8ic0C68DKhLFAjibEMjBPk5j5IDCoTfUCk3SMHd5EibfqPFodyTp6EJoRACJIhUDJw/0?wx_fmt=jpeg);background-size: 100%;background-repeat: no-repeat;line-height: 0;" viewBox="0 0 300 400" data-info="公众号：懂点君">
            <g>
                <set attributeName="visibility" from="visible" to="hidden" begin="click" dur="1.2s" fill="freeze" restart="never"></set>
                <image style="mix-blend-mode: screen; transform:scale(1);" href="https://mmbiz.qpic.cn/mmbiz_jpg/JpraGu7eGqRDrawZKOO7ia7g8ic0C68DKhUsVOEiareCDFibOQpU2nzAjpENxTSyS7RibBHgfJV7wicttGSK1Dq8HPPA/0?wx_fmt=jpeg" width="300" height="400" x="0" y="0"></image>
            </g>
        </svg>
    </section>
    <section style="overflow: hidden;width: 350px;height: 0!important;margin: 0 auto;"><p style="text-align: center;">提示：如图文未加载，请刷新重试（懂点君）</p></section>
</section>

效果二

<section>
    <section style="overflow: hidden;-webkit-touch-callout:none;user-select:none;line-height: 0;">
        <svg style="display: inline-block;background-image: url(https://mmbiz.qpic.cn/mmbiz_jpg/JpraGu7eGqRDrawZKOO7ia7g8ic0C68DKhLFAjibEMjBPk5j5IDCoTfUCk3SMHd5EibfqPFodyTp6EJoRACJIhUDJw/0?wx_fmt=jpeg);background-size: 100%;background-repeat: no-repeat;line-height: 0;" viewBox="0 0 300 400">
            <g>
                <set attributeName="visibility" from="visible" to="hidden" begin="click" dur="1.2s" fill="freeze" restart="never"></set>
                <image style="mix-blend-mode: screen; transform:scale(1);" href="https://mmbiz.qpic.cn/mmbiz_jpg/JpraGu7eGqRDrawZKOO7ia7g8ic0C68DKhSbziaLKKcs0Ha9K1135zPp07NhnaKez3E73szhLWpwM9N4N7UXL7NLg/0?wx_fmt=jpeg" width="300" height="400" x="0" y="0" data-info="公众号：懂点君"></image>
            </g>
        </svg>
    </section>
    <section style="overflow: hidden;width: 350px;height: 0!important;margin: 0 auto;"><p style="text-align: center;">提示：如图文未加载，请刷新重试（懂点君）</p></section>
</section>

效果三

<section>
    <section style="overflow: hidden;-webkit-touch-callout:none;user-select:none;line-height: 0;">
        <svg style="display: inline-block;background-image: url(https://mmbiz.qpic.cn/mmbiz_jpg/JpraGu7eGqRDrawZKOO7ia7g8ic0C68DKhLFAjibEMjBPk5j5IDCoTfUCk3SMHd5EibfqPFodyTp6EJoRACJIhUDJw/0?wx_fmt=jpeg);background-size: 100%;background-repeat: no-repeat;line-height: 0;" viewBox="0 0 300 400">
            <g>
                <set attributeName="visibility" from="visible" to="hidden" begin="click" dur="1.2s" fill="freeze" restart="never"></set>
                <image style="mix-blend-mode: screen; transform:scale(1);" href="https://mmbiz.qpic.cn/mmbiz_jpg/JpraGu7eGqRDrawZKOO7ia7g8ic0C68DKhatFicZBTicWX8s3aGry8t4Ptswy9cqFrNVx9qpEhscvgxMiaCwCgkWogw/0?wx_fmt=jpeg" width="300" height="400" x="0" y="0" data-info="公众号：懂点君"></image>
            </g>
        </svg>
    </section>
    <section style="overflow: hidden;width: 350px;height: 0!important;margin: 0 auto;"><p style="text-align: center;">提示：如图文未加载，请刷新重试（懂点君）</p></section>
</section>

效果四

<section>
    <section style="overflow: hidden;-webkit-touch-callout:none;user-select:none;line-height: 0;">
        <svg style="display: inline-block;background-image: url(https://mmbiz.qpic.cn/mmbiz_jpg/JpraGu7eGqRDrawZKOO7ia7g8ic0C68DKhLFAjibEMjBPk5j5IDCoTfUCk3SMHd5EibfqPFodyTp6EJoRACJIhUDJw/0?wx_fmt=jpeg);background-size: 100%;background-repeat: no-repeat;line-height: 0;" viewBox="0 0 300 400">
            <g>
                <set attributeName="visibility" from="visible" to="hidden" begin="click" dur="1.2s" fill="freeze" restart="never"></set>
                <image style="mix-blend-mode: screen; transform:scale(1);" href="https://mmbiz.qpic.cn/mmbiz_jpg/JpraGu7eGqRDrawZKOO7ia7g8ic0C68DKhCpflibryic85dfIS2Hse5KMGAyMn3z4VQiaQejZxOPBHwJlEgbaQ0rFRA/0?wx_fmt=jpeg" width="300" height="400" x="0" y="0"></image>
            </g>
        </svg>
    </section>
    <section style="overflow: hidden;width: 350px;height: 0!important;margin: 0 auto;"><p style="text-align: center;">提示：如图文未加载，请刷新重试（懂点君）</p></section>
</section>
回到顶部