日本漫画推荐联盟

免费微信动画代码 看不懂没关系,复制黏贴就行

JZsolv 2019-07-17 15:28:16

这里是工作狂的聚集地

职场

学术

新媒体

设计

极客


请注意:本文汇总了最新图文顶级花式排版大法,文中效果均为 JZ 原创代码实现。我在案例后附代码方便大家学习交流,请勿用作其他用途。抄袭是无耻的行为,你说对吗?



点击五角星表示认同

(如点击后无动画请刷新后阅读)

           



扫码报名学习

图文花式排版大法

(课程含本文所有案例解读)








玩法1:阅后即焚


上海

带你从PS配图到动态二维码
从 CSS 排版到 SVG 微动画
誓要让你的     微信排版能力

上天

「 顶尖微信排版术 」

另含10G电子资源
与网易云课堂录像

三天时间,小白也能晋升排版大神




代码一览


<section label="Copyright 2016 jzplus All Rights Reserved." style="padding: 45px 0; margin: 0 1em; font:14px 微软雅黑,sans-serif; line-height: 1.75em; text-align: center;">
   <p style="font-weight: bold; font-size: 36px; margin-bottom: 40px; color: #C00000;">上海</p>
   <p>带你从PS配图到动态二维码<br/>从 CSS 排版到 SVG 微动画<br/>誓要让你的&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;微信排版能力</p>
   <p style="font-weight: bold; font-size: 36px; margin-top: 40px; color: #C00000;">上天</p>
   <p style="font-weight: bold; font-size: 24px; margin-bottom: 60px; margin-top: 80px; color: #C00000;">「 顶尖微信排版术 」</p>
   <p>另含10G电子资源<br/>与网易云课堂录像</p>
   <p style="font-weight: bold; margin-top: 60px; color: #C00000;">三天时间,小白也能晋升排版大神</p>
</section>

<svg width="375px" height="615px" style="margin: 0 auto; margin-top: -615px;">
   <rect width="375" height="12.3" style="fill:#ffffff;">
       <animate attributeName = "height" begin="9s" dur = "8000ms" fill = "freeze" to = "615"></animate>    </rect>
</svg>





玩法2:文字倒转

上海

带你从PS配图到动态二维码
从 CSS 排版到 SVG 微动画
誓要让你的     微信排版能力

上天

「 顶尖微信排版术 」

另含10G电子资源
与网易云课堂录像

三天时间,小白也能晋升排版大神



代码一览

<section label="Copyright 2016 jzplus All Rights Reserved." style="padding: 45px 0; margin: 0 1em; font:14px 微软雅黑,sans-serif; line-height: 1.75em; text-align: center;">
   <p style="font-weight: bold; font-size: 36px; margin-bottom: 40px; color: #C00000; -webkit-transform: rotate(180deg); transform: rotate(180deg);">上海</p>
   <p style="-webkit-transform: rotate(180deg); transform: rotate(180deg);">带你从PS配图到动态二维码<br/>从 CSS 排版到 SVG 微动画<br/>誓要让你的&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;微信排版能力</p>
   <p style="font-weight: bold; font-size: 36px; margin-top: 40px; color: #C00000; -webkit-transform: rotate(180deg); transform: rotate(180deg);">上天</p>
   <p style="font-weight: bold; font-size: 24px; margin-bottom: 60px; margin-top: 80px; color: #C00000; -webkit-transform: rotate(180deg); transform: rotate(180deg);">「 顶尖微信排版术 」</p>
   <p style="-webkit-transform: rotate(180deg); transform: rotate(180deg);">另含10G电子资源<br/>与网易云课堂录像</p><p style="font-weight: bold; margin-top: 60px; color: #C00000;-webkit-transform: rotate(180deg); transform: rotate(180deg);">三天时间,小白也能晋升排版大神</p>
</section>





玩法3:文字隐藏

(点击下方空白显示)


上海

带你从PS配图到动态二维码
从 CSS 排版到 SVG 微动画
誓要让你的     微信排版能力

上天

「 顶尖微信排版术 」

另含10G电子资源
与网易云课堂录像

三天时间,小白也能晋升排版大神



代码一览

<section label="Copyright 2016 jzplus All Rights Reserved." style="padding: 45px 0; margin: 0 1em; font:14px 微软雅黑,sans-serif; line-height: 1.75em; text-align: center;">
   <p style="font-weight: bold; font-size: 36px; margin-bottom: 40px; color: #C00000;">上海</p>
   <p>带你从PS配图到动态二维码<br/>从 CSS 排版到 SVG 微动画<br/>誓要让你的&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;微信排版能力</p>
   <p style="font-weight: bold; font-size: 36px; margin-top: 40px; color: #C00000;">上天</p>
   <p style="font-weight: bold; font-size: 24px; margin-bottom: 60px; margin-top: 80px; color: #C00000;">「 顶尖微信排版术 」</p>
   <p>另含10G电子资源<br/>与网易云课堂录像</p>    <p style="font-weight: bold; margin-top: 60px; color: #C00000;">三天时间,小白也能晋升排版大神</p>
</section>

<svg width="100%" height="596px" style="margin-top: -596px">
   <rect width="100%" height="596px" style="fill:rgb(255,255,255); stroke:none;">
       <animate attributeName="opacity" values="1;0;1" begin="touchstart" dur="3s" repeatCount="1"></animate>
   </rect>
</svg>





玩法4:立体质感


上海

带你从PS配图到动态二维码

从 CSS 排版到 SVG 微动画

誓要让你的     微信排版能力

上天

「 顶尖微信排版术 」

另含10G电子资源

与网易云课堂录像

三天时间,小白也能晋升排版大神



代码一览

<section label="Copyright 2016 jzplus All Rights Reserved." style="background:#d5d5d5; padding: 45px 0; margin: 0 1em; font:14px 微软雅黑,sans-serif; color:#FFFFFF;
   text-shadow: 0 1px 0 #ccc,
   0 2px 0 #c9c9c9,      0 3px 0 #bbb,      0 4px 0 #b9b9b9,      0 5px 0 #aaa,      0 6px 1px rgba(0,0,0,.1),    0 0 5px rgba(0,0,0,.1),    0 1px 3px rgba(0,0,0,.3),    0 3px 5px rgba(0,0,0,.2),    0 5px 10px rgba(0,0,0,.25),    0 10px 10px rgba(0,0,0,.2),    0 20px 20px rgba(0,0,0,.15);    text-align: center;    line-height: 1.5em;"
>
   <p style="font-weight: bold; font-size: 36px; margin-bottom: 40px;">上海</p>
<section style="
   text-shadow: 0 1px 0 #ccc,      0 2px 0 #c9c9c9,      0 3px 0 #bbb,      0 4px 0 #b9b9b9,      0 5px 0 #aaa,      0 6px 1px rgba(0,0,0,.1),    0 0 5px rgba(0,0,0,.1),    0 1px 3px rgba(0,0,0,.3),    0 3px 5px rgba(0,0,0,.2),    0 5px 10px rgba(0,0,0,.25),    0 10px 10px rgba(0,0,0,.2),    0 20px 20px rgba(0,0,0,.15);"
>
   <p>带你从PS配图到动态二维码</p>
   <p>从 CSS 排版到 SVG 微动画</p>
   <p>誓要让你的&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;微信排版能力</p>
</section>
<p style="font-weight: bold; font-size: 36px; margin-top: 40px;">上天</p>
<p style="font-weight: bold; font-size: 24px; margin-bottom: 60px; margin-top: 80px;">「 顶尖微信排版术 」</p>
<section style="
   text-shadow: 0 1px 0 #ccc,      0 2px 0 #c9c9c9,      0 3px 0 #bbb,    0 4px 0 #b9b9b9,    0 5px 0 #aaa,    0 6px 1px rgba(0,0,0,.1),    0 0 5px rgba(0,0,0,.1),    0 1px 3px rgba(0,0,0,.3),    0 3px 5px rgba(0,0,0,.2),    0 5px 10px rgba(0,0,0,.25),    0 10px 10px rgba(0,0,0,.2),    0 20px 20px rgba(0,0,0,.15);"
>
   <p>另含10G电子资源</p>
   <p>与网易云课堂录像</p>
</section>
<p style="font-weight: bold; margin-top: 60px;">三天时间,小白也能晋升排版大神</p>
</section>





玩法5:科技风格


上海

带你从PS配图到动态二维码

从 CSS 排版到 SVG 微动画

誓要让你的     微信排版能力

上天

「 顶尖微信排版术 」

另含10G电子资源

与网易云课堂录像

三天时间,小白也能晋升排版大神



代码一览

<section label="Copyright 2016 jzplus All Rights Reserved." style="padding: 45px 0; margin: 0 1em; font:14px 微软雅黑,sans-serif; line-height: 1.75em; color: #fff; text-align: center; background-image: url(http://mmbiz.qpic.cn/mmbiz_gif/9x9BHGwhNts0icQicVOWzaIF10tb0CVEXoSc4YkKkiaTA9ebup8UsoUAAEnicelZB56ecmf5MOzQ92mHNWWSIbxH2g/0?wx_fmt=gif); background-repeat: repeat-y; background-position: center;">    <section style="padding: 40px 0; margin: 0 1em; background-color: rgba(0,0,0,.8); border: 1px solid #fff;">
        <p style="font-weight: bold; font-size: 36px; margin-bottom: 40px;">上海</p>
        <p>带你从PS配图到动态二维码</p>
        <p>从 CSS 排版到 SVG 微动画</p>
        <p>誓要让你的&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;微信排版能力</p>
        <p style="font-weight: bold; font-size: 36px; margin-top: 40px;">上天</p>
        <p style="font-weight: bold; font-size: 24px; margin-bottom: 60px; margin-top: 80px;">「 顶尖微信排版术 」</p>
        <p>另含10G电子资源</p>
        <p>与网易云课堂录像</p>
        <p style="font-weight: bold; margin-top: 60px;">三天时间,小白也能晋升排版大神</p>
    </section>
<
/section>





除了 JZ 不会再有公众号向你展示逆天排版的方法(还附源代码供学习),如果你想学习花式排版术,或者你不想止步于模仿和学习我们的排版,还想更进一步了解排版核心技法,欢迎你报名上海「 顶尖微信排版术 」。



三天时间,小白也能晋升排版大神








报名请扫






Copyright © 日本漫画推荐联盟@2017