背景がオーロラのように変化していくCSSだけで作られたコード

Aurora

DEMO 表示

CSSのアニメーションとfilterを駆使して、色の変化や混ざり具合を調整しています

filter の hue-rotate で一つの色から色相で色を変化
要素はradiusで円にして、opasityで透明度を与えて背景と融合するように
アニメーションで移動させる
複数の要素を違ったタイミングで動かす

これらを同時に行ってオーロラのような色の移り変わりを表現している

実際に利用するときは nth-childで指定している部分があるのでwarpperを作ってやるとか、少しだけ工夫が必要になるかと思いますが (動作はChromeで確認しています)

コード

HTML

<h1>Aurora</h1>
<div></div>
<div></div>
<div></div>

CSS

@diameter: 45vmax;

body {
  background: #000;
}

h1 {
  position: absolute;
  width: 100%;
  text-align: center;
  top: 48vh;
  color: #fff;
  font-family: 'Trebuchet MS', Helvetica, sans-serif;
  letter-spacing: .7em;
  font-size: 20pt;
  font-weight: normal;
  opacity: .2;
  text-transform: uppercase;
}

div {
  position: absolute;
  width: .001vmin;
  height: .001vmin;
  border-radius: 50%;
  opacity: .25;
}

div:nth-child(2) {
  box-shadow: 0 0 @diameter @diameter magenta;
  animation: 
    hue 10s 0s linear infinite,
    move1 19s 0s linear infinite;
}

div:nth-child(3) {
  box-shadow: 0 0 @diameter @diameter white;
  animation: 
    hue 15s 0s linear infinite,
    move2 25s 0s linear infinite;
}

div:nth-child(4) {
  box-shadow: 0 0 @diameter @diameter cyan;
  animation: 
    hue 20s 0s linear infinite,
    move3 15s 0s linear infinite;
  opacity: .2;
}

@keyframes hue {
  0% { filter: hue-rotate(0deg); }
  100% { filter: hue-rotate(360deg); }
}

@keyframes move1 {
  0% {
    top: 0vh;
    left: 50vw;
  }
  25% {
    left: 0vw;
  }
  50% {
    top: 100vh;
  }
  75% {
    left: 100vw;
  }
  100% {
    top: 0vh;
    left: 50vw;
  }
}

@keyframes move2 {
  0% {
    top: 50vh;
    left: 100vw;
  }
  25% {
     top:  100vh;
  }
  50% {
    left: 0vw;
  }
  75% {
    top: 0vh;
  }
  100% {
    top: 50vh;
    left: 100vw;
  }
}

@keyframes move3 {
  0% {
    top: 100vh;
    left: 50vw;
  }
  25% {
     left: 100vw;
  }
  50% {
    top: 0vh;
  }
  75% {
    left: 0vw;
  }
  100% {
    top: 100vh;
    left: 50vw;
  }
}