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

模板效果

功能分析
通过skewY向下倾斜,模拟翻书的动作,再用scale水平缩小模块和配合opacity淡出效果,模拟翻页过程的效果;
翻页时,内层会向下倾斜25度,因此外层的高度需大于内层的高度,否则内容会被遮挡;
触发区域点击之后,需要设置隐藏(visibility)以及移出可见区域(transform),防止点击翻页时影响其他模块(<set attributeName="visibility" to="hidden" begin="click" dur="0.0001s"></set>);
模板代码