欢迎光临散文网 会员登陆 & 注册

SVG排版公众号文章〖点击翻页效果〗模板代码

2021-09-03 17:57 作者:懂点君  | 我要投稿

模板效果

功能分析

  1. 通过skewY向下倾斜,模拟翻书的动作,再用scale水平缩小模块和配合opacity淡出效果,模拟翻页过程的效果;

  2. 翻页时,内层会向下倾斜25度,因此外层的高度需大于内层的高度,否则内容会被遮挡;

  3. 触发区域点击之后,需要设置隐藏(visibility)以及移出可见区域(transform),防止点击翻页时影响其他模块(<set attributeName="visibility" to="hidden" begin="click" dur="0.0001s"></set>);

模板代码


SVG排版公众号文章〖点击翻页效果〗模板代码的评论 (共 条)

分享到微博请遵守国家法律