评论

资源 | 公众号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>
最后一次编辑于  09-11  
点赞 0
收藏
评论
登录 后发表内容