CSS3可以實現各種炫酷的效果,今天我們來學習如何使用CSS3寫出一個美麗的星空背景。
/* 創建背景 */ body { background-color: #00008B; } /* 添加星星 */ .stars { background: transparent url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/2605/star.png') repeat; width: 100%; height: 100%; } /* 設置星星閃爍動畫 */ .twinkle { animation-name: twinkling; animation-duration: 1s; animation-timing-function: ease-in-out; animation-iteration-count: infinite; } /* 創建閃爍動畫 */ @keyframes twinkling { 0% {opacity: 1;} 100% {opacity: 0;} } /* 添加星星數量和大小 */ .stars:nth-of-type(1) { width: 1px; height: 1px; position: absolute; top: 90%; left: 50%; animation-delay: 0s; animation-duration: 60s; } .stars:nth-of-type(2) { width: 2px; height: 2px; position: absolute; top: 80%; left: 60%; animation-delay: 2s; animation-duration: 80s; } .stars:nth-of-type(3) { width: 3px; height: 3px; position: absolute; top: 70%; left: 80%; animation-delay: 4s; animation-duration: 100s; } /* 添加更多的星星 */ /* ... */ /* ... */ /* ... */
通過以上的CSS代碼,我們可以實現一個非常美麗的星空背景。你也可以通過修改代碼來增加或減少星星的數量、大小和閃爍時間。讓我們一起用CSS3創造更多的奇妙效果吧!
上一篇mysql修改數據庫字符
下一篇html 快捷鍵設置