更新時間:2021-08-27 10:37:08 來源:動力節點 瀏覽1777次
一閃一閃亮晶晶,用來做背景很棒哦~
html部分
<div class="container">
<div class="star star1"></div>
<div class="star star2"></div>
<div class="star star3"></div>
</div>
CSS部分
body { overflow: hidden; }
.container {
position : relative;
top : 0;
left : 50%;
transform: translateX(-50%);
width : 1920px;
height : 600px;
background : url(images/bg1.jpg) repeat
}
.star {
position : absolute;
top : 0;
left : 50%;
transform: translateX(-50%);
width : 1920px;
height : 500px;
animation: star 2.5s ease-in infinite;
}
.star1 {
background: url(images/bg_star_1.png) no-repeat center center;
}
.star2 {
background: url(images/bg_star_2.png) no-repeat center center; animation-delay: .8s;
}
.star3 {
background: url(images/bg_star_3.png) no-repeat center center; animation-delay: 1.7s;
}
@keyframes star {
10% {
opacity: 0;
}
90% {
opacity: 1;
}
}
以上就是動力節點小編介紹的"CSS滾動條寬度調整",希望對大家有幫助,想了解更多可查看Java教程。動力節點在線學習教程,針對沒有任何Java基礎的讀者學習,讓你從入門到精通,主要介紹了一些Java基礎的核心知識,讓同學們更好更方便的學習和了解Java編程,感興趣的同學可以關注一下。
0基礎 0學費 15天面授
有基礎 直達就業
業余時間 高薪轉行
工作1~3年,加薪神器
工作3~5年,晉升架構
提交申請后,顧問老師會電話與您溝通安排學習