倒計時 css 是一種常用的技術,用于實現網頁上倒計時的效果。如果你想在自己的網頁上添加這個功能,下面的代碼將為你提供幫助。
html { font-size: 16px; } .countdown { font-size: 2rem; } .timer { width: 8rem; height: 8rem; border: 1px solid #eee; border-radius: 50%; display: flex; justify-content: center; align-items: center; font-size: 4rem; } .timer span { position: relative; } .timer:before, .timer:after { content: ""; position: absolute; width: 0.6rem; height: 2rem; background-color: #ccc; } .timer:before { left: 2rem; } .timer:after { right: 2rem; } .timer span:before, .timer span:after { content: ""; background-color: #ccc; position: absolute; width: 0.6rem; height: 0.6rem; border-radius: 50%; top: 2rem; } .timer span:before { left: 2rem; } .timer span:after { right: 2rem; } @media only screen and (max-width: 600px) { .timer { width: 6rem; height: 6rem; font-size: 2.5rem; } .countdown { font-size: 1.6rem; } .timer:before, .timer:after { width: 0.4rem; height: 1.5rem; } .timer span:before, .timer span:after { width: 0.4rem; height: 0.4rem; top: 1.5rem; } }
以上代碼使用了 CSS 的 flexbox 功能來居中顯示倒計時。為了使倒計時更加美觀,這段代碼還添加了許多細節設計。如果你想要更多的自定義功能,可以根據自己的需求進行修改。