用 CSS 做一個星空背景非常簡單,我們只需要借助 CSS3 中的漸變效果和動畫效果就可以完成。
.star-bg { background: radial-gradient(circle at 50% 90%, #fff, #000 80%); background-size: 300% 300%; animation: twinkling 5s ease-in-out infinite; } @keyframes twinkling { 0% { background-position: 0% 0%; } 50% { background-position: 100% 100%; } 100% { background-position: 0% 0%; } }
上面的代碼中,我們首先使用 radial-gradient 函數創建了一個圓形漸變背景,從白色到黑色,顏色變化的位置在距離底部的 80% 處。
接著,我們通過設置 background-size 屬性為 300% 300% 來將漸變色鋪滿整個背景。
最后,我們創建了一個名為 twinkling 的動畫,將背景顏色在整個過程中進行移動,從而模擬星空閃爍的效果。
上一篇16進制轉json