CSS3是一種非常神奇的技術(shù),它可以讓我們用很少的代碼實(shí)現(xiàn)非常炫酷的效果,比如今天我就來(lái)介紹一下如何用CSS3制作一個(gè)星空動(dòng)畫(huà)。
.star-sky { position: fixed; /* 設(shè)置為固定定位,可以讓星空在頁(yè)面中滾動(dòng) */ top: 0; left: 0; width: 100%; height: 100%; /* 設(shè)置為全屏高度 */ background-color: #000; /* 設(shè)置背景顏色為黑色,可以更好地突出星星 */ z-index: -1; /* 將背景設(shè)置到最后一層 */ } .star { position: absolute; /* 設(shè)置為絕對(duì)定位,可以讓星星自由移動(dòng) */ width: 2px; height: 2px; /* 設(shè)置星星大小 */ background-color: #fff; /* 設(shè)置星星顏色為白色 */ border-radius: 50%; /* 將星星設(shè)置成圓形 */ animation: twinkle 1s infinite; /* 設(shè)置星星閃爍動(dòng)畫(huà) */ } @keyframes twinkle { 0% { transform: scale(0); /* 星星開(kāi)始時(shí)是看不見(jiàn)的,所以先將它縮小為0 */ opacity: 0; /* 同時(shí)將透明度設(shè)置為0 */ } 50% { transform: scale(1); /* 星星變成原來(lái)的大小 */ opacity: 1; /* 同時(shí)將透明度設(shè)置為1,讓星星變得可見(jiàn) */ } 100% { transform: scale(0); /* 星星又縮小為0,變成看不見(jiàn)的狀態(tài) */ opacity: 0; } }
使用以上代碼可以實(shí)現(xiàn)一個(gè)漂亮的星空動(dòng)畫(huà),只需要在HTML中添加一個(gè)類(lèi)名為“star-sky”的元素即可。