在網站設計中，頁面翻頁效果是非常重要的。而時鐘翻頁效果也是一種非常受歡迎的效果。這種效果可以通過CSS實現。 接下來我們來看一下如何使用CSS來實現時鐘翻頁效果：

.clock {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
font-size: 5rem;
font-weight: bold;
}
.clock .num {
width: 100px;
height: 120px;
display: flex;
justify-content: center;
align-items: center;
position: relative;
overflow: hidden;
}
.clock .num .top, .clock .num .bottom {
position: absolute;
width: 100%;
height: 100%;
transition: transform 1s ease-in-out;
}
.clock .num .top {
z-index: 1;
transform-origin: bottom;
}
.clock .num .bottom {
transform-origin: top;
color: rgba(255, 255, 255, 0.7);
}
.clock .num.active .top {
transform: translate(0, -100%);
}
.clock .num.active .bottom {
transform: translate(0, 0);
}

在CSS中，我們通過創建一個包含數字的div，并使用flexbox將數字居中。我們將數字分成兩個部分，頂部（實際顯示數字的部分）和底部（用于實現翻頁效果的部分）。 我們使用了transform屬性來實現底部數字向上翻頁并露出一半頂部數字的效果。 通過在不同的數字之間切換active類來實現數字的翻頁。

以上就是使用CSS實現時鐘翻頁效果的方法。通過這種方式，我們可以在網站設計中使用炫酷的翻頁效果來吸引用戶的注意力。