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

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はドロップダウンテーブルの複数選択と検索機能を実現します

推薦する

Docker の MySQL 時間とシステム時間の不一致の問題を解決する

最近、Docker に MySQL をインストールしたところ、データベースの時刻がシステム時刻と 8...

XHTML Web ページ チュートリアル

この記事は主に、初心者に XHTML の基本的な知識と、XHTML と HTML の違いを理解しても...

Javascript で関数のカリー化とデカリー化を実装する方法

関数のカリー化(黒い疑問符の顔)? ? ?カレー(黒い疑問符の顔)? ? ?これは完璧な中国語翻訳で...

MySQL データベースの必須条件クエリ ステートメント

目次1. 基本的な文法2. 条件式によるフィルタリング3. 論理式によるフィルタリング4. あいまい...

サイトマップをウェブページの下部に配置するメリットと例

以前は、ほとんどすべての Web サイトに、すべてのページをリストしたサイトマップ ページがありまし...

Nginx セッション損失問題の解決策

nginx をリバース プロキシ tomcat として使用する場合、セッション損失が発生する可能性が...

MySQL で URL タイムゾーンの罠を回避する方法

序文最近、MySQL 6.0.x 以降の jar を使用する場合、コード URL リンクで serv...

CentOS8.1 で Gitlab サーバーを構築するための詳細なチュートリアル

Gitlab と Github の違いについては、あまり説明する必要はありません。一言でまとめると、...

リフレッシュリダイレクトを実現する HTML ヘッドタグメタ

コードをコピーコードは次のとおりです。 <html> <ヘッド> <m...

JS でカルーセル画像を実装するいくつかの方法

カルーセル主なアイデアは次のとおりです。大きなコンテナには、コンテナの幅の整数倍の非常に長いテーブル...

初心者のためのMySQL外部キーの設定方法

目次外部キーの役割mysql 外部キー設定方法要約する外部キーの役割データの一貫性、整合性を維持し、...

Taobao の商品画像切り替え効果を実現する JavaScript

JavaScriptの服装アルバム切り替え効果(Taobao商品画像切り替えに似ています)、参考ま...

Nginx キャッシュ設定例

Web アプリケーションの開発とデバッグを行う際には、テストのためにブラウザのキャッシュをクリアした...

Vueフィルターの詳細な説明

<本文> <div id="ルート"> <h2&...

JavaScript の async と await のシンプルで詳細な学習

目次1. はじめに2. 詳しい説明2.1、非同期2.1.1. 関数はPromise以外のオブジェクト...