大屏展示典型案例,SVG+CANVAS动画效果,flexible响应式尺寸
作者:admin 日期:2021-03-24演示在此: http://258754.cn/2020/ehs/canvas_and_svg.html
技术要点:
- 异形边框,自适应尺寸。已经做成了VUE标准组件。边框的宽、高可以使用px,也可以使用rem。
- 边框SVG+MASK+路径动画,底部CANVAS动画。
- flexible.js,每个块的宽、高,会根据整个页面的宽度自适应变化 。
SVG异形边框及路径动画+CSS动画演示
作者:admin 日期:2021-03-19演示地址:
http://blog.258754.cn/2021/vue_svg_tweenmax_demo/index.html
- 根据窗体的width/height参数,自动计算生成SVG的path路径
- tweenmax+MorphSVGPlugin生成小光点绕路径环游的动画,tweenmax的CSS动画生成右下角的色彩变化
- VUE组件化,方便复用