CSS小圓點的閃爍效果可以為網頁帶來一些活力和趣味。通過使用CSS動畫和關鍵幀,您可以輕松創建一個簡單但令人印象深刻的動效,使網頁更加生動有趣。
/* 創建一個小點 */ .dot { background-color: #fff; border-radius: 50%; height: 10px; width: 10px; } /* 定義一個Keyframes動畫 */ @keyframes blink { 0% { opacity: 0; } 50% { opacity: 1; } 100% { opacity: 0; } } /* 應用動畫*/ .dot { animation: blink 1s infinite; }
上面的代碼首先定義了一個圓點的基本樣式,以及一個名為blink的關鍵幀動畫。接著,使用動畫屬性應用這個動畫來使這個圓點不斷閃爍。通過改變關鍵幀動畫的百分比,可以使動畫的行為有所不同。
本文只是給出了一個非常簡單的示例。通過更改屬性和關鍵幀動畫,您可以創建更多有趣的小圓點動畫,例如:改變大小或顏色,以便更好地搭配網頁的主題。