卡卡网

前面介绍过《CSS粒子动画背景》，本文将继续介绍另一个动画背景。此动画为你的背景添加了深度错觉，从而创建了视差滚动星星效果。它使用一个简单的 SASS 函数（在每次加载时创建一个随机星域）和 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);
  }
}

总结

此动画为背景添加了深度错觉，滚动的星星有一种视差效果。

您可能对以下文章也感兴趣

• CSS粒子动画背景
• CSS动画背景-对角线颜色渐变
• 纯CSS实现的星光动画背景

标签: 动画背景