秒表翻頁(yè)切換效果是一種非常常見(jiàn)的網(wǎng)頁(yè)設(shè)計(jì)，它可以讓用戶更好地了解某個(gè)事件或計(jì)時(shí)器的進(jìn)度。在今天的文章中，我們將介紹一種使用CSS實(shí)現(xiàn)秒表翻頁(yè)切換效果的方法。

.timer{
display: inline-block;
font-size: 40px;
font-weight: bold;
margin: 0 10px;
position: relative;
}
.timer:before,
.timer:after{
content: '';
display: block;
height: 100%;
position: absolute;
top: 0;
width: 100%;
z-index: -1;
}
.timer:before{
background-color: #999;
}
.timer:after{
background-color: #ccc;
transform: scaleX(0);
}
.timer.active:before{
background-color: #fff;
}
.timer.active:after{
transition: transform 1s ease;
transform: scaleX(1);
}

以上代碼使用了:before和:after偽元素來(lái)實(shí)現(xiàn)秒表翻頁(yè)切換效果。在樣式中，我們?yōu)?timer添加了一個(gè):before和一個(gè):after，這兩個(gè)偽元素的位置都是絕對(duì)定位，并且寬高都是100%。

:before偽元素的背景顏色為#999，這是默認(rèn)的狀態(tài)背景顏色。而:after偽元素的背景顏色為#ccc，我們將通過(guò)transform: scaleX(0)來(lái)使它默認(rèn)不可見(jiàn)。

在.timer元素上添加.active類(lèi)，可以啟動(dòng)秒表翻頁(yè)切換效果。在.active狀態(tài)下，我們會(huì)將:before偽元素的背景色修改為#fff，這樣可以讓字體更加醒目。而:after偽元素的transform屬性將被修改為transform: scaleX(1)，這樣就可以使得它的寬度從0慢慢變?yōu)?00%，實(shí)現(xiàn)秒表翻頁(yè)切換的效果。

以上便是使用CSS實(shí)現(xiàn)秒表翻頁(yè)切換效果的方法。我們可以在需要的地方添加.timer元素并動(dòng)態(tài)修改它的.active屬性，以實(shí)現(xiàn)秒表翻頁(yè)切換效果。