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