评论

公众号图文『互动选项答题』模板代码

公众号图文『互动选项答题』模板代码

模板效果

点击查看效果

模板代码

<section style="display: block; overflow: hidden; background-color: #fff;font-size: 0px;">
    <section style="font-size: 16px;">
        <!------------------------------------------------ 题目 ---------------------------------------------->
        <section style="margin: 10px 0% 5px;" data-copyright="懂点君">
            <section style="display: inline-block;width: 100%;vertical-align: top;background-color: rgb(240, 240, 240);">
                <section style="display: flex;flex-flow: row nowrap;">
                    <section style="display: inline-block;padding-right: 10px;padding-left: 10px;vertical-align: bottom;align-self: flex-end;flex: 100 100 0%;">
                        <p style="white-space: normal;">1.我的视频号是______?</p>
                    </section>
                </section>
            </section>
        </section>
        <!------------------------------------------------ A选项 ---------------------------------------------->
        <section style="margin: 3px 0%;" data-copyright="懂点君">
            <section style="overflow: hidden;display: inline-block;width: 100%;vertical-align: top;align-self: flex-start;font-family: -apple-system-font, BlinkMacSystemFont, 'Helvetica Neue', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei UI', 'Microsoft YaHei', Arial, sans-serif;letter-spacing: 0.036em;">
                <!-- 选项文本内容 -->
                <section style="height: 0px;overflow: visible;">
                    <section style="display: inline-block;width: 100%;vertical-align: top;padding: 5px 10px;background-color: rgb(245, 245, 245);">
                        <section style="margin-right: 0%;margin-left: 0%;">
                            <section style="color: rgb(62, 62, 62);">
                                <p style="white-space: normal;">A.懂点君</p>
                            </section>
                        </section>
                    </section>
                </section>
                <!-- 选项互动动画 -->
                <section style="height: 0px;overflow: visible;">
                    <section style="vertical-align: top;">
                        <svg width="100%" xmlns="http://www.w3.org/2000/svg" style="width: 100%;" opacity="0" viewBox="0 0 100 10">
                            <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
                                <svg width="100%" height="100%">
                                    <rect width="100%" height="100%" style="opacity: 1;fill: rgba(7, 193, 96, 0.3);"></rect>
                                </svg>
                            </svg>
                            <!-- values属性:对于动画元素,该values属性是一个或多个值的以分号分隔的列表。动画将在动画过程中按顺序应用这些值。 -->
                            <animate fill="freeze" attributeName="opacity" begin="click" dur="0.2" keyTimes="0;0.5;1" values="0;1;0" restart="never"></animate>
                            <!-- restart属性:指示何时动画可以或不能重新启动。 -->
                            <animate fill="freeze" attributeName="opacity" begin="click + 0.33s" dur="0.2" keyTimes="0;0.5;1" values="0;1;0" restart="never"></animate>
                            <!-- fill:属性fill="freeze"时,动画终止时,发生变化的元素属性值停留在动画终止时的状态。 -->
                            <animate fill="freeze" attributeName="opacity" begin="click + 0.7s" dur="1600" restart="never" keyTimes="0;0.0000;1" values="0;1;1"></animate>
                        </svg>
                    </section>
                </section>
                <!-- 选项的高度 -->
                <section style="height: 0px;padding-top: 10%;"></section>
            </section>
        </section>
        <!------------------------------------------------ B选项 ---------------------------------------------->
        <section style="margin: 3px 0%;" data-copyright="懂点君">
            <section style="overflow: hidden;display: inline-block;width: 100%;vertical-align: top;align-self: flex-start;font-family: -apple-system-font, BlinkMacSystemFont, 'Helvetica Neue', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei UI', 'Microsoft YaHei', Arial, sans-serif;letter-spacing: 0.036em;">
                <!-- 选项文本内容 -->
                <section style="height: 0px;overflow: visible;">
                    <section style="display: inline-block;width: 100%;vertical-align: top;padding: 5px 10px;background-color: rgb(245, 245, 245);">
                        <section style="margin-right: 0%;margin-left: 0%;">
                            <section style="color: rgb(62, 62, 62);">
                                <p style="white-space: normal;">B.董点君</p>
                            </section>
                        </section>
                    </section>
                </section>
                <!-- 选项互动动画 -->
                <section style="height: 0px;overflow: visible;">
                    <section style="vertical-align: top;">
                        <svg width="100%" xmlns="http://www.w3.org/2000/svg" style="width: 100%;" opacity="0" viewBox="0 0 100 10">
                            <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
                                <svg width="100%" height="100%">
                                    <rect width="100%" height="100%" style="opacity: 1;fill: rgba(225, 95, 99, 0.3);"></rect>
                                </svg>
                            </svg>
                            <!-- values属性:对于动画元素,该values属性是一个或多个值的以分号分隔的列表。动画将在动画过程中按顺序应用这些值。 -->
                            <animate fill="freeze" attributeName="opacity" begin="click" dur="0.2" keyTimes="0;0.5;1" values="0;1;0" restart="never"></animate>
                            <!-- restart属性:指示何时动画可以或不能重新启动。 -->
                            <animate fill="freeze" attributeName="opacity" begin="click + 0.33s" dur="0.2" keyTimes="0;0.5;1" values="0;1;0" restart="never"></animate>
                            <!-- fill:属性fill="freeze"时,动画终止时,发生变化的元素属性值停留在动画终止时的状态。 -->
                            <animate fill="freeze" attributeName="opacity" begin="click + 0.7s" dur="1600" restart="never" keyTimes="0;0.0000;1" values="0;1;1"></animate>
                        </svg>
                    </section>
                </section>
                <!-- 选项的高度 -->
                <section style="height: 0px;padding-top: 10%;"></section>
            </section>
        </section>
        <!------------------------------------------------ C选项 ---------------------------------------------->
        <section style="margin: 3px 0%;" data-copyright="懂点君">
            <section style="overflow: hidden;display: inline-block;width: 100%;vertical-align: top;align-self: flex-start;font-family: -apple-system-font, BlinkMacSystemFont, 'Helvetica Neue', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei UI', 'Microsoft YaHei', Arial, sans-serif;letter-spacing: 0.036em;">
                <!-- 选项文本内容 -->
                <section style="height: 0px;overflow: visible;">
                    <section style="display: inline-block;width: 100%;vertical-align: top;padding: 5px 10px;background-color: rgb(245, 245, 245);">
                        <section style="margin-right: 0%;margin-left: 0%;">
                            <section style="color: rgb(62, 62, 62);">
                                <p style="white-space: normal;">C.梦幻雪冰</p>
                            </section>
                        </section>
                    </section>
                </section>
                <!-- 选项互动动画 -->
                <section style="height: 0px;overflow: visible;">
                    <section style="vertical-align: top;">
                        <svg width="100%" xmlns="http://www.w3.org/2000/svg" style="width: 100%;" opacity="0" viewBox="0 0 100 10">
                            <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
                                <svg width="100%" height="100%">
                                    <rect width="100%" height="100%" style="opacity: 1;fill: rgba(225, 95, 99, 0.3);"></rect>
                                </svg>
                            </svg>
                            <!-- values属性:对于动画元素,该values属性是一个或多个值的以分号分隔的列表。动画将在动画过程中按顺序应用这些值。 -->
                            <animate fill="freeze" attributeName="opacity" begin="click" dur="0.2" keyTimes="0;0.5;1" values="0;1;0" restart="never"></animate>
                            <!-- restart属性:指示何时动画可以或不能重新启动。 -->
                            <animate fill="freeze" attributeName="opacity" begin="click + 0.33s" dur="0.2" keyTimes="0;0.5;1" values="0;1;0" restart="never"></animate>
                            <!-- fill:属性fill="freeze"时,动画终止时,发生变化的元素属性值停留在动画终止时的状态。 -->
                            <animate fill="freeze" attributeName="opacity" begin="click + 0.7s" dur="1600" restart="never" keyTimes="0;0.0000;1" values="0;1;1"></animate>
                        </svg>
                    </section>
                </section>
                <!-- 选项的高度 -->
                <section style="height: 0px;padding-top: 10%;"></section>
            </section>
        </section>
        <!------------------------------------------------ D选项 ---------------------------------------------->
        <section style="margin: 3px 0%;" data-copyright="懂点君">
            <section style="overflow: hidden;display: inline-block;width: 100%;vertical-align: top;align-self: flex-start;font-family: -apple-system-font, BlinkMacSystemFont, 'Helvetica Neue', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei UI', 'Microsoft YaHei', Arial, sans-serif;letter-spacing: 0.036em;">
                <!-- 选项文本内容 -->
                <section style="height: 0px;overflow: visible;">
                    <section style="display: inline-block;width: 100%;vertical-align: top;padding: 5px 10px;background-color: rgb(245, 245, 245);">
                        <section style="margin-right: 0%;margin-left: 0%;">
                            <section style="color: rgb(62, 62, 62);">
                                <p style="white-space: normal;">D.懂点鸭</p>
                            </section>
                        </section>
                    </section>
                </section>
                <!-- 选项互动动画 -->
                <section style="height: 0px;overflow: visible;">
                    <section style="vertical-align: top;">
                        <svg width="100%" xmlns="http://www.w3.org/2000/svg" style="width: 100%;" opacity="0" viewBox="0 0 100 10">
                            <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
                                <svg width="100%" height="100%">
                                    <rect width="100%" height="100%" style="opacity: 1;fill: rgba(225, 95, 99, 0.3);"></rect>
                                </svg>
                            </svg>
                            <!-- values属性:对于动画元素,该values属性是一个或多个值的以分号分隔的列表。动画将在动画过程中按顺序应用这些值。 -->
                            <animate fill="freeze" attributeName="opacity" begin="click" dur="0.2" keyTimes="0;0.5;1" values="0;1;0" restart="never"></animate>
                            <!-- restart属性:指示何时动画可以或不能重新启动。 -->
                            <animate fill="freeze" attributeName="opacity" begin="click + 0.33s" dur="0.2" keyTimes="0;0.5;1" values="0;1;0" restart="never"></animate>
                            <!-- fill:属性fill="freeze"时,动画终止时,发生变化的元素属性值停留在动画终止时的状态。 -->
                            <animate fill="freeze" attributeName="opacity" begin="click + 0.7s" dur="1600" restart="never" keyTimes="0;0.0000;1" values="0;1;1"></animate>
                        </svg>
                    </section>
                </section>
                <!-- 选项的高度 -->
                <section style="height: 0px;padding-top: 10%;"></section>
            </section>
        </section>
        <!------------------------------------------------ 分隔 ---------------------------------------------->
        <section style="margin-right: 0%;margin-bottom: 10px;margin-left: 0%;"></section>
    </section>
    <section style="font-size: 16px;">
        <!------------------------------------------------ 题目 ---------------------------------------------->
        <section style="margin: 10px 0% 5px;" data-copyright="懂点君">
            <section style="display: inline-block;width: 100%;vertical-align: top;background-color: rgb(240, 240, 240);">
                <section style="display: flex;flex-flow: row nowrap;">
                    <section style="display: inline-block;padding-right: 10px;padding-left: 10px;vertical-align: bottom;align-self: flex-end;flex: 100 100 0%;">
                        <p style="white-space: normal;">2.我的微信号是______?</p>
                    </section>
                </section>
            </section>
        </section>
        <!------------------------------------------------ A选项 ---------------------------------------------->
        <section style="margin: 3px 0%;" data-copyright="懂点君">
            <section style="overflow: hidden;display: inline-block;width: 100%;vertical-align: top;align-self: flex-start;font-family: -apple-system-font, BlinkMacSystemFont, 'Helvetica Neue', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei UI', 'Microsoft YaHei', Arial, sans-serif;letter-spacing: 0.036em;">
                <!-- 选项文本内容 -->
                <section style="height: 0px;overflow: visible;">
                    <section style="display: inline-block;width: 100%;vertical-align: top;padding: 5px 10px;background-color: rgb(245, 245, 245);">
                        <section style="margin-right: 0%;margin-left: 0%;">
                            <section style="color: rgb(62, 62, 62);">
                                <p style="white-space: normal;">A.dong-dian-jun</p>
                            </section>
                        </section>
                    </section>
                </section>
                <!-- 选项互动动画 -->
                <section style="height: 0px;overflow: visible;">
                    <section style="vertical-align: top;">
                        <svg width="100%" xmlns="http://www.w3.org/2000/svg" style="width: 100%;" opacity="0" viewBox="0 0 100 10">
                            <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
                                <svg width="100%" height="100%">
                                    <rect width="100%" height="100%" style="opacity: 1;fill: rgba(225, 95, 99, 0.3);"></rect>
                                </svg>
                            </svg>
                            <!-- values属性:对于动画元素,该values属性是一个或多个值的以分号分隔的列表。动画将在动画过程中按顺序应用这些值。 -->
                            <animate fill="freeze" attributeName="opacity" begin="click" dur="0.2" keyTimes="0;0.5;1" values="0;1;0" restart="never"></animate>
                            <!-- restart属性:指示何时动画可以或不能重新启动。 -->
                            <animate fill="freeze" attributeName="opacity" begin="click + 0.33s" dur="0.2" keyTimes="0;0.5;1" values="0;1;0" restart="never"></animate>
                            <!-- fill:属性fill="freeze"时,动画终止时,发生变化的元素属性值停留在动画终止时的状态。 -->
                            <animate fill="freeze" attributeName="opacity" begin="click + 0.7s" dur="1600" restart="never" keyTimes="0;0.0000;1" values="0;1;1"></animate>
                        </svg>
                    </section>
                </section>
                <!-- 选项的高度 -->
                <section style="height: 0px;padding-top: 10%;"></section>
            </section>
        </section>
        <!------------------------------------------------ B选项 ---------------------------------------------->
        <section style="margin: 3px 0%;" data-copyright="懂点君">
            <section style="overflow: hidden;display: inline-block;width: 100%;vertical-align: top;align-self: flex-start;font-family: -apple-system-font, BlinkMacSystemFont, 'Helvetica Neue', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei UI', 'Microsoft YaHei', Arial, sans-serif;letter-spacing: 0.036em;">
                <!-- 选项文本内容 -->
                <section style="height: 0px;overflow: visible;">
                    <section style="display: inline-block;width: 100%;vertical-align: top;padding: 5px 10px;background-color: rgb(245, 245, 245);">
                        <section style="margin-right: 0%;margin-left: 0%;">
                            <section style="color: rgb(62, 62, 62);">
                                <p style="white-space: normal;">B.dong_dian_jun</p>
                            </section>
                        </section>
                    </section>
                </section>
                <!-- 选项互动动画 -->
                <section style="height: 0px;overflow: visible;">
                    <section style="vertical-align: top;">
                        <svg width="100%" xmlns="http://www.w3.org/2000/svg" style="width: 100%;" opacity="0" viewBox="0 0 100 10">
                            <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
                                <svg width="100%" height="100%">
                                    <rect width="100%" height="100%" style="opacity: 1;fill: rgba(7, 193, 96, 0.3);"></rect>
                                </svg>
                            </svg>
                            <!-- values属性:对于动画元素,该values属性是一个或多个值的以分号分隔的列表。动画将在动画过程中按顺序应用这些值。 -->
                            <animate fill="freeze" attributeName="opacity" begin="click" dur="0.2" keyTimes="0;0.5;1" values="0;1;0" restart="never"></animate>
                            <!-- restart属性:指示何时动画可以或不能重新启动。 -->
                            <animate fill="freeze" attributeName="opacity" begin="click + 0.33s" dur="0.2" keyTimes="0;0.5;1" values="0;1;0" restart="never"></animate>
                            <!-- fill:属性fill="freeze"时,动画终止时,发生变化的元素属性值停留在动画终止时的状态。 -->
                            <animate fill="freeze" attributeName="opacity" begin="click + 0.7s" dur="1600" restart="never" keyTimes="0;0.0000;1" values="0;1;1"></animate>
                        </svg>
                    </section>
                </section>
                <!-- 选项的高度 -->
                <section style="height: 0px;padding-top: 10%;"></section>
            </section>
        </section>
        <!------------------------------------------------ C选项 ---------------------------------------------->
        <section style="margin: 3px 0%;" data-copyright="懂点君">
            <section style="overflow: hidden;display: inline-block;width: 100%;vertical-align: top;align-self: flex-start;font-family: -apple-system-font, BlinkMacSystemFont, 'Helvetica Neue', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei UI', 'Microsoft YaHei', Arial, sans-serif;letter-spacing: 0.036em;">
                <!-- 选项文本内容 -->
                <section style="height: 0px;overflow: visible;">
                    <section style="display: inline-block;width: 100%;vertical-align: top;padding: 5px 10px;background-color: rgb(245, 245, 245);">
                        <section style="margin-right: 0%;margin-left: 0%;">
                            <section style="color: rgb(62, 62, 62);">
                                <p style="white-space: normal;">C.dongdianjun</p>
                            </section>
                        </section>
                    </section>
                </section>
                <!-- 选项互动动画 -->
                <section style="height: 0px;overflow: visible;">
                    <section style="vertical-align: top;">
                        <svg width="100%" xmlns="http://www.w3.org/2000/svg" style="width: 100%;" opacity="0" viewBox="0 0 100 10">
                            <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
                                <svg width="100%" height="100%">
                                    <rect width="100%" height="100%" style="opacity: 1;fill: rgba(225, 95, 99, 0.3);"></rect>
                                </svg>
                            </svg>
                            <!-- values属性:对于动画元素,该values属性是一个或多个值的以分号分隔的列表。动画将在动画过程中按顺序应用这些值。 -->
                            <animate fill="freeze" attributeName="opacity" begin="click" dur="0.2" keyTimes="0;0.5;1" values="0;1;0" restart="never"></animate>
                            <!-- restart属性:指示何时动画可以或不能重新启动。 -->
                            <animate fill="freeze" attributeName="opacity" begin="click + 0.33s" dur="0.2" keyTimes="0;0.5;1" values="0;1;0" restart="never"></animate>
                            <!-- fill:属性fill="freeze"时,动画终止时,发生变化的元素属性值停留在动画终止时的状态。 -->
                            <animate fill="freeze" attributeName="opacity" begin="click + 0.7s" dur="1600" restart="never" keyTimes="0;0.0000;1" values="0;1;1"></animate>
                        </svg>
                    </section>
                </section>
                <!-- 选项的高度 -->
                <section style="height: 0px;padding-top: 10%;"></section>
            </section>
        </section>
        <!------------------------------------------------ D选项 ---------------------------------------------->
        <section style="margin: 3px 0%;" data-copyright="懂点君">
            <section style="overflow: hidden;display: inline-block;width: 100%;vertical-align: top;align-self: flex-start;font-family: -apple-system-font, BlinkMacSystemFont, 'Helvetica Neue', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei UI', 'Microsoft YaHei', Arial, sans-serif;letter-spacing: 0.036em;">
                <!-- 选项文本内容 -->
                <section style="height: 0px;overflow: visible;">
                    <section style="display: inline-block;width: 100%;vertical-align: top;padding: 5px 10px;background-color: rgb(245, 245, 245);">
                        <section style="margin-right: 0%;margin-left: 0%;">
                            <section style="color: rgb(62, 62, 62);">
                                <p style="white-space: normal;">D.dong__dian__jun</p>
                            </section>
                        </section>
                    </section>
                </section>
                <!-- 选项互动动画 -->
                <section style="height: 0px;overflow: visible;">
                    <section style="vertical-align: top;">
                        <svg width="100%" xmlns="http://www.w3.org/2000/svg" style="width: 100%;" opacity="0" viewBox="0 0 100 10">
                            <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
                                <svg width="100%" height="100%">
                                    <rect width="100%" height="100%" style="opacity: 1;fill: rgba(225, 95, 99, 0.3);"></rect>
                                </svg>
                            </svg>
                            <!-- values属性:对于动画元素,该values属性是一个或多个值的以分号分隔的列表。动画将在动画过程中按顺序应用这些值。 -->
                            <animate fill="freeze" attributeName="opacity" begin="click" dur="0.2" keyTimes="0;0.5;1" values="0;1;0" restart="never"></animate>
                            <!-- restart属性:指示何时动画可以或不能重新启动。 -->
                            <animate fill="freeze" attributeName="opacity" begin="click + 0.33s" dur="0.2" keyTimes="0;0.5;1" values="0;1;0" restart="never"></animate>
                            <!-- fill:属性fill="freeze"时,动画终止时,发生变化的元素属性值停留在动画终止时的状态。 -->
                            <animate fill="freeze" attributeName="opacity" begin="click + 0.7s" dur="1600" restart="never" keyTimes="0;0.0000;1" values="0;1;1"></animate>
                        </svg>
                    </section>
                </section>
                <!-- 选项的高度 -->
                <section style="height: 0px;padding-top: 10%;"></section>
            </section>
        </section>
        <!------------------------------------------------ 分隔 ---------------------------------------------->
        <section style="margin-right: 0%;margin-bottom: 10px;margin-left: 0%;"></section>
    </section>
    <section style="font-size: 16px;">
        <!------------------------------------------------ 题目 ---------------------------------------------->
        <section style="margin: 10px 0% 5px;" data-copyright="懂点君">
            <section style="display: inline-block;width: 100%;vertical-align: top;background-color: rgb(240, 240, 240);">
                <section style="display: flex;flex-flow: row nowrap;">
                    <section style="display: inline-block;padding-right: 10px;padding-left: 10px;vertical-align: bottom;align-self: flex-end;flex: 100 100 0%;">
                        <p style="white-space: normal;">3.我的视频号最近更新的内容是______?</p>
                    </section>
                </section>
            </section>
        </section>
        <!------------------------------------------------ A选项 ---------------------------------------------->
        <section style="margin: 3px 0%;" data-copyright="懂点君">
            <section style="overflow: hidden;display: inline-block;width: 100%;vertical-align: top;align-self: flex-start;font-family: -apple-system-font, BlinkMacSystemFont, 'Helvetica Neue', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei UI', 'Microsoft YaHei', Arial, sans-serif;letter-spacing: 0.036em;">
                <!-- 选项文本内容 -->
                <section style="height: 0px;overflow: visible;">
                    <section style="display: inline-block;width: 100%;vertical-align: top;padding: 5px 10px;background-color: rgb(245, 245, 245);">
                        <section style="margin-right: 0%;margin-left: 0%;">
                            <section style="color: rgb(62, 62, 62);">
                                <p style="white-space: normal;">A.手机的这个密码比锁屏密码更重要!</p>
                            </section>
                        </section>
                    </section>
                </section>
                <!-- 选项互动动画 -->
                <section style="height: 0px;overflow: visible;">
                    <section style="vertical-align: top;">
                        <svg width="100%" xmlns="http://www.w3.org/2000/svg" style="width: 100%;" opacity="0" viewBox="0 0 100 10">
                            <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
                                <svg width="100%" height="100%">
                                    <rect width="100%" height="100%" style="opacity: 1;fill: rgba(225, 95, 99, 0.3);"></rect>
                                </svg>
                            </svg>
                            <!-- values属性:对于动画元素,该values属性是一个或多个值的以分号分隔的列表。动画将在动画过程中按顺序应用这些值。 -->
                            <animate fill="freeze" attributeName="opacity" begin="click" dur="0.2" keyTimes="0;0.5;1" values="0;1;0" restart="never"></animate>
                            <!-- restart属性:指示何时动画可以或不能重新启动。 -->
                            <animate fill="freeze" attributeName="opacity" begin="click + 0.33s" dur="0.2" keyTimes="0;0.5;1" values="0;1;0" restart="never"></animate>
                            <!-- fill:属性fill="freeze"时,动画终止时,发生变化的元素属性值停留在动画终止时的状态。 -->
                            <animate fill="freeze" attributeName="opacity" begin="click + 0.7s" dur="1600" restart="never" keyTimes="0;0.0000;1" values="0;1;1"></animate>
                        </svg>
                    </section>
                </section>
                <!-- 选项的高度 -->
                <section style="height: 0px;padding-top: 10%;"></section>
            </section>
        </section>
        <!------------------------------------------------ B选项 ---------------------------------------------->
        <section style="margin: 3px 0%;" data-copyright="懂点君">
            <section style="overflow: hidden;display: inline-block;width: 100%;vertical-align: top;align-self: flex-start;font-family: -apple-system-font, BlinkMacSystemFont, 'Helvetica Neue', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei UI', 'Microsoft YaHei', Arial, sans-serif;letter-spacing: 0.036em;">
                <!-- 选项文本内容 -->
                <section style="height: 0px;overflow: visible;">
                    <section style="display: inline-block;width: 100%;vertical-align: top;padding: 5px 10px;background-color: rgb(245, 245, 245);">
                        <section style="margin-right: 0%;margin-left: 0%;">
                            <section style="color: rgb(62, 62, 62);">
                                <p style="white-space: normal;">B.公众号图文如何应用SVG模板代码?</p>
                            </section>
                        </section>
                    </section>
                </section>
                <!-- 选项互动动画 -->
                <section style="height: 0px;overflow: visible;">
                    <section style="vertical-align: top;">
                        <svg width="100%" xmlns="http://www.w3.org/2000/svg" style="width: 100%;" opacity="0" viewBox="0 0 100 10">
                            <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
                                <svg width="100%" height="100%">
                                    <rect width="100%" height="100%" style="opacity: 1;fill: rgba(225, 95, 99, 0.3);"></rect>
                                </svg>
                            </svg>
                            <!-- values属性:对于动画元素,该values属性是一个或多个值的以分号分隔的列表。动画将在动画过程中按顺序应用这些值。 -->
                            <animate fill="freeze" attributeName="opacity" begin="click" dur="0.2" keyTimes="0;0.5;1" values="0;1;0" restart="never"></animate>
                            <!-- restart属性:指示何时动画可以或不能重新启动。 -->
                            <animate fill="freeze" attributeName="opacity" begin="click + 0.33s" dur="0.2" keyTimes="0;0.5;1" values="0;1;0" restart="never"></animate>
                            <!-- fill:属性fill="freeze"时,动画终止时,发生变化的元素属性值停留在动画终止时的状态。 -->
                            <animate fill="freeze" attributeName="opacity" begin="click + 0.7s" dur="1600" restart="never" keyTimes="0;0.0000;1" values="0;1;1"></animate>
                        </svg>
                    </section>
                </section>
                <!-- 选项的高度 -->
                <section style="height: 0px;padding-top: 10%;"></section>
            </section>
        </section>
        <!------------------------------------------------ C选项 ---------------------------------------------->
        <section style="margin: 3px 0%;" data-copyright="懂点君">
            <section style="overflow: hidden;display: inline-block;width: 100%;vertical-align: top;align-self: flex-start;font-family: -apple-system-font, BlinkMacSystemFont, 'Helvetica Neue', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei UI', 'Microsoft YaHei', Arial, sans-serif;letter-spacing: 0.036em;">
                <!-- 选项文本内容 -->
                <section style="height: 0px;overflow: visible;">
                    <section style="display: inline-block;width: 100%;vertical-align: top;padding: 5px 10px;background-color: rgb(245, 245, 245);">
                        <section style="margin-right: 0%;margin-left: 0%;">
                            <section style="color: rgb(62, 62, 62);">
                                <p style="white-space: normal;">C.经常使用借呗会带来征信负面吗?</p>
                            </section>
                        </section>
                    </section>
                </section>
                <!-- 选项互动动画 -->
                <section style="height: 0px;overflow: visible;">
                    <section style="vertical-align: top;">
                        <svg width="100%" xmlns="http://www.w3.org/2000/svg" style="width: 100%;" opacity="0" viewBox="0 0 100 10">
                            <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
                                <svg width="100%" height="100%">
                                    <rect width="100%" height="100%" style="opacity: 1;fill: rgba(7, 193, 96, 0.3);"></rect>
                                </svg>
                            </svg>
                            <!-- values属性:对于动画元素,该values属性是一个或多个值的以分号分隔的列表。动画将在动画过程中按顺序应用这些值。 -->
                            <animate fill="freeze" attributeName="opacity" begin="click" dur="0.2" keyTimes="0;0.5;1" values="0;1;0" restart="never"></animate>
                            <!-- restart属性:指示何时动画可以或不能重新启动。 -->
                            <animate fill="freeze" attributeName="opacity" begin="click + 0.33s" dur="0.2" keyTimes="0;0.5;1" values="0;1;0" restart="never"></animate>
                            <!-- fill:属性fill="freeze"时,动画终止时,发生变化的元素属性值停留在动画终止时的状态。 -->
                            <animate fill="freeze" attributeName="opacity" begin="click + 0.7s" dur="1600" restart="never" keyTimes="0;0.0000;1" values="0;1;1"></animate>
                        </svg>
                    </section>
                </section>
                <!-- 选项的高度 -->
                <section style="height: 0px;padding-top: 10%;"></section>
            </section>
        </section>
        <!------------------------------------------------ D选项 ---------------------------------------------->
        <section style="margin: 3px 0%;" data-copyright="懂点君">
            <section style="overflow: hidden;display: inline-block;width: 100%;vertical-align: top;align-self: flex-start;font-family: -apple-system-font, BlinkMacSystemFont, 'Helvetica Neue', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei UI', 'Microsoft YaHei', Arial, sans-serif;letter-spacing: 0.036em;">
                <!-- 选项文本内容 -->
                <section style="height: 0px;overflow: visible;">
                    <section style="display: inline-block;width: 100%;vertical-align: top;padding: 5px 10px;background-color: rgb(245, 245, 245);">
                        <section style="margin-right: 0%;margin-left: 0%;">
                            <section style="color: rgb(62, 62, 62);">
                                <p style="white-space: normal;">D.手机这样充电,能延长电池寿命</p>
                            </section>
                        </section>
                    </section>
                </section>
                <!-- 选项互动动画 -->
                <section style="height: 0px;overflow: visible;">
                    <section style="vertical-align: top;">
                        <svg width="100%" xmlns="http://www.w3.org/2000/svg" style="width: 100%;" opacity="0" viewBox="0 0 100 10">
                            <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
                                <svg width="100%" height="100%">
                                    <rect width="100%" height="100%" style="opacity: 1;fill: rgba(225, 95, 99, 0.3);"></rect>
                                </svg>
                            </svg>
                            <!-- values属性:对于动画元素,该values属性是一个或多个值的以分号分隔的列表。动画将在动画过程中按顺序应用这些值。 -->
                            <animate fill="freeze" attributeName="opacity" begin="click" dur="0.2" keyTimes="0;0.5;1" values="0;1;0" restart="never"></animate>
                            <!-- restart属性:指示何时动画可以或不能重新启动。 -->
                            <animate fill="freeze" attributeName="opacity" begin="click + 0.33s" dur="0.2" keyTimes="0;0.5;1" values="0;1;0" restart="never"></animate>
                            <!-- fill:属性fill="freeze"时,动画终止时,发生变化的元素属性值停留在动画终止时的状态。 -->
                            <animate fill="freeze" attributeName="opacity" begin="click + 0.7s" dur="1600" restart="never" keyTimes="0;0.0000;1" values="0;1;1"></animate>
                        </svg>
                    </section>
                </section>
                <!-- 选项的高度 -->
                <section style="height: 0px;padding-top: 10%;"></section>
            </section>
        </section>
        <!------------------------------------------------ 分隔 ---------------------------------------------->
        <section style="margin-right: 0%;margin-bottom: 10px;margin-left: 0%;"></section>
    </section>
</section>


模板应用


最后一次编辑于  11-16  
点赞 0
收藏
评论
登录 后发表内容