CSS背景星光讓網頁更加美觀,它在背景中添加了一些閃亮的星星或其他圖形,為網頁增添了生動的氛圍。下面是一個簡單的CSS背景星光的例子:
body { background: #000 url(stars.png); } @keyframes twinkle { 0% {opacity: 1;} 10% {opacity: 0.8;} 20% {opacity: 0.6;} 30% {opacity: 0.4;} 40% {opacity: 0.2;} 50% {opacity: 0;} 60% {opacity: 0.2;} 70% {opacity: 0.4;} 80% {opacity: 0.6;} 90% {opacity: 0.8;} 100% {opacity: 1;} } .star { position: absolute; width: 3px; height: 3px; border-radius: 50%; background: #fff; box-shadow: 0 0 3px #fff; animation: twinkle 1s infinite; } .star1 { top: 10%; left: 50%; animation-delay: 0s; } .star2 { top: 20%; left: 25%; animation-delay: 1s; } .star3 { top: 30%; left: 75%; animation-delay: 2s; } .star4 { top: 40%; left: 60%; animation-delay: 3s; } .star5 { top: 50%; left: 10%; animation-delay: 4s; } .star6 { top: 60%; left: 80%; animation-delay: 5s; } .star7 { top: 70%; left: 35%; animation-delay: 6s; } .star8 { top: 80%; left: 90%; animation-delay: 7s; } .star9 { top: 90%; left: 15%; animation-delay: 8s; }
這個例子使用了背景圖片和CSS動畫來創建星光效果。首先,我們通過設置一個黑色背景和星星的圖片來創建一個基礎的星空背景。然后,我們使用CSS動畫來讓星星閃亮起來。CSS動畫是通過指定一系列關鍵幀來實現的。在這個例子中,我們使用了一個名為“twinkle”的動畫,并定義了一些關鍵幀,以控制星星的透明度。
最后,我們使用絕對定位來將星星添加到網頁中。我們為每個星星定義了一個類,并設置了位置和動畫延遲時間,來確保這些星星的閃爍效果不完全一樣。
如果你想在你的網頁中加入星光效果,那么這個例子就是一個很好的起點,你可以通過修改一些CSS代碼來創建你自己的星空背景。只需要將星星的位置和其他樣式改變即可。
上一篇css背景顯示不出來
下一篇css背景無效