全国服务热线:4008-888-888

公司新闻

手机微信微信公众号视频弹幕的HTML5和SVG编码

:39:

根据在手机微信HTML编码中引进svg标识,大家可使用根据svg的编码基本原理摆脱CSS和JavaScript及其GIF照片制作动漫。在文图中能够简易了解成无需制图专用工具也可以绘图做动漫,超级链接接,乃至大量游戏玩法。根据SVG还可以得到极迅速的载入速率。


根据在手机微信HTML编码中引进svg标识,大家可使用根据svg的编码基本原理摆脱CSS和JavaScript及其GIF照片制作动漫。在文图中能够简易了解成无需制图专用工具也可以绘图做动漫,超级链接接,乃至大量游戏玩法。根据SVG还可以得到极迅速的载入速率。下边我小结了文图中可让用的SVG实际效果及实际运用。

1、视频弹幕实际效果

\

编码:

svg width= 100% height= 25 xmlns= 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= 2000/svg >   g transform= roatate(262.54 180 180) >   text font-family= microsoft yahei,sans-serif font-size= 30 y= 160 x= 160 >   转动木马病毒
  animate attributename= transform begin= 0s dur= 10s type= rotate from= 0 180 180 to= 360 180 180 repeatcount= indefinite >   /text
  /g
/svg

3、更改全透明度实际效果

\

编码:

center
  svg xmlns= 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= 2000/svg
  g
  a xmlns:xlink= 1999/xlink xlink:href= s?__biz=MjM5NDA2MTM2MQ== mid= idx=2 af21ea917385c034e8c458a#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= 2000/svg viewbox= 0 0 24 24 >   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 >   animate attributetype= CSS attributename= opacity from= 1 to= 0 dur= 4s repeatcount= indefinite >   /path
/svg

6、文本沿线径移动画特效果

\

编码:

svg width= 100% height= 300 xmlns= 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= mmbiz/9x9BHGwhNttorNw4jDA3EqstTv50RQZSUic0MHk1fNYlHYSsMA4h1DuLwYwia4d3u27Thhpx4EyyAr5mK4QFX1DA/0?wx_fmt=gif /
svg width= 100% height= 200 xmlns= 2000/svg >   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一样,是一个听起來很伟岸上,但具体上远沒有多么的繁杂的一个名词。乃至要是你四级根据,一些钟便可以彻底了解编码的含意。艰难的地区取决于如何样应用SVG更趣味,SVG和CSS究竟有是多少花式融合游戏玩法?大家毛遂自荐,热烈欢迎你再次刻苦钻研。
 

重要词:手机微信微信公众号视频弹幕SVG


在线客服

关闭

客户服务热线
4008-888-888


点击这里给我发消息 在线客服

点击这里给我发消息 在线客服