资源 | 公众号SVG密码解锁模板代码（二）
模板效果
模板案例
https://mp.weixin.qq.com/s/A1ePdjZ5Zbn1aqyhD0gaLw
模板代码
<section style="width: 345px; margin: 0px auto;font-size: 0px;line-height: 0;">
<section style="overflow: hidden;">
<section style="height: 0;">
<section style="width: 100%;height: 800px;border-radius: 14px;overflow: hidden;background-size: 100% auto;background-repeat: no-repeat;background-position: center top;background-image: url(https://mmbiz.qpic.cn/mmbiz_png/JpraGu7eGqS5ziaG4HYMS93SXiaHr7CVXrKl83TSf8dOc2S8eEibMKrcTQjwIYdZxX6pNuIEVOxyibnr5CcOTibtGIA/0?wx_fmt=png);"></section>
</section>
<section style="user-select: none;">
<!-------------------------------------------------------------- 君-3 -------------------------------------------------------------->
<section data-tit="君-3" style="height: 0;pointer-events: none;transform: translateZ(5px);">
<section style="overflow: hidden;background-color: #ffffff;">
<section style="height: 0;">
<!-- 密码键盘 -->
<svg width="350" height="500" viewBox="0 0 350 500" preserveAspectRatio="xMidYMin meet" style="background-image: url(https://mmbiz.qpic.cn/mmbiz_png/JpraGu7eGqS5ziaG4HYMS93SXiaHr7CVXrTbVvaPESZA6ocqIQEnB0BjbzDDiaBJSMcuRUUE5EuUrZiahK2An9bwmQ/0?wx_fmt=png);background-size: 350px 500px;background-repeat: no-repeat;background-position: center center;" xmlns="http://www.w3.org/2000/svg">
<g data-group="password" transform="translate(25, 121)" style="pointer-events: visiblePainted;">
<g data-key="懂" transform="translate(0, 0)">
<rect opacity="0" fill="#ff0000" x="0" y="0" width="100" height="100">
<animate attributeName="opacity" begin="click" dur="0.2s" keyTimes="0;0.8;1" values="0.6;0.35;0" fill="freeze"></animate>
<set attributeName="visibility" attributeType="XML" begin="click+0.2s" to="hidden"></set>
</rect>
</g>
<g data-key="微" transform="translate(100, 0)">
<rect opacity="0" fill="#ff0000" x="0" y="0" width="100" height="100">
<animate attributeName="opacity" begin="click" dur="0.2s" keyTimes="0;0.8;1" values="0.6;0.35;0" fill="freeze"></animate>
</rect>
</g>
<g data-key="公" transform="translate(200, 0)">
<rect opacity="0" fill="#ff0000" x="0" y="0" width="100" height="100">
<animate attributeName="opacity" begin="click" dur="0.2s" keyTimes="0;0.8;1" values="0.6;0.35;0" fill="freeze"></animate>
</rect>
</g>
<g data-key="号" transform="translate(0, 100)">
<rect opacity="0" fill="#ff0000" x="0" y="0" width="100" height="100">
<animate attributeName="opacity" begin="click" dur="0.2s" keyTimes="0;0.8;1" values="0.6;0.35;0" fill="freeze"></animate>
</rect>
</g>
<g data-key="众" transform="translate(100, 100)">
<rect opacity="0" fill="#ff0000" x="0" y="0" width="100" height="100">
<animate attributeName="opacity" begin="click" dur="0.2s" keyTimes="0;0.8;1" values="0.6;0.35;0" fill="freeze"></animate>
</rect>
</g>
<g data-key="点" transform="translate(200, 100)">
<rect opacity="0" fill="#ff0000" x="0" y="0" width="100" height="100">
<animate attributeName="opacity" begin="click" dur="0.2s" keyTimes="0;0.8;1" values="0.6;0.35;0" fill="freeze"></animate>
</rect>
</g>
<g data-key="视" transform="translate(0, 200)">
<rect opacity="0" fill="#ff0000" x="0" y="0" width="100" height="100">
<animate attributeName="opacity" begin="click" dur="0.2s" keyTimes="0;0.8;1" values="0.6;0.35;0" fill="freeze"></animate>
</rect>
</g>
<g data-key="君" transform="translate(100, 200)">
<rect opacity="0" fill="#07c160" x="0" y="0" width="100" height="100">
<animate attributeName="opacity" begin="click" dur="0.2s" keyTimes="0;0.8;1" values="0.6;0.35;0" fill="freeze"></animate>
</rect>
</g>
<g data-key="频" transform="translate(200, 200)">
<rect opacity="0" fill="#ff0000" x="0" y="0" width="100" height="100">
<animate attributeName="opacity" begin="click" dur="0.2s" keyTimes="0;0.8;1" values="0.6;0.35;0" fill="freeze"></animate>
</rect>
</g>
</g>
<g data-group="confirm" transform="translate(125, 442)" style="pointer-events: visiblePainted;">
<rect opacity="0" fill="#ff0000" x="0" y="0" width="100" height="40" stroke-width="2">
<animate attributeName="opacity" begin="click" dur="0.2s" keyTimes="0;0.8;1" values="0.6;0.25;0" fill="freeze"></animate>
</rect>
</g>
</svg>
</section>
<!-- 正确答案 -->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 350 500" preserveAspectRatio="xMidYMin meet">
<animate attributeName="height" begin="click+0.2s" dur="0.000001s" to="0" fill="freeze" restart="never"></animate>
<g data-group="password" transform="translate(25, 121)" style="pointer-events: visiblePainted;">
<g data-key="懂" transform="translate(100, 200)">
<rect opacity="0" fill="#07c160" x="0" y="0" width="100" height="100">
<animate attributeName="opacity" begin="click" dur="0.2s" keyTimes="0;0.8;1" values="0.6;0.25;0" fill="freeze"></animate>
<set attributeName="visibility" attributeType="XML" begin="click+0.2s" to="hidden"></set>
</rect>
</g>
</g>
</svg>
</section>
</section>
<!-------------------------------------------------------------- 点-2 -------------------------------------------------------------->
<section data-tit="点-2" style="height: 0;pointer-events: none;transform: translateZ(5px);">
<section style="overflow: hidden;background-color: #ffffff;">
<section style="height: 0;">
<!-- 密码键盘 -->
<svg width="350" height="500" viewBox="0 0 350 500" preserveAspectRatio="xMidYMin meet" style="background-image: url(https://mmbiz.qpic.cn/mmbiz_png/JpraGu7eGqS5ziaG4HYMS93SXiaHr7CVXr1LW1yF69bibIQ2qIZX5m5KIVbnPczSrfVtBHBZTib1eVnp7RLahc2I4w/0?wx_fmt=png);background-size: 350px 500px;background-repeat: no-repeat;background-position: center center;" xmlns="http://www.w3.org/2000/svg">
<g data-group="password" transform="translate(25, 121)" style="pointer-events: visiblePainted;">
<g data-key="懂" transform="translate(0, 0)">
<rect opacity="0" fill="#ff0000" x="0" y="0" width="100" height="100">
<animate attributeName="opacity" begin="click" dur="0.2s" keyTimes="0;0.8;1" values="0.6;0.35;0" fill="freeze"></animate>
<set attributeName="visibility" attributeType="XML" begin="click+0.2s" to="hidden"></set>
</rect>
</g>
<g data-key="微" transform="translate(100, 0)">
<rect opacity="0" fill="#ff0000" x="0" y="0" width="100" height="100">
<animate attributeName="opacity" begin="click" dur="0.2s" keyTimes="0;0.8;1" values="0.6;0.35;0" fill="freeze"></animate>
</rect>
</g>
<g data-key="公" transform="translate(200, 0)">
<rect opacity="0" fill="#ff0000" x="0" y="0" width="100" height="100">
<animate attributeName="opacity" begin="click" dur="0.2s" keyTimes="0;0.8;1" values="0.6;0.35;0" fill="freeze"></animate>
</rect>
</g>
<g data-key="号" transform="translate(0, 100)">
<rect opacity="0" fill="#ff0000" x="0" y="0" width="100" height="100">
<animate attributeName="opacity" begin="click" dur="0.2s" keyTimes="0;0.8;1" values="0.6;0.35;0" fill="freeze"></animate>
</rect>
</g>
<g data-key="众" transform="translate(100, 100)">
<rect opacity="0" fill="#ff0000" x="0" y="0" width="100" height="100">
<animate attributeName="opacity" begin="click" dur="0.2s" keyTimes="0;0.8;1" values="0.6;0.35;0" fill="freeze"></animate>
</rect>
</g>
<g data-key="点" transform="translate(200, 100)">
<rect opacity="0" fill="#07c160" x="0" y="0" width="100" height="100">
<animate attributeName="opacity" begin="click" dur="0.2s" keyTimes="0;0.8;1" values="0.6;0.35;0" fill="freeze"></animate>
</rect>
</g>
<g data-key="视" transform="translate(0, 200)">
<rect opacity="0" fill="#ff0000" x="0" y="0" width="100" height="100">
<animate attributeName="opacity" begin="click" dur="0.2s" keyTimes="0;0.8;1" values="0.6;0.35;0" fill="freeze"></animate>
</rect>
</g>
<g data-key="君" transform="translate(100, 200)">
<rect opacity="0" fill="#ff0000" x="0" y="0" width="100" height="100">
<animate attributeName="opacity" begin="click" dur="0.2s" keyTimes="0;0.8;1" values="0.6;0.35;0" fill="freeze"></animate>
</rect>
</g>
<g data-key="频" transform="translate(200, 200)">
<rect opacity="0" fill="#ff0000" x="0" y="0" width="100" height="100">
<animate attributeName="opacity" begin="click" dur="0.2s" keyTimes="0;0.8;1" values="0.6;0.35;0" fill="freeze"></animate>
</rect>
</g>
</g>
<g data-group="confirm" transform="translate(125, 442)" style="pointer-events: visiblePainted;">
<rect opacity="0" fill="#ff0000" x="0" y="0" width="100" height="40" stroke-width="2">
<animate attributeName="opacity" begin="click" dur="0.2s" keyTimes="0;0.8;1" values="0.6;0.25;0" fill="freeze"></animate>
</rect>
</g>
</svg>
</section>
<!-- 正确答案 -->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 350 500" preserveAspectRatio="xMidYMin meet">
<animate attributeName="height" begin="click+0.2s" dur="0.000001s" to="0" fill="freeze" restart="never"></animate>
<g data-group="password" transform="translate(25, 121)" style="pointer-events: visiblePainted;">
<g data-key="懂" transform="translate(200, 100)">
<rect opacity="0" fill="#07c160" x="0" y="0" width="100" height="100">
<animate attributeName="opacity" begin="click" dur="0.2s" keyTimes="0;0.8;1" values="0.6;0.25;0" fill="freeze"></animate>
<set attributeName="visibility" attributeType="XML" begin="click+0.2s" to="hidden"></set>
</rect>
</g>
</g>
</svg>
</section>
</section>
<!-------------------------------------------------------------- 懂-1 -------------------------------------------------------------->
<section data-tit="懂-1" style="height: 0;pointer-events: none;transform: translateZ(5px);">
<section style="overflow: hidden;background-color: #ffffff;">
<section style="height: 0;">
<!-- 密码键盘 -->
<svg width="350" height="500" viewBox="0 0 350 500" preserveAspectRatio="xMidYMin meet" style="background-image: url(https://mmbiz.qpic.cn/mmbiz_png/JpraGu7eGqS5ziaG4HYMS93SXiaHr7CVXrzV6iadcnHxvicteicibJJzQIe5SLNkCeURXUrzsRWMgLJz4szf6grkiaQHA/0?wx_fmt=png);background-size: 350px 500px;background-repeat: no-repeat;background-position: center center;" xmlns="http://www.w3.org/2000/svg">
<g data-group="password" transform="translate(25, 121)" style="pointer-events: visiblePainted;">
<g data-key="懂" transform="translate(0, 0)">
<rect opacity="0" fill="#07c160" x="0" y="0" width="100" height="100">
<animate attributeName="opacity" begin="click" dur="0.2s" keyTimes="0;0.8;1" values="0.6;0.35;0" fill="freeze"></animate>
<set attributeName="visibility" attributeType="XML" begin="click+0.2s" to="hidden"></set>
</rect>
</g>
<g data-key="微" transform="translate(100, 0)">
<rect opacity="0" fill="#ff0000" x="0" y="0" width="100" height="100">
<animate attributeName="opacity" begin="click" dur="0.2s" keyTimes="0;0.8;1" values="0.6;0.35;0" fill="freeze"></animate>
</rect>
</g>
<g data-key="公" transform="translate(200, 0)">
<rect opacity="0" fill="#ff0000" x="0" y="0" width="100" height="100">
<animate attributeName="opacity" begin="click" dur="0.2s" keyTimes="0;0.8;1" values="0.6;0.35;0" fill="freeze"></animate>
</rect>
</g>
<g data-key="号" transform="translate(0, 100)">
<rect opacity="0" fill="#ff0000" x="0" y="0" width="100" height="100">
<animate attributeName="opacity" begin="click" dur="0.2s" keyTimes="0;0.8;1" values="0.6;0.35;0" fill="freeze"></animate>
</rect>
</g>
<g data-key="众" transform="translate(100, 100)">
<rect opacity="0" fill="#ff0000" x="0" y="0" width="100" height="100">
<animate attributeName="opacity" begin="click" dur="0.2s" keyTimes="0;0.8;1" values="0.6;0.35;0" fill="freeze"></animate>
</rect>
</g>
<g data-key="点" transform="translate(200, 100)">
<rect opacity="0" fill="#ff0000" x="0" y="0" width="100" height="100">
<animate attributeName="opacity" begin="click" dur="0.2s" keyTimes="0;0.8;1" values="0.6;0.35;0" fill="freeze"></animate>
</rect>
</g>
<g data-key="视" transform="translate(0, 200)">
<rect opacity="0" fill="#ff0000" x="0" y="0" width="100" height="100">
<animate attributeName="opacity" begin="click" dur="0.2s" keyTimes="0;0.8;1" values="0.6;0.35;0" fill="freeze"></animate>
</rect>
</g>
<g data-key="君" transform="translate(100, 200)">
<rect opacity="0" fill="#ff0000" x="0" y="0" width="100" height="100">
<animate attributeName="opacity" begin="click" dur="0.2s" keyTimes="0;0.8;1" values="0.6;0.35;0" fill="freeze"></animate>
</rect>
</g>
<g data-key="频" transform="translate(200, 200)">
<rect opacity="0" fill="#ff0000" x="0" y="0" width="100" height="100">
<animate attributeName="opacity" begin="click" dur="0.2s" keyTimes="0;0.8;1" values="0.6;0.35;0" fill="freeze"></animate>
</rect>
</g>
</g>
<g data-group="confirm" transform="translate(125, 442)" style="pointer-events: visiblePainted;">
<rect opacity="0" fill="#ff0000" x="0" y="0" width="100" height="40" stroke-width="2">
<animate attributeName="opacity" begin="click" dur="0.2s" keyTimes="0;0.8;1" values="0.6;0.25;0" fill="freeze"></animate>
</rect>
</g>
</svg>
</section>
<!-- 正确答案 -->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 350 500" preserveAspectRatio="xMidYMin meet">
<animate attributeName="height" begin="click+0.2s" dur="0.000001s" to="0" fill="freeze" restart="never"></animate>
<g data-group="password" transform="translate(25, 121)" style="pointer-events: visiblePainted;">
<g data-key="懂" transform="translate(0, 0)">
<rect opacity="0" fill="#07c160" x="0" y="0" width="100" height="100">
<animate attributeName="opacity" begin="click" dur="0.2s" keyTimes="0;0.8;1" values="0.6;0.25;0" fill="freeze"></animate>
<set attributeName="visibility" attributeType="XML" begin="click+0.2s" to="hidden"></set>
</rect>
</g>
</g>
</svg>
</section>
</section>
<!-------------------------------------------------------------- 成功解锁 -------------------------------------------------------------->
<section style="pointer-events: none;">
<section style="display: inline-block;background-color: #ffffff;">
<section style="height: 0;">
<svg viewBox="0 0 350 500" preserveAspectRatio="xMidYMin meet" style="background-image: url(https://mmbiz.qpic.cn/mmbiz_png/JpraGu7eGqS5ziaG4HYMS93SXiaHr7CVXrSmzHKtEegmQQb7nibQlQ351fE8KmByNvXQjUFOPticKsZkR5LfvGH80Q/0?wx_fmt=png);background-size: 350px 500px;background-repeat: no-repeat;background-position: center center;" xmlns="http://www.w3.org/2000/svg">
<!-- 密码键盘 -->
<g data-group="password" transform="translate(25, 121)" style="pointer-events: visiblePainted;">
<g data-key="懂" transform="translate(0, 0)">
<rect opacity="0" fill="#ff0000" x="0" y="0" width="100" height="100">
<animate attributeName="opacity" begin="click" dur="0.2s" keyTimes="0;0.8;1" values="0.6;0.35;0" fill="freeze"></animate>
</rect>
</g>
<g data-key="微" transform="translate(100, 0)">
<rect opacity="0" fill="#ff0000" x="0" y="0" width="100" height="100">
<animate attributeName="opacity" begin="click" dur="0.2s" keyTimes="0;0.8;1" values="0.6;0.35;0" fill="freeze"></animate>
</rect>
</g>
<g data-key="公" transform="translate(200, 0)">
<rect opacity="0" fill="#ff0000" x="0" y="0" width="100" height="100">
<animate attributeName="opacity" begin="click" dur="0.2s" keyTimes="0;0.8;1" values="0.6;0.35;0" fill="freeze"></animate>
</rect>
</g>
<g data-key="号" transform="translate(0, 100)">
<rect opacity="0" fill="#ff0000" x="0" y="0" width="100" height="100">
<animate attributeName="opacity" begin="click" dur="0.2s" keyTimes="0;0.8;1" values="0.6;0.35;0" fill="freeze"></animate>
</rect>
</g>
<g data-key="众" transform="translate(100, 100)">
<rect opacity="0" fill="#ff0000" x="0" y="0" width="100" height="100">
<animate attributeName="opacity" begin="click" dur="0.2s" keyTimes="0;0.8;1" values="0.6;0.35;0" fill="freeze"></animate>
</rect>
</g>
<g data-key="点" transform="translate(200, 100)">
<rect opacity="0" fill="#ff0000" x="0" y="0" width="100" height="100">
<animate attributeName="opacity" begin="click" dur="0.2s" keyTimes="0;0.8;1" values="0.6;0.35;0" fill="freeze"></animate>
</rect>
</g>
<g data-key="视" transform="translate(0, 200)">
<rect opacity="0" fill="#ff0000" x="0" y="0" width="100" height="100">
<animate attributeName="opacity" begin="click" dur="0.2s" keyTimes="0;0.8;1" values="0.6;0.35;0" fill="freeze"></animate>
</rect>
</g>
<g data-key="君" transform="translate(100, 200)">
<rect opacity="0" fill="#ff0000" x="0" y="0" width="100" height="100">
<animate attributeName="opacity" begin="click" dur="0.2s" keyTimes="0;0.8;1" values="0.6;0.35;0" fill="freeze"></animate>
</rect>
</g>
<g data-key="频" transform="translate(200, 200)">
<rect opacity="0" fill="#ff0000" x="0" y="0" width="100" height="100">
<animate attributeName="opacity" begin="click" dur="0.2s" keyTimes="0;0.8;1" values="0.6;0.35;0" fill="freeze"></animate>
</rect>
</g>
</g>
</svg>
</section>
<svg width="350" height="500" preserveAspectRatio="xMidYMin meet" viewBox="0 0 350 500" xmlns="http://www.w3.org/2000/svg">
<animate attributeName="height" calcMode="spline" keySplines="0.32 0 0.48 1.0; 0.32 0 0.48 1.0; 0.32 0 0.48 1.0" values="500;0;800;800;" dur="4s" begin="click+0.2s" keyTimes="0;0.1;0.5;1" fill="freeze" restart="never"></animate>
<animate attributeName="width" begin="click+0.5s" dur="0.000001s" to="1" fill="freeze" restart="never"></animate>
<!-- 开启按钮 -->
<g data-group="confirm" transform="translate(125, 442)" style="pointer-events: visiblePainted;">
<rect opacity="0" fill="#39f" x="0" y="0" width="100" height="40" stroke-width="2">
<animate attributeName="opacity" begin="click" dur="0.2s" keyTimes="0;0.8;1" values="0.6;0.25;0" fill="freeze"></animate>
</rect>
</g>
</svg>
</section>
</section>
</section>
</section>
</section>
强力驱动