卡卡網(wǎng)

前面介紹過《CSS粒子動畫背景》，本文將繼續(xù)介紹另一個動畫背景。此動畫為你的背景添加了深度錯覺，從而創(chuàng)建了視差滾動星星效果。它使用一個簡單的 SASS 函數(shù)（在每次加載時創(chuàng)建一個隨機星域）和 CSS 動畫關鍵幀。

demodownload

實例介紹

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;
}

星星的移動方向是垂直移動。

#stars2 {
    animation: animStar 150s linear infinite;
}

@keyframes animStar {
  from {
    transform: translateY(0px);
  }
  to {
    transform: translateY(-2000px);
  }
}

總結(jié)

此動畫為背景添加了深度錯覺，滾動的星星有一種視差效果。

您可能對以下文章也感興趣

• CSS粒子動畫背景
• CSS動畫背景-對角線顏色漸變
• 純CSS實現(xiàn)的星光動畫背景

標簽: 動畫背景