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

css3星空源代碼

林子帆2年前13瀏覽0評論

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文件的