SVG排版公眾號文章〖點擊翻頁效果〗模板代碼

模板效果

功能分析
通過skewY向下傾斜,模擬翻書的動作,再用scale水平縮小模塊和配合opacity淡出效果,模擬翻頁過程的效果;
翻頁時,內層會向下傾斜25度,因此外層的高度需大于內層的高度,否則內容會被遮擋;
觸發(fā)區(qū)域點擊之后,需要設置隱藏(visibility)以及移出可見區(qū)域(transform),防止點擊翻頁時影響其他模塊(<set attributeName="visibility" to="hidden" begin="click" dur="0.0001s"></set>);
模板代碼
標簽: