CSS3+JavaScript を使用したクールな呼吸効果のサンプルコード

CSS3 アニメーションで実現したシンプルでクールな効果。最終的な効果は次のようになります。

ページ構造 (index.html):

<!DOCTYPE html>
<html lang="ja">
<ヘッド>
  <メタ文字セット="UTF-8">
  <meta name="viewport" content="width=デバイス幅、初期スケール=1.0">
  <title>ドキュメント</title>
  <link rel="スタイルシート" href="style.css">
</head>
<本文>
  <h1>リラックスして呼吸しましょう</h1>
  <div class="コンテナ">
    <div class="circle"></div>
    <p id="テキスト"></p>
    <div class="ポインターコンテナ">
      <div class="ポインタ"></div>
    </div>
    <div class="gradient-circle"></div>
  </div>
  <script src="script.js"></script>
</本文>
</html>

スクリプト:

定数コンテナ = document.querySelector('.container');
定数テキスト = document.querySelector('#text');

定数合計時間 = 7500;
const BreathTime = (totalTime/5)*2; //呼吸時間は3秒
const holdTime = totalTime/5; // ホールド呼吸時間は1.5秒
console.log(呼吸時間);

BreathAnimation(); //まずはbreathAnimation関数を実行します function BreathAnimation(){
  text.innerHTML = '息を吸う';
  container.className = 'container grow'; //拡大効果を実現するためにコンテナにgrowクラスを追加します setTimeout(function(){
    text.innerHTML = 'ちょっと待って';
    setTimeout(関数(){
      text.innerHTML = '息を吐く';
      container.className = 'container shrink'; //縮小効果を得るためにコンテナにshrinkクラスを追加します},holdTime)
  },呼吸時間)
}

setInterval(breathAnimation,totalTime); //繰り返し実行

スタイル (style.css):

*{
  マージン: 0;
  パディング: 0;
  ボックスのサイズ: 境界線ボックス;
}

体{
  背景: url('./img/bg.jpg') 繰り返しなし 中央 中央 /cover;
  最小高さ: 100vh;
  フォントファミリー: Arial、Helvetica、sans-serif;
  色: #fff;
  オーバーフロー: 非表示;
  ディスプレイ: フレックス;
  flex-direction: 列;
  アイテムの位置を中央揃えにします。
  コンテンツの中央揃え: 中央;
}
/*マージンが自動に設定されていることに注意してください*/
。容器{
  位置: 相対的;
  幅: 300ピクセル;
  高さ: 300px;
  ディスプレイ: フレックス;
  アイテムの位置を中央揃えにします。
  コンテンツの中央揃え: 中央;
  変換: スケール(1);
  マージン: 自動;
}

/* 背景には .container よりわずかに大きいアスペクト比の円錐グラデーションを使用し、z-index を -2 に設定します。これは、.circle の別のレイヤーがあり、最も外側のレイヤーがテキストであるためです。*/
.gradient-circle{
  位置: 絶対;
  左: -10px;
  上: -10px;
  背景:円錐グラデーション(
    #55b7a4 0%,
    #4ca493 40%、
    #fff 40%、
    #fff 60%、
    #336d62 60%、
    #2a5b52 100%
  );
  幅: 320ピクセル;
  高さ: 320px;
  境界線の半径: 50%;
  Zインデックス: -2;
}

/z-index は -1 で、中央の黒い円です/
。丸{
  位置: 絶対;
  左: 0;
  上: 0;
  幅: 300ピクセル;
  高さ: 300px;
  背景色: #010f1c;
  境界線の半径: 50%;
  Zインデックス: -1;
}

/*.pointer-container はボールの外側にあるコンテナです。高さは 190 に設定されています。これは、半径が 150、上端が 40 であるためです。この方法では、円の中心を回転し、内側に切り替わることはありません。transform-origin が中央と下にあることに注意してください。*/
.ポインタコンテナ{
  位置: 絶対;
  幅: 20px;
  高さ: 190ピクセル;
  上: -40px;
  左: 140px;
  /* 背景色: 赤; */
  transform-origin: 下中央;
  アニメーション: 7.5 秒間、前方に無限回転します。
}

/*小さなボール*/
.ポインタ{
  幅: 20px;
  高さ: 20px;
  背景色: #fff;
  境界線の半径: 50%;
}

/*ボールを円を描くように回転させる*/
@keyframes 回転{
  から{
    変換: 回転(0度);
  }に{
    変換: 回転(360度);
  }
}
.コンテナ.成長{
  アニメーション: 3 秒間直線的に前進します。
}
.コンテナ.shrink{
  アニメーション: 2 秒ずつ前方に縮小します。
}
@keyframes が大きくなる{
  から{
    変換: スケール(1)
  }に{
    変換: スケール(1.2);
  }
}

@keyframes 縮小{
  から{
    変換: スケール(1.2)
  }に{
    変換: スケール(1);
  }
}

.container の margin が auto または特定の値に設定されていない場合、テキストと円が圧縮され、次の効果が発生します。

同時に、.pointer-container に background-color: red; を追加しました。これにより、.pointer-container の高さが 190px に設定されている理由がわかりやすくなります。また、transform-origin が下中央に設定されていない場合は、図にマークされているデフォルトのポイントとして回転しますが、これは必要な効果ではありません。

もう一つの細かい点は、.shrink のアニメーション時間を 2 秒に設定したことです。実際には、js によると、息を吐く時間は 3 秒にする必要がありますが、息を吐くことから息を吸うことまでのバッファ効果を持たせるために、2 秒に設定しました。そうしないと、息を吐くことから息を吸うことまでの遷移がなくなり、突然で醜いものになります。

CSS3+JavaScript でクールなブリージング効果を実現するサンプルコードに関するこの記事はこれで終わりです。CSS3+JavaScript ブリージング効果に関するより関連性の高いコンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

<<: MySQL の主キーがクエリを高速化するために数値を使用するか UUID を使用するかについての簡単な分析

>>: Vue+elementuiはドロップダウンテーブルの複数選択と検索機能を実現します