|
|
|
|
|
|
贊助商
分類目錄
贊助商
最新文章
搜索
css滾動(dòng)星星效果/星空動(dòng)畫背景
作者:admin 時(shí)間:2021-10-19 11:55:20 瀏覽:前面介紹過《CSS粒子動(dòng)畫背景》，本文將繼續(xù)介紹另一個(gè)動(dòng)畫背景。此動(dòng)畫為你的背景添加了深度錯(cuò)覺，從而創(chuàng)建了視差滾動(dòng)星星效果。它使用一個(gè)簡單的 SASS 函數(shù)（在每次加載時(shí)創(chuàng)建一個(gè)隨機(jī)星域）和 CSS 動(dòng)畫關(guān)鍵幀。
實(shí)例介紹
HTML代碼
<div id='stars2'></div>
<div id='stars3'></div>
<div id='title'>
<span>
PURE CSS
</span>
<br>
<span>
PARALLAX PIXEL STARS
</span>
</div>
stars2 和 stars3 表示兩組星星，兩組星星的大小和位置不同。
#stars2 {
width: 2px;
height: 2px;
}#stars3 {
width: 3px;
height: 3px;
} 
星星的移動(dòng)方向是垂直移動(dòng)。
#stars2 {
animation: animStar 150s linear infinite;
}
@keyframes animStar {
from {
transform: translateY(0px);
}
to {
transform: translateY(-2000px);
}
}總結(jié)
此動(dòng)畫為背景添加了深度錯(cuò)覺，滾動(dòng)的星星有一種視差效果。
您可能對以下文章也感興趣
標(biāo)簽: 動(dòng)畫背景
x
- 站長推薦
