卡卡網(wǎng)

這是一個(gè)粒子動(dòng)畫，不需要 JavaScript 來構(gòu)建它。這個(gè)背景的整個(gè)想法是讓粒子隨機(jī)移動(dòng)。

demodownload

實(shí)例分析

HTML代碼

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

每一個(gè)circle的div是一個(gè)圓，而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，位置是移動(dòng)的，并且設(shè)定圓的顯示時(shí)間、延遲時(shí)間。

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

您可能對(duì)以下文章也感興趣

• CSS動(dòng)畫背景-對(duì)角線顏色漸變
• 純CSS實(shí)現(xiàn)的星光動(dòng)畫背景

標(biāo)簽: 動(dòng)畫背景