CSS3是一種用于網頁設計的樣式表語言,它可以讓我們實現很多想象力豐富的效果,比如星空效果就是其中之一。
下面是一個CSS3星空效果的源代碼:
body { background-color: black; /* 設定背景色為黑色 */ } /* 生成星星的方法 */ @keyframes starAnim { from { opacity: 0; /* 開始時透明度為0 */ transform: translateY(0); /* 垂直方向上不移動 */ } to { opacity: 1; /* 結束時透明度為1 */ transform: translateY(20px); /* 垂直方向上向下移動20px */ } } /* 顯示星星為五角形 */ .star { width: 0; height: 0; border-right: 20px solid transparent; border-bottom: 13px solid white; border-left: 20px solid transparent; transform: rotate(35deg); position: absolute; animation: starAnim 1s linear infinite; } /* 顯示星星的位置 */ .star:nth-child(1) { top: 30%; left: 10%; } .star:nth-child(2) { top: 50%; right: 10%; } .star:nth-child(3) { top: 70%; left: 30%; } .star:nth-child(4) { top: 20%; right: 20%; } .star:nth-child(5) { top: 60%; left: 50%; } .star:nth-child(6) { top: 15%; left: 80%; } .star:nth-child(7) { top: 80%; left: 70%; } .star:nth-child(8) { top: 10%; left: 90%; } .star:nth-child(9) { top: 90%; right: 5%; }
上述代碼中,我們使用了CSS3的@keyframes屬性和animation屬性來生成星星動畫效果,同時也設置了星星的樣式以及位置,最終實現了閃爍的星空效果。
我們只需要將上述代碼復制到HTML文件的