<sub id="17nj5"><progress id="17nj5"></progress></sub><th id="17nj5"><progress id="17nj5"><nobr id="17nj5"></nobr></progress></th>

    <sub id="17nj5"></sub>
    <sub id="17nj5"></sub>

    <progress id="17nj5"><rp id="17nj5"><big id="17nj5"></big></rp></progress>

        <track id="17nj5"></track>

        微信公众号弹幕的HTML5和SVG代码

        2016-02-24 14:04:39来源£ºJZ多?#25945;?#35299;决方案作者£º

        通过在微信HTML代码中引入svg标签£¬我们可以使用基于svg的代码原理脱离CSS和JavaScript以及GIF图片制作动画¡£在图文中可以简单理解成不用绘图工具也能画图做动画£¬超链接£¬甚至更多玩法¡£通过SVG也可以获得极快速的加载速度¡£

        通过在微信HTML代码中引入svg标签£¬我们可以使用基于svg的代码原理脱离CSS和JavaScript以及GIF图片制作动画¡£在图文中可以简单理解成不用绘图工具也能画图做动画£¬超链接£¬甚至更多玩法¡£通过SVG也可以获得极快速的加载速度¡£下面?#26131;?#32467;了图文中可使用的SVG效果及具体应用¡£

        1¡¢弹幕效果

        \

        代码£º

        <svg width="100%" height="25" xmlns="http://www.w3.org/2000/svg">
            <g>
                <text font-family="microsoft yahei,sans-serif" font-size="20" y="20" x="100%" fill="#898989">
                    前方高能٩(。•́‿•̀。)۶
                <animate attributename="x" from="100%" to="-200" begin="0s" dur="3s" repeatcount="indefinite"></animate>
                </text>
            </g>
        </svg>

        2¡¢旋转效果

        \

        代码£º

        <svg width="400" height="400" xmlns="http://www.w3.org/2000/svg" style="box-sizing:border-box" >
            <g transform="roatate(262.54 180 180)" style="box-sizing:border-box">
                <text font-family="microsoft yahei,sans-serif" font-size="30" y="160" x="160" style="box-sizing:border-box">
                    旋转木马
                <animate attributename="transform" begin="0s" dur="10s" type="rotate" from="0 180 180" to="360 180 180" repeatcount="indefinite" style="box-sizing:border-box"></animate>
                </text>
            </g>
        </svg>

        3¡¢改变透明度效果

        \

        代码£º

        <center>
            <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
                <text x="35%" y="20" fill="#898989" font-family="microsoft yahei,sans-serif" font-weight="bold" font-size="14">
                    前方还有高能£¡£¡            <animate attributename="opacity" from="1" to="0" begin="0s" dur="1.2s" repeatcount="indefinite"></animate>
                </text>
                <text x="35%" y="40" fill="#767676" font-family="microsoft yahei,sans-serif" font-weight="bold" font-size="14">
                    前方还有高能£¡£¡            <animate attributename="opacity" from="1" to="0" begin="0.2s" dur="1.2s" repeatcount="indefinite"></animate>
                </text>
                <text x="35%" y="60" fill="#646464" font-family="microsoft yahei,sans-serif" font-weight="bold" font-size="14">
                    前方还有高能£¡£¡            <animate attributename="opacity" from="1" to="0" begin="0.4s" dur="1.2s" repeatcount="indefinite"></animate>
                </text>
                <text x="35%" y="80" fill="#333333" font-family="microsoft yahei,sans-serif" font-weight="bold" font-size="14">
                    前方还有高能£¡£¡            <animate attributename="opacity" from="1" to="0" begin="0.6s" dur="1.2s" repeatcount="indefinite"></animate>
                </text>
                <text x="35%" y="100" fill="#000000" font-family="microsoft yahei,sans-serif" font-weight="bold" font-size="14">
                    前方还有高能£¡£¡            <animate attributename="opacity" from="1" to="0" begin="0.8s" dur="1.2s" repeatcount="indefinite"></animate>
                </text>
            </svg>
        </center>

        4¡¢超链接弹幕效果

        \

        代码£º

        <svg width="100%" height="35" xmlns="http://www.w3.org/2000/svg">
            <g>
                <a xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="http://mp.weixin.qq.com/s?__biz=MjM5NDA2MTM2MQ==&mid=401612109&idx=2&sn=c40aed3ccaf21ea917385c034e8c458a#rd" target="_blank"><text font-family="microsoft yahei,sans-serif" font-size="20" y="28" x="100%" fill="#c00000" font-weight="bold">
                    狂点我获得H5杀手大礼包£¡£¡£¡            <animate attributename="x" from="100%" to="-200" begin="0s" dur="4s" repeatcount="indefinite"></animate>
                </text></a>
            </g></svg>

        5¡¢绘图+渐隐 效果

        \

        代码£º

        <svg width="100%" height="100" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" style="box-sizing: border-box;">
            <path d="M12 21.35l-1.45-1.32c-5.15-4.67-8.55-7.75-8.55-11.53 0-3.08 2.42-5.5 5.5-5.5 1.74 0 3.41.81 4.5 2.09 1.09-1.28 2.76-2.09 4.5-2.09 3.08 0 5.5 2.42 5.5 5.5 0 3.78-3.4 6.86-8.55 11.54l-1.45 1.31z" style="fill: rgb(206, 30, 0); box-sizing: border-box;">
                <animate attributetype="CSS" attributename="opacity" from="1" to="0" dur="4s" repeatcount="indefinite" style="box-sizing: border-box;"></animate>
            </path>
        </svg>

        6¡¢文字沿路径移动效果

        \

        代码£º

        <svg width="100%" height="300" xmlns="http://www.w3.org/2000/svg">
            <text font-family="microsoft yahei,sans-serif" font-size="14" x="-60" y="0" fill="#c00000" font-weight="bold">
                跟着?#26131;?#25163;右手一个慢动作        <animatemotion path="M150 0 L75 200 L225 200 Z" begin="0s" dur="5s" repeatcount="indefinite"></animatemotion>
            </text>
        </svg>

        7¡¢进阶玩法?#21644;?#29255;背景的弹幕效果

        £¨SVG+HTML+GIF结合运用£©

        \

        代码£º

        <img src="http://mmbiz.qpic.cn/mmbiz/9x9BHGwhNttorNw4jDA3EqstTv50RQZSUic0mHk1fNYlHYSsMA4h1DuLwYwia4d3u27Thhpx4EyyAr5mK4QFX1DA/0?wx_fmt=gif"/>
        <svg width="100%" height="200" xmlns="http://www.w3.org/2000/svg" style="margin-top: -160px;">
            <text font-family="microsoft yahei,sans-serif" font-size="18" y="20" x="5%" fill="#c00000" font-weight="bold">
              报名H5杀手训练营£¬系统学习SVG应用         <animate attributename="opacity" from="1" to="0" begin="0.8s" dur="5s" repeatcount="indefinite"></animate>
            </text>
            <text font-family="microsoft yahei,sans-serif" font-size="14" y="20" x="100%" fill="#ffffff" font-weight="bold">
                SVG代码哪里学£¿        <animate attributename="x" from="800" to="-400" begin="0s" dur="5.5s" repeatcount="indefinite"></animate>
            </text>
            <text font-family="microsoft yahei,sans-serif" font-size="14" y="34" x="100%" fill="#ffffff" font-weight="bold">
                我好想学SVG£¡£¡£¡        <animate attributename="x" from="800" to="-400" begin="0s" dur="5.5s" repeatcount="indefinite"></animate>
            </text>
            <text font-family="microsoft yahei,sans-serif" font-size="14" y="49" x="100%" fill="#ffffff" font-weight="bold">
                我好想学SVG£¡£¡£¡        <animate attributename="x" from="800" to="-400" begin="0s" dur="5.5s" repeatcount="indefinite"></animate>
            </text>
            <text font-family="microsoft yahei,sans-serif" font-size="14" y="28" x="100%" fill="#ffffff" font-weight="bold">
                听说H5杀手训练营可以学SVG        <animate attributename="x" from="800" to="-400" begin="0.8s" dur="5.5s" repeatcount="indefinite"></animate>
            </text>
            <text font-family="microsoft yahei,sans-serif" font-size="14" y="110" x="24%" fill="#ffffff" font-weight="bold">
                听说H5杀手训练营可以学SVG        <animate attributename="opacity" from="1" to="0" begin="1.6s" dur="1s" repeatcount="indefinite"></animate>
            </text>
            <text font-family="microsoft yahei,sans-serif" font-size="14" y="130" x="24%" fill="#ffffff" font-weight="bold">
                听说H5杀手训练营可以学SVG        <animate attributename="opacity" from="1" to="0" begin="1.2s" dur="1s" repeatcount="indefinite"></animate>
            </text>
            <text font-family="microsoft yahei,sans-serif" font-size="14" y="150" x="24%" fill="#ffffff" font-weight="bold">
                听说H5杀手训练营可以学SVG        <animate attributename="opacity" from="1" to="0" begin="0.8s" dur="1s" repeatcount="indefinite"></animate>
            </text>
        </svg>

        7¡¢一个小结

        SVG就像CSS和HTML一样£¬是一个听起来很高大上£¬但实际上远没有多么复杂的一个名词¡£甚至只要你4级通过£¬几分钟就可以完全理解代码的含义¡£困难的地方在于怎么样使用SVG更有趣£¬SVG和CSS到?#23376;?#22810;少花样结合玩法£¿我们抛砖引玉£¬欢迎你继续钻?#23567;?br />  

        赞助商链接:

        2018ÌØÂëÉúФ±í
        <sub id="17nj5"><progress id="17nj5"></progress></sub><th id="17nj5"><progress id="17nj5"><nobr id="17nj5"></nobr></progress></th>

          <sub id="17nj5"></sub>
          <sub id="17nj5"></sub>

          <progress id="17nj5"><rp id="17nj5"><big id="17nj5"></big></rp></progress>

              <track id="17nj5"></track>
              <sub id="17nj5"><progress id="17nj5"></progress></sub><th id="17nj5"><progress id="17nj5"><nobr id="17nj5"></nobr></progress></th>

                <sub id="17nj5"></sub>
                <sub id="17nj5"></sub>

                <progress id="17nj5"><rp id="17nj5"><big id="17nj5"></big></rp></progress>

                    <track id="17nj5"></track>