先上效果圖：（樣式有點丑，可以忽略一下下，效果出來了就好，后期加到其他項目中方便更改0.0）

類似翻書效果，原本的意思是使用JS來控制的，點擊一次之后使用setInterval去控制書頁翻過去的動畫，當書頁翻轉180°之后，清除掉setInterval，但當我連續點擊，那之前沒有翻轉180°的書頁將無法繼續完成之前的動作，可以用清除setInterval的方式，但總感覺動畫效果不好，當然還有其他解決辦法，但突然想到，CSS3為我們提供了animation，我們為什么不去使用使用呢，只要為加上animation動畫就可以直接避免這個問題，animation動畫默認是每次都執行完動畫，所以，當出現連點的時候，就會像圖中看到的那樣，每一頁都自然翻頁，下面貼上代碼，及實現步驟：
注：本實例JS部分均以原生JS編寫，不善用原生JS的，可用jQuery等對三方框架改寫
html部分：（這部分真心·····，算了，丑就丑點吧~.~）

發表評論 共有條評論 用戶名: 密碼: 驗證碼: 匿名發表