動くグラデーション「CSS」ナナヨマニュアル

HTML

2023.12.222024.02.01

CSSで作る、動くグラデーション

この【動くグラデーション】は、HTML と CSS で作っています。

表示（プレビュー）青色の背景色に緑の円形グラデーションが上下する

表示（プレビュー）右円形グラデーションを上下に動かす

表示（プレビュー）中央円形グラデーションを下に動かす

ソースコード

    <div class="gradation-area">
      <div class="pattern-box a01">

      </div>
    </div>

ソースコードがシンプルすぎて、ごめんなさい。

class=”gradation-area”で見える範囲を指定。

class=”pattern-box”で背景を指定。

class=”a01″でデザインと動きを指定。

CSS

クリックしてCSSを表示

 div.gradation-area {
  overflow: hidden;      /*収まらない部分は非表示でスクロールしない*/
 /* position: absolute;    /*相対位置か絶対位置かを指定する（絶対位置：親ボックスの左上が基準位置）*/
  width: 100%;           /*横幅*/
  height: 200px;
  margin: 0;
  padding: 0;
}

div.gradation-area div.pattern-box{
  display: block;          /*ブロックボックスを生成する*/
 position: absolute;      /*相対位置か絶対位置かを指定する（絶対位置：親ボックスの左上が基準位置）*/
  top: 0;                  /*上からの始まりの位置*/
  left: 0;                 /*左からの始まりの位置*/
  width: 100%;             /*横幅*/
  height: 1700px;          /*縦幅*/
  clear: both;
  display: block;
  z-index: 1;              /*重なりの順序を指定する*/
}

div.gradation-area div.pattern-box.a01{
  background-image: radial-gradient(ellipse farthest-corner at center, #00FFFF 0%, rgba(0, 0, 255, 0) 50%, #0000FF 95%);/*円形グラデーションを指定*/
  animation-duration: 8.5s;             /*アニメーション一回分の時間の長さ*/
  animation-iteration-count: infinite;   /*アニメーションの繰り返し回数を指定する(無限)*/
  animation-name: animation-e01;           /*アニメーション名を指定する@keyframesでこの名を使用*/
}
div.gradation-area div.pattern-box.a02{
  background: radial-gradient(ellipse farthest-side at right, #ff005e, #caffd3);/*円形グラデーションを指定*/
  animation-duration: 10.5s;             /*アニメーション一回分の時間の長さ*/
  animation-iteration-count: infinite;   /*アニメーションの繰り返し回数を指定する(無限)*/
  animation-name: animation-e01;           /*アニメーション名を指定する@keyframesでこの名を使用*/
}
div.gradation-area div.pattern-box.a03{
background: radial-gradient(circle closest-side at center, #00ffff,#efff00, #dbffc8);
  animation-duration: 3.5s;
  animation-iteration-count: infinite;
  animation-name: animation-e01;           /*アニメーション名を指定する@keyframesでこの名を使用*/
}

@keyframesでアニメーションを指定しています。（同じCSSファイル内で上下の指定）

クリックしてアニメーション指定を表示

@keyframes animation-e01 {
  0%{
    top: 0;
    }
  50% {
    top: -800px;
  }
  100% {
    top: 0;
  }
}

本音：表示位置の調整が、非常にめんどくさいですし、UI的に好ましくないようなので…