他的思路是利用偽類元素實現，這樣減少了html的結構
具體樣式如下：
/* 最外層樣式 */實現後的效果：.flip
/* 設定前後偽元素通用樣式 */
.flip .digital::before,
.flip .digital::after
/* 設定上部分位置和盒子圓角，新增中間間隔線 */
.flip .digital::before
/* 設定下部分位置和盒子圓角 */
.flip .digital::after
原先作者是給0-9的css樣式新增content，這裡我在html上新增了data-number屬性進行了改進，然後在css用了attr()可以引用，這樣減少了**量。關於attr的用法可以在mdn上查閱。
然後是新增動畫效果。
這裡我直接拿作者的圖來展示層級關係。
比如是向下翻，0到1， 那麼0的上部分層級要高於1的下部分
不設定z-index的話值預設為auto，和父級同層，所以可以不設定也可以。
/*向下翻*/給需要翻滾的偽元素新增層級，並且以上一張的中心為旋轉點，將下部分翻轉，perspective屬性我暫時還沒搞懂。.flip.down .front:before
.flip.down .back:after
然後新增動畫效果
.flip.down.go .front:before
.flip.down.go .back:after
@keyframes frontflipdown
100%
}@keyframes backflipdown
100%
}然後給#flip新增go的class，就可以看到向下翻頁的效果。
除了修改z-index也可以使用backface-visibility: hidden;來隱藏上半部紙片。
.flip.down.go .front:before新增js邏輯 view code
翻頁時鐘 隱私條款
本應用尊重並保護所有使用服務使用者的個人隱私權。為了給您提供更準確 更有個性化的服務，本應用會按照本隱私權政策的規定使用和披露您的個人資訊。但本應用將以高度的勤勉 審慎義務對待這些資訊。除本隱私權政策另有規定外，在未徵得您事先許可的情況下，本應用不會將這些資訊對外披露或向第三方提供。本應用會不時更新...
時鐘 滑動 翻頁 存在點迴圈
coding utf 8 import os from runner.common.runnerlog import runnerlog as logger class mytest testcasebase classmethod def setupclass cls 測試case模組初始化,作用...
翻頁效果的動畫實現
這篇文章是為在 的翻頁的實現的加入了一點點個人的優化，當然是在班門弄斧。本來應該把實現的 傳上來的，但是公司新出了規定。作了資訊保安處理,usb和上傳全作了限制，所有的 弄不出來，為把我的自動彈回的實現原理說一下。主要就是使用scroller 的彈回效果 首先重寫翻頁類的如下方法。public vo...