|
关于微信弹幕特效，
学无止境！
通过在微信HTML代码中引入svg标签，我们可以使用基于svg的代码原理脱离CSS和JavaScript以及GIF图片制作动画。在图文中可以简单理解成不用绘图工具也能画图做动画，超链接，甚至更多玩法。通过SVG也可以获得极快速的加载速度。下面我总结了图文中可使用的SVG效果及具体应用。
● ● ●
1丨弹幕效果 ▼
-代码一览-
svg width='100%' height='25' xmlns='http://www./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' >'http://www./2000/svg' > g transform='roatate(115.732 180 180)' > 'microsoft yahei' font-size='30' y='160' x='160'> 旋转木马
text>
animatetransform attributename='transform' begin='0s' dur='10s' type='rotate' from='0 180 180' to='360 180 180' repeatcount='indefinite'>animatetransform> g>
svg>
● ● ●
3丨改变透明度 ▼
-代码一览-
center> svg xmlns='http://www./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' >'http://www./2000/svg'> g> a xmlns:xlink='http://wap./v2/feature/19jwtjs56' 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绘制的图形加载飞快 ▼
-代码一览-
svg width='100%' height='100' xmlns='http://www./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./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='https://img./upload_files/2016/03/25/Fvdzpu-c35vr0johox2l4IkWoFoh.gif'/>
svg width='100%' height='200' xmlns='http://www./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到底有多少花样结合玩法？我们抛砖引玉，欢迎你继续钻研，当然你也可以报名我们H5杀手训练营的课程，27号将为你讲述SVG在微信图文中的极限应用。
最后别忘了点击案例3的案例文字能获得H5杀手大礼包哦！
▼扫一扫加入课程▼
设计、培训、运营等合作请致电
TEL：（021）3721 8818
|
