CSS3提供了豐富的數字效果,讓數字展示更加生動和有趣。下面我們來看幾個實例:
/* 圓形計數器 */ .count { width: 80px; height: 80px; border-radius: 50%; background-color: #4CAF50; color: white; text-align: center; font-size: 30px; line-height: 80px; counter-reset: numbers; } .count::before { content: counter(numbers); counter-increment: numbers; } /* 豎直翻轉數字 */ .flip { perspective: 1000px; } .flip .front, .flip .back { position: absolute; top: 0; left: 0; width: 100%; height: 100%; backface-visibility: hidden; } .flip .back { transform: rotateX(180deg); } .flip:hover .front { transform: rotateX(180deg); } .flip:hover .back { transform: rotateX(0deg); } /* 數字滾動 */ .rolling { overflow: hidden; white-space: nowrap; } .rolling span { animation: scroll 1s infinite linear; display: inline-block; padding-right: 20px; } @keyframes scroll { 0% { transform: translateX(0); } 100% { transform: translateX(-100%); } }
以上是三個常用的數字效果,需要注意的是,CSS3數字效果在不同瀏覽器中可能存在兼容性問題,應盡量使用經典的數字展示方式,確保頁面穩定。