CSS3星空背景是一種非常流行的背景效果,它可以讓網頁看起來更加華麗和魔幻。下面具體介紹一下實現該背景的代碼。
/* 全局樣式 */ body { background-color: #000; } /* 星星的樣式 */ .stars { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; } /* 單個星星的樣式 */ .stars::before { content: ""; position: absolute; top: 50%; left: 50%; width: 2px; height: 2px; background-color: #fff; box-shadow: 0 0 2px #fff; border-radius: 50%; animation: twinkling 5s infinite; } /* 星星閃爍的動畫 */ @keyframes twinkling { 0% { opacity: 0; transform: translate(-50%, -50%) scale(1); } 50% { opacity: 1; transform: translate(-50%, -50%) scale(0.5); } 100% { opacity: 0; transform: translate(-50%, -50%) scale(1); } }
以上是實現CSS3星空背景的核心代碼,其中用到了偽元素和CSS3的動畫。需要注意的是,在使用該背景之前,需要先將頁面的背景顏色設置為黑色,否則星星效果會被遮蓋。
通過以上代碼,我們可以實現一個酷炫的星空背景,它可以很好地提升網頁的視覺效果,增強用戶的體驗感。
上一篇css 單元格內垂直居中
下一篇css3最全