css代码怎么实现夜空的视差效果

思路很简单，夜空和月亮，两个方向不断的移动，就出现视差效果了。

首先需要一个夜空的背景

.canvas {
  height: 100vh;
  width: 100%;
  background-color: var(--black);
  background-image: url("https://cdn.mos.cms.futurecdn.net/HuGGeENt6kGyixe3hT9tnY-1920-80.jpg.webp");
  display: grid;
  place-items: center;
  overflow: hidden;
  background-position: left;
  background-repeat: repeat-y;
  animation: animation var(--space-animation-time) linear infinite;
}

然后是月亮

.moon {
  background-color: var(--grey);
  height: calc(200 * var(--px));
  width: calc(200 * var(--px));
  border-radius: 50%;
  box-shadow: 0px 0px calc(70 * var(--px)) calc(5 * var(--px)) #fff;
  background-image: url("https://svs.gsfc.nasa.gov/vis/a000000/a004700/a004720/lroc_color_poles_1k.jpg");
  background-size: calc(430 * var(--px));
  background-position: left;
  background-repeat: no-repeat;
  animation: animation var(--moon-animation-time) linear infinite;
}

最重要的是移动的效果

@keyframes animation {
  to {
    background-position: right;
  }
}

搞定。

转载自：https://www.bootstrapmb.com/item/14187

在线预览   源码下载