<track id="xxzxz"></track>

    <pre id="xxzxz"><ruby id="xxzxz"></ruby></pre>

      <address id="xxzxz"><pre id="xxzxz"><span id="xxzxz"></span></pre></address>

      <noframes id="xxzxz">
      <pre id="xxzxz"><pre id="xxzxz"></pre></pre>

          <track id="xxzxz"></track>

            微信公眾號彈幕的HTML5和SVG代碼

            2016-02-24 14:04:39來源:JZ多媒體解決方案作者:

            通過在微信HTML代碼中引入svg標簽,我們可以使用基于svg的代碼原理脫離CSS和JavaScript以及GIF圖片制作動畫。在圖文中可以簡單理解成不用繪圖工具也能畫圖做動畫,超鏈接,甚至更多玩法。通過SVG也可以獲得極快速的加載速度。

            通過在微信HTML代碼中引入svg標簽,我們可以使用基于svg的代碼原理脫離CSS和JavaScript以及GIF圖片制作動畫。在圖文中可以簡單理解成不用繪圖工具也能畫圖做動畫,超鏈接,甚至更多玩法。通過SVG也可以獲得極快速的加載速度。下面我總結了圖文中可使用的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">
                    跟著我左手右手一個慢動作        <animatemotion path="M150 0 L75 200 L225 200 Z" begin="0s" dur="5s" repeatcount="indefinite"></animatemotion>
                </text>
            </svg>

            7、進階玩法:圖片背景的彈幕效果

            (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到底有多少花樣結合玩法?我們拋磚引玉,歡迎你繼續鉆研。
             

            果冻传媒剧情张芸熙百度网盘,污娱社,人妻绿帽yin乱

            <track id="xxzxz"></track>

              <pre id="xxzxz"><ruby id="xxzxz"></ruby></pre>

                <address id="xxzxz"><pre id="xxzxz"><span id="xxzxz"></span></pre></address>

                <noframes id="xxzxz">
                <pre id="xxzxz"><pre id="xxzxz"></pre></pre>

                    <track id="xxzxz"></track>