色婷婷狠狠18禁久久YY,CHINESE性内射高清国产,国产女人18毛片水真多1,国产AV在线观看

css3寫出星空

劉姿婷2年前10瀏覽0評論

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創造更多的奇妙效果吧!