卡卡網(wǎng)

這是一個粒子動畫，不需要 JavaScript 來構建它。這個背景的整個想法是讓粒子隨機移動。

demodownload

實例分析

HTML代碼

<div class="container">
  <div class="circle-container">
    <div class="circle"></div>
  </div>
  <div class="circle-container">
    <div class="circle"></div>
  </div>
</div>

每一個circle的div是一個圓，而circle-container是圓的位置。

.circle-container {
  position: absolute;
  transform: translateY(-10vh);
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
          animation-timing-function: linear;
}
.circle-container .circle {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  mix-blend-mode: screen;
  background-image: radial-gradient(#99ffff, #99ffff 10%, rgba(153, 255, 255, 0) 56%);
  -webkit-animation: fadein-frames 200ms infinite, scale-frames 2s infinite;
          animation: fadein-frames 200ms infinite, scale-frames 2s infinite;
}

圓的大小是直徑為2px，位置是移動的，并且設定圓的顯示時間、延遲時間。

.circle-container:nth-child(1) {
  width: 2px;
  height: 2px;
  -webkit-animation-name: move-frames-1;
          animation-name: move-frames-1;
  -webkit-animation-duration: 36060ms;
          animation-duration: 36060ms;
  -webkit-animation-delay: 32453ms;
          animation-delay: 32453ms;
}
@-webkit-keyframes move-frames-1 {
  from {
    transform: translate3d(68vw, 103vh, 0);
  }
  to {
    transform: translate3d(7vw, -110vh, 0);
  }
}
@keyframes move-frames-1 {
  from {
    transform: translate3d(68vw, 103vh, 0);
  }
  to {
    transform: translate3d(7vw, -110vh, 0);
  }
}
.circle-container:nth-child(1) .circle {
  -webkit-animation-delay: 1819ms;
          animation-delay: 1819ms;
}

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

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

標簽: 動畫背景