CSS代碼網頁關閉倒計時是一個非常實用的功能,使用CSS可以讓用戶在關閉網頁之前進行提示,以免造成信息丟失或誤操作。下面介紹一下如何使用CSS實現網頁關閉倒計時的效果。
/* 1秒鐘倒計時 */ @keyframes countDown { from { opacity: 1; } to { opacity: 0; } } /* 關閉按鈕樣式 */ button { position: absolute; top: 10px; right: 10px; background-color: #f00; color: #fff; border: none; outline: none; padding: 10px 20px; font-size: 16px; cursor: pointer; } /* 倒計時提示樣式 */ .count-down-text { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; font-size: 24px; color: #f00; animation: countDown 1s linear forwards; }
首先我們需要使用CSS的關鍵幀動畫(@keyframes)實現倒計時效果。下面的代碼中,定義了從100%透明度到0%透明度的動畫:
@keyframes countDown { from { opacity: 1; } to { opacity: 0; } }
接下來,我們需要為關閉按鈕添加樣式。這里我們定義了按鈕的位置、背景色、字體顏色、邊框和鼠標樣式:
button { position: absolute; top: 10px; right: 10px; background-color: #f00; color: #fff; border: none; outline: none; padding: 10px 20px; font-size: 16px; cursor: pointer; }
最后,我們需要為倒計時提示添加樣式。這里我們定義了提示的位置、字體樣式、字體顏色和動畫效果:
.count-down-text { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; font-size: 24px; color: #f00; animation: countDown 1s linear forwards; }
使用上述的CSS代碼,我們就可以為所有網頁添加關閉倒計時的效果了。這樣用戶在關閉網頁時就會看到一個提示,以免造成信息丟失或誤操作。
下一篇css代碼的書