运营

微信文章样式

叶九秋 · 12月17日 · 2019年

很多微信编辑器里面好玩的样式大都是收费的,为了方便使用,九秋便将一些有趣的样式搬出来。

使用的时候只需要复制代码,粘贴到html编辑器里面就行了。

滑动

固定背景滑动

展示样式,手机端可见,向左滑动即可。

1、准备两张图,尺寸大小必须一样。背景图和前置的PNG透明图的内容要对的上。

2、如果上传于微信公众号,就需要PNG图片大小不超过30K,否则PNG会从透明变成白色底图的图片。

3、复制下面的代码,粘贴于微信编辑器的html模式里面。

<section id="wrap_node" style="border: dashed 1px #797979; padding: 5px;">
    <section label="huadong " style="width: 100%;
border:none;
border-style:none;overflow: hidden;
margin:0.5rem auto;" id="shifu_gqixi_012" donone="shifuMouseDownPayStyle(&#39;shifu_gqixi_012&#39;)">
        <section style="background-image: url(http://yejiuqiu.cn/wp-content/uploads/001.jpeg);background-position: 50% 50%;background-repeat: no-repeat;background-size: cover;background-attachment: scroll;width: 100%;margin-left: auto;margin-right: auto;">
            <section style="display: inline-block;width: 100%;vertical-align: top;overflow: auto;-webkit-overflow-scrolling: touch;">
                <section style="display: flex;justify-content: flex-start;align-items: flex-start;width: 200%;min-width: 100%;max-width: 200% !important;">
                    <section style="display: inline-block;width: 50%;vertical-align: top;"></section>
                    <section style="display: inline-block;width: 50%;vertical-align: top;">
                        <img src="http://yejiuqiu.cn/wp-content/uploads/001.png" style="width:100%; height: auto; visibility: visible;vertical-align:bottom;" data-ipaiban="width中修改图片大小"/>
                    </section>
                </section>
            </section>
        </section>
    </section>
</section>

4、代码里面有两张图片链接,将准备好的背景图和PNG图片上传于微信公众号后台,点击图片,获取到图片链接。将背景图链接替换上面代码里第一条图片链接,将PNG图片链接替换代码中第二条图片链接。

5、替换完成之后,就返回常规模式就行了。

补:至于说作图,元素分配原理很简单。

新建透明图层,将要做的内容做完,做完图之后,将图层根据需要分两部分保存就行了。一部分是底图保存为jpg格式,另一部分内容另存为png-8即可。

不会PS的戳这个

点击

点击飞机

九秋笔记 是一个高 效、 简洁 美观的独立有逼格网 站, 帮你快速 决问 题。 功能包 括: 运营技 巧、 工具 箱、 读书笔 记、 全网最全的资 全都汇聚于此!
<section label="灰机" style="width: 100%;border:none;border-style:none;margin:0.5rem auto;" id="shifu_svg_040" donone="shifuMouseDownPayStyle(&#39;shifu_svg_040&#39;)">
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 640 320" xml:space="preserve">
        <g label="ipaibananimate_glanimate" style="outline: none; -webkit-tap-highlight-color: rgba(255, 255, 255, 0); -webkit-focus-ring-color: rgba(0, 0, 0, 0);">
            <rect x="-440.66" y="0" fill="#67C9EE" width="1080.66" height="320" style="outline: none; -webkit-tap-highlight-color: rgba(255, 255, 255, 0); -webkit-focus-ring-color: rgba(0, 0, 0, 0);"></rect>
            <animatetransform accumulate="none" additive="replace" attributename="transform" begin="click" calcmode="linear" dur="5s" fill="freeze" restart="always" type="translate" values="0 0;945 0"></animatetransform>
            <g label="ipaibananimate_glanimate" style="outline: none; -webkit-tap-highlight-color: rgba(255, 255, 255, 0); -webkit-focus-ring-color: rgba(0, 0, 0, 0);">
                <animate accumulate="none" additive="replace" attributename="opacity" begin="click+4.5s" calcmode="linear" dur="0.5s" fill="freeze" restart="always" values="1;0"></animate>
                <g label="ipaibananimate_glanimate" transform="translate(-7.63584 0)" style="outline: none; -webkit-tap-highlight-color: rgba(255, 255, 255, 0); -webkit-focus-ring-color: rgba(0, 0, 0, 0);">
                    <animatetransform accumulate="none" additive="replace" attributename="transform" begin="0s" calcmode="linear" dur="1.5s" end="click" fill="remove" repeatcount="indefinite" restart="always" type="translate" values="-10 0;10 0;-10 0"></animatetransform>
                    <g label="ipaibananimate_glanimate">
                        <polygon fill="#D9D9D9" points="55.76,164.18 40.23,164.18 32.19,194.18 38.44,194.18 				"></polygon>
                        <polygon fill="#D9D9D9" points="55.76,157.93 40.23,157.93 32.19,127.93 38.44,127.93 				"></polygon>
                        <g label="ipaibananimate_glanimate">
                            <g label="ipaibananimate_glanimate">
                                <path data-ipaiban="glanimate" fill="#FFFFFF" data-ipaiban-fill="fill中设置文字颜色,#号加色值(十六进制)" d="M119.77,99.81l10.1,0c2.07,0,3.75,1.68,3.75,3.75l0,0c0,2.07-1.68,3.75-3.75,3.75
				l-5.77,0L119.77,99.81z"></path>
                                <path data-ipaiban="glanimate" fill="#FFFFFF" data-ipaiban-fill="fill中设置文字颜色,#号加色值(十六进制)" d="M130.59,118.56h10.1c2.07,0,3.75,1.68,3.75,3.75l0,0c0,2.07-1.68,3.75-3.75,3.75
				l-5.77,0L130.59,118.56z"></path>
                            </g>
                            <polygon fill="#D9D9D9" points="148.63,147.31 148.64,148.56 116.12,148.56 116.12,147.31 97.69,78.56
				108.94,78.56 					"></polygon>
                        </g>
                        <g label="ipaibananimate_glanimate">
                            <g label="ipaibananimate_glanimate">
                                <path data-ipaiban="glanimate" fill="#FFFFFF" data-ipaiban-fill="fill中设置文字颜色,#号加色值(十六进制)" d="M119.77,222.31l10.1,0c2.07,0,3.75-1.68,3.75-3.75l0,0c0-2.07-1.68-3.75-3.75-3.75
					l-5.77,0L119.77,222.31z"></path>
                                <path data-ipaiban="glanimate" fill="#FFFFFF" data-ipaiban-fill="fill中设置文字颜色,#号加色值(十六进制)" d="M130.59,203.56h10.1c2.07,0,3.75-1.68,3.75-3.75l0,0c0-2.07-1.68-3.75-3.75-3.75
					l-5.77,0L130.59,203.56z"></path>
                            </g>
                            <polygon fill="#D9D9D9" points="148.63,174.81 148.63,173.56 116.12,173.56 116.12,174.81 97.69,243.56
					108.94,243.56 					"></polygon>
                        </g>
                        <path data-ipaiban="glanimate" fill="#FFFFFF" data-ipaiban-fill="fill中设置文字颜色,#号加色值(十六进制)" d="M123.16,147.31c-48.17,0-87.23,6.16-87.23,13.75c0,7.59,39.05,13.75,87.23,13.75
					l50.87,0c20.08,0,36.35-6.16,36.35-13.75c0-7.59-16.27-13.75-36.35-13.75L123.16,147.31z"></path>
                        <path data-ipaiban="glanimate" fill="#3C3C3B" d="M186.16,161.06c0,3.42-1.17,6.66-3.27,9.58c4.78-2.65,7.64-5.97,7.64-9.58
					c0-3.61-2.86-6.93-7.64-9.58C184.98,154.4,186.16,157.64,186.16,161.06z"></path>
                        <g label="ipaibananimate_glanimate">
                            <rect x="44.25" y="107.31" fill="#FFFFFF" data-ipaiban-fill="fill中设置文字颜色,#号加色值(十六进制)" width="50.94" height="2.5"></rect>
                            <rect x="69.72" y="97.31" fill="#FFFFFF" data-ipaiban-fill="fill中设置文字颜色,#号加色值(十六进制)" width="25.47" height="2.5"></rect>
                            <rect x="82.46" y="117.31" fill="#FFFFFF" data-ipaiban-fill="fill中设置文字颜色,#号加色值(十六进制)" width="12.74" height="2.5"></rect>
                        </g>
                        <g label="ipaibananimate_glanimate">
                            <rect x="44.25" y="212.31" fill="#FFFFFF" data-ipaiban-fill="fill中设置文字颜色,#号加色值(十六进制)" width="50.94" height="2.5"></rect>
                            <rect x="69.72" y="222.31" fill="#FFFFFF" data-ipaiban-fill="fill中设置文字颜色,#号加色值(十六进制)" width="25.47" height="2.5"></rect>
                            <rect x="19.45" y="212.31" fill="#FFFFFF" data-ipaiban-fill="fill中设置文字颜色,#号加色值(十六进制)" width="12.74" height="2.5"></rect>
                        </g>
                    </g>
                </g>
            </g>
            <path data-ipaiban="glanimate" fill="#97D2D0" d="M-0.06,161.06c-225.99-43.2-351.82-166.91-302.82-287l-0.01,0l-0.2-0.11h-96.68l0.19,0.1H-945v573.99h564.5
							l0.04,0.02h77.56l0.05-0.02l-0.02-0.01C-351.86,327.96-226.04,204.25-0.06,161.06z"></path>
            <rect x="-871.08" y="44.5" fill="none" width="497.97" height="231"></rect>
            <text data-ipaiban="glanimate" transform="matrix(0.9999 0 0 1 -871.0798 71.1602)">
                <tspan x="0" y="0" fill="#FFFFFF" data-ipaiban-fill="fill中设置文字颜色,#号加色值(十六进制)" font-size="31px" data-ipaiban-size="font-size中设置字体大小">
                    九秋笔记
                </tspan>
                <tspan x="190.43" y="0" fill="#FFFFFF" data-ipaiban-fill="fill中设置文字颜色,#号加色值(十六进制)" font-size="31px" data-ipaiban-size="font-size中设置字体大小" letter-spacing="4">
                    是一个高
                </tspan>
                <tspan x="333.48" y="0" fill="#FFFFFF" data-ipaiban-fill="fill中设置文字颜色,#号加色值(十六进制)" font-size="31px" data-ipaiban-size="font-size中设置字体大小">
                    效、
                </tspan>
                <tspan x="395.48" y="0" fill="#FFFFFF" data-ipaiban-fill="fill中设置文字颜色,#号加色值(十六进制)" font-size="31px" data-ipaiban-size="font-size中设置字体大小" letter-spacing="4">
                    简洁
                </tspan>
                <tspan x="467" y="0" fill="#FFFFFF" data-ipaiban-fill="fill中设置文字颜色,#号加色值(十六进制)" font-size="31px" data-ipaiban-size="font-size中设置字体大小">
                    又
                </tspan>
                <tspan x="0" y="48" fill="#FFFFFF" data-ipaiban-fill="fill中设置文字颜色,#号加色值(十六进制)" font-size="31px" data-ipaiban-size="font-size中设置字体大小">
                    美观的独立有逼格网
                </tspan>
                <tspan x="280.38" y="48" fill="#FFFFFF" data-ipaiban-fill="fill中设置文字颜色,#号加色值(十六进制)" font-size="31px" data-ipaiban-size="font-size中设置字体大小">
                    站,
                </tspan>
                <tspan x="342.38" y="48" fill="#FFFFFF" data-ipaiban-fill="fill中设置文字颜色,#号加色值(十六进制)" font-size="31px" data-ipaiban-size="font-size中设置字体大小">
                    帮你快速
                </tspan>
                <tspan x="467" y="48" fill="#FFFFFF" data-ipaiban-fill="fill中设置文字颜色,#号加色值(十六进制)" font-size="31px" data-ipaiban-size="font-size中设置字体大小">
                    解
                </tspan>
                <tspan x="0" y="96" fill="#FFFFFF" data-ipaiban-fill="fill中设置文字颜色,#号加色值(十六进制)" font-size="31px" data-ipaiban-size="font-size中设置字体大小">
                    决问
                </tspan>
                <tspan x="62.44" y="96" fill="#FFFFFF" data-ipaiban-fill="fill中设置文字颜色,#号加色值(十六进制)" font-size="31px" data-ipaiban-size="font-size中设置字体大小">
                    题。
                </tspan>
                <tspan x="124.44" y="96" fill="#FFFFFF" data-ipaiban-fill="fill中设置文字颜色,#号加色值(十六进制)" font-size="31px" data-ipaiban-size="font-size中设置字体大小">
                    功能包
                </tspan>
                <tspan x="218.11" y="96" fill="#FFFFFF" data-ipaiban-fill="fill中设置文字颜色,#号加色值(十六进制)" font-size="31px" data-ipaiban-size="font-size中设置字体大小">
                    括:
                </tspan>
                <tspan x="280.11" y="96" fill="#FFFFFF" data-ipaiban-fill="fill中设置文字颜色,#号加色值(十六进制)" font-size="31px" data-ipaiban-size="font-size中设置字体大小">
                    运营技
                </tspan>
                <tspan x="373.78" y="96" fill="#FFFFFF" data-ipaiban-fill="fill中设置文字颜色,#号加色值(十六进制)" font-size="31px" data-ipaiban-size="font-size中设置字体大小">
                    巧、
                </tspan>
                <tspan x="435.78" y="96" fill="#FFFFFF" data-ipaiban-fill="fill中设置文字颜色,#号加色值(十六进制)" font-size="31px" data-ipaiban-size="font-size中设置字体大小">
                    效
                </tspan>
                <tspan x="467" y="96" fill="#FFFFFF" data-ipaiban-fill="fill中设置文字颜色,#号加色值(十六进制)" font-size="31px" data-ipaiban-size="font-size中设置字体大小">
                    率
                </tspan>
                <tspan x="0" y="144" fill="#FFFFFF" data-ipaiban-fill="fill中设置文字颜色,#号加色值(十六进制)" font-size="31px" data-ipaiban-size="font-size中设置字体大小">
                    工具
                </tspan>
                <tspan x="62.36" y="144" fill="#FFFFFF" data-ipaiban-fill="fill中设置文字颜色,#号加色值(十六进制)" font-size="31px" data-ipaiban-size="font-size中设置字体大小">
                    箱、
                </tspan>
                <tspan x="124.36" y="144" fill="#FFFFFF" data-ipaiban-fill="fill中设置文字颜色,#号加色值(十六进制)" font-size="31px" data-ipaiban-size="font-size中设置字体大小">
                    读书笔
                </tspan>
                <tspan x="217.91" y="144" fill="#FFFFFF" data-ipaiban-fill="fill中设置文字颜色,#号加色值(十六进制)" font-size="31px" data-ipaiban-size="font-size中设置字体大小">
                    记、
                </tspan>
                <tspan x="279.91" y="144" fill="#FFFFFF" data-ipaiban-fill="fill中设置文字颜色,#号加色值(十六进制)" font-size="31px" data-ipaiban-size="font-size中设置字体大小">
                    全网最全的资
                </tspan>
                <tspan x="467" y="144" fill="#FFFFFF" data-ipaiban-fill="fill中设置文字颜色,#号加色值(十六进制)" font-size="31px" data-ipaiban-size="font-size中设置字体大小">
                    源
                </tspan>
                <tspan x="0" y="192" fill="#FFFFFF" data-ipaiban-fill="fill中设置文字颜色,#号加色值(十六进制)" font-size="31px" data-ipaiban-size="font-size中设置字体大小">
                    全都汇聚于此!
                </tspan>
            </text>
            <g label="ipaibananimate_glanimate">
                <g label="ipaibananimate_glanimate">
                    <path data-ipaiban="glanimate" fill="#FFFFFF" data-ipaiban-fill="fill中设置文字颜色,#号加色值(十六进制)" d="M501.25,37.47c-13.81,0-25,11.19-25,25h50C526.25,48.66,515.06,37.47,501.25,37.47z"></path>
                    <path data-ipaiban="glanimate" fill="#FFFFFF" data-ipaiban-fill="fill中设置文字颜色,#号加色值(十六进制)" d="M478.84,62.47c-1.52-7.42-8.08-12.99-15.94-12.99c-7.86,0-14.42,5.58-15.94,12.99H478.84z
									"></path>
                </g>
                <g label="ipaibananimate_glanimate">
                    <path data-ipaiban="glanimate" fill="#FFFFFF" data-ipaiban-fill="fill中设置文字颜色,#号加色值(十六进制)" d="M298.26,130.09c-1.52-7.42-8.07-12.99-15.94-12.99c-7.86,0-14.42,5.58-15.94,12.99H298.26
										z"></path>
                    <path data-ipaiban="glanimate" fill="#FFFFFF" data-ipaiban-fill="fill中设置文字颜色,#号加色值(十六进制)" d="M327.54,130.09c-1.52-7.42-8.08-12.99-15.94-12.99c-7.86,0-14.42,5.58-15.94,12.99H327.54
										z"></path>
                </g>
                <g label="ipaibananimate_glanimate">
                    <path data-ipaiban="glanimate" fill="#FFFFFF" data-ipaiban-fill="fill中设置文字颜色,#号加色值(十六进制)" d="M428.26,172.97h-2.5c0-3.72-3.03-6.75-6.75-6.75v-2.5c3.41,0,6.4,1.86,8,4.61
											c1.6-2.75,4.59-4.61,8-4.61v2.5C431.29,166.22,428.26,169.25,428.26,172.97z"></path>
                </g>
                <g label="ipaibananimate_glanimate">
                    <path data-ipaiban="glanimate" fill="#FFFFFF" data-ipaiban-fill="fill中设置文字颜色,#号加色值(十六进制)" d="M353.26,94.75h-2.5c0-3.72-3.03-6.75-6.75-6.75v-2.5c3.41,0,6.4,1.86,8,4.61
												c1.6-2.75,4.59-4.61,8-4.61V88C356.29,88,353.26,91.03,353.26,94.75z"></path>
                </g>
                <g label="ipaibananimate_glanimate">
                    <path data-ipaiban="glanimate" fill="#FFFFFF" data-ipaiban-fill="fill中设置文字颜色,#号加色值(十六进制)" d="M442.76,91.12c-13.81,0-25,11.19-25,25h50C467.76,102.31,456.57,91.12,442.76,91.12z"></path>
                    <path data-ipaiban="glanimate" fill="#FFFFFF" data-ipaiban-fill="fill中设置文字颜色,#号加色值(十六进制)" d="M420.36,116.12c-1.52-7.42-8.08-12.99-15.94-12.99c-7.86,0-14.42,5.58-15.94,12.99H420.36
													z"></path>
                    <path data-ipaiban="glanimate" fill="#FFFFFF" data-ipaiban-fill="fill中设置文字颜色,#号加色值(十六进制)" d="M497.05,116.12c-1.52-7.42-8.08-12.99-15.94-12.99c-7.86,0-14.42,5.58-15.94,12.99H497.05
													z"></path>
                </g>
                <g label="ipaibananimate_glanimate">
                    <path data-ipaiban="glanimate" fill="#FFFFFF" data-ipaiban-fill="fill中设置文字颜色,#号加色值(十六进制)" d="M381.42,31.13c-13.81,0-25,11.19-25,25h50C406.42,42.32,395.22,31.13,381.42,31.13z"></path>
                    <path data-ipaiban="glanimate" fill="#FFFFFF" data-ipaiban-fill="fill中设置文字颜色,#号加色值(十六进制)" d="M359.01,56.13c-1.52-7.42-8.08-13-15.94-13c-7.86,0-14.42,5.58-15.94,13H359.01z"></path>
                    <g label="ipaibananimate_glanimate">
                        <path data-ipaiban="glanimate" fill="#FFFFFF" data-ipaiban-fill="fill中设置文字颜色,#号加色值(十六进制)" d="M319.36,56.13c-1.01-4.96-5.4-8.69-10.66-8.69c-5.26,0-9.64,3.73-10.66,8.69H319.36z"></path>
                    </g>
                </g>
            </g>
        </g>
    </svg>
</section>

1、复制上面的代码到微信编辑器html代码模式。

2、修改对应的文字。为了避免错位,最好按照原有格式修改。

<tspan x="395.48" y="0" fill="#FFFFFF" data-ipaiban-fill="fill中设置文字颜色,#号加色值(十六进制)" font-size="31px" data-ipaiban-size="font-size中设置字体大小" letter-spacing="4">
简洁
</tspan>

x表示这段文字的横坐标,y表示这段文字的纵坐标。

增大x之后的数值,文字会右移;减小x之后的数值,文字会左移。同样,增大y之后的数值,文字会下移;减小y之后的数值,文字会上移。

点击色块

红色
绿色
蓝色
<section class="_135editor" data-tools="色彩" data-id="95951" >
    <section style="margin:10px auto;">
        <section style="display:flex;justify-content: center;align-items: center;margin-top:10px;">
            <section style="width:100%;" data-width="100%">
                <section class="135brush" data-brushtype="text" style="width:100%;height: 105px;background:#ed0000;text-align: center;font-size:20px;line-height:105px;color:#fff;" data-width="100%">
                    红色
                </section>
                <section style="box-sizing: border-box;margin-top: -105px;height: 105px;">
                    <section style="width:100%;height: 100%;box-sizing: border-box;" data-width="100%">
                        <svg class="svg-layout-content root-svg" width="1" height="100%" xmlns="http://www.w3.org/2000/svg" style="box-sizing: border-box;width: 95%;transform: rotateZ(0deg);-webkit-transform: rotateZ(0deg);-moz-transform: rotateZ(0deg);-o-transform: rotateZ(0deg);" opacity="1" data-width="95%">
                            <animate class="init-width-animation" attributename="width" style="box-sizing: border-box;" fill="freeze" to="100%" from="100%" begin="0s" duration="0.01"></animate>
                            <animate attributename="width" style="box-sizing: border-box;" fill="freeze" to="0" from="1" duration="0.01" begin="click + 0.1s"></animate>
                            <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" style="box-sizing: border-box;">
                                <svg class="rect-content" width="100%" height="100%" style="box-sizing: border-box;">
                                    <rect width="100%" height="100%" style="box-sizing: border-box;opacity: 1;fill: #ed0000;" x="0%"></rect>
                                </svg>
                                <svg style="width: 100%;height: 100%;box-sizing: border-box;" version="1.1" xmlns="http://www.w3.org/2000/svg" data-width="100%"></svg>
                            </svg>
                            <animate attributename="opacity" style="box-sizing: border-box;" fill="freeze" dur="0.1" begin="click" from="1" to="0"></animate>
                        </svg>
                    </section>
                </section>
            </section>
            <section style="width:100%;margin-left:10px;" data-width="100%">
                <section class="135brush" data-brushtype="text" style="width:100%;height: 105px;background:#00b050;text-align: center;font-size:20px;line-height:105px;color:#fff;" data-width="100%">
                    绿色
                </section>
                <section style="box-sizing: border-box;margin-top: -105px;height: 105px;">
                    <section style="width:100%;height: 100%;box-sizing: border-box;" data-width="100%">
                        <svg class="svg-layout-content root-svg" width="1" height="100%" xmlns="http://www.w3.org/2000/svg" style="box-sizing: border-box;width: 95%;transform: rotateZ(0deg);-webkit-transform: rotateZ(0deg);-moz-transform: rotateZ(0deg);-o-transform: rotateZ(0deg);" opacity="1" data-width="95%">
                            <animate class="init-width-animation" attributename="width" style="box-sizing: border-box;" fill="freeze" to="100%" from="100%" begin="0s" duration="0.01"></animate>
                            <animate attributename="width" style="box-sizing: border-box;" fill="freeze" to="0" from="1" duration="0.01" begin="click + 0.1s"></animate>
                            <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" style="box-sizing: border-box;">
                                <svg class="rect-content" width="100%" height="100%" style="box-sizing: border-box;">
                                    <rect width="100%" height="100%" style="box-sizing: border-box;opacity: 1;fill: #00b050;" x="0%"></rect>
                                </svg>
                                <svg style="width: 100%;height: 100%;box-sizing: border-box;" version="1.1" xmlns="http://www.w3.org/2000/svg" data-width="100%"></svg>
                            </svg>
                            <animate attributename="opacity" style="box-sizing: border-box;" fill="freeze" dur="0.1" begin="click" from="1" to="0"></animate>
                        </svg>
                    </section>
                </section>
            </section>
            <section style="width:100%;margin-left:10px;" data-width="100%">
                <section class="135brush" data-brushtype="text" style="width:100%;height: 105px;background:#548dd4;text-align: center;font-size:20px;line-height:105px;color:#fff;" data-width="100%">
                    蓝色
                </section>
                <section style="box-sizing: border-box;margin-top: -105px;height: 105px;">
                    <section style="width:100%;height: 100%;box-sizing: border-box;" data-width="100%">
                        <svg class="svg-layout-content root-svg" width="1" height="100%" xmlns="http://www.w3.org/2000/svg" style="box-sizing: border-box;width: 95%;transform: rotateZ(0deg);-webkit-transform: rotateZ(0deg);-moz-transform: rotateZ(0deg);-o-transform: rotateZ(0deg);" opacity="1" data-width="95%">
                            <animate class="init-width-animation" attributename="width" style="box-sizing: border-box;" fill="freeze" to="100%" from="100%" begin="0s" duration="0.01"></animate>
                            <animate attributename="width" style="box-sizing: border-box;" fill="freeze" to="0" from="1" duration="0.01" begin="click + 0.1s"></animate>
                            <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" style="box-sizing: border-box;">
                                <svg class="rect-content" width="100%" height="100%" style="box-sizing: border-box;">
                                    <rect width="100%" height="100%" style="box-sizing: border-box;opacity: 1;fill: #548dd4;" x="0%"></rect>
                                </svg>
                                <svg style="width: 100%;height: 100%;box-sizing: border-box;" version="1.1" xmlns="http://www.w3.org/2000/svg" data-width="100%"></svg>
                            </svg>
                            <animate attributename="opacity" style="box-sizing: border-box;" fill="freeze" dur="0.1" begin="click" from="1" to="0"></animate>
                        </svg>
                    </section>
                </section>
            </section>
        </section>
    </section>
</section>

样式就是点击之后会显示文字,可以用来制作问答功能。

1、复制下面代码,粘贴到微信编辑器的html模式下。

2、找到文字部分,替换成要制作的内容。

3、找到对应的颜色代码,如#加颜色代码位置,替换成所需要的颜色即可。

4、返回微信编辑器常规模式。

全局背景

全局背景可以将页面整体美化一下,给微信公众号文章选择对应的配色风格,是很有必要的。

展示样式如下:


1、复制下面的代码,先粘贴在空白微信编辑器的html模式下。

2、来这里选择,所需要的风格的背景图。

3、将选中的背景图上传到微信公众号,获取图片链接。

4、将下面代码里面的图片链接替换成刚才上传的链接即可。

<section class="addbg1" style="background-image:url(http://yejiuqiu.cn/wp-content/uploads/0.png);background-color:rgba(255, 255, 255, 0);background-repeat:repeat;background-size:50%;padding:1rem 0;box-sizing: border-box;overflow: hidden;">
    <p>
        <br/>
    </p>
</section>

5、编辑器返回普通模式,正常输入内容即可。