CSS3アニメーションを使用して、小さい円から大きい円に拡大し、外側に広がる効果を実現する例

序文

この記事では、CSS3アニメーションを使用して、円が小さいものから大きく拡大し、外側に広がる効果を実現する例を主に紹介します。この記事には、CSS3アニメーション（アニメーション）、2D変換（transform: scale）が含まれます。

CSS3 には、アニメーションオブジェクトの作成に似た新しいアニメーションプロパティが追加されました。

たとえば、 animation: bounce 2.0s infinite easy-in-out;

アニメーションには次のパラメータがあります。

財産	説明する	CS
アニメーション	animation-play-state プロパティを除くすべてのアニメーションプロパティのショートカットプロパティ。	3
アニメーション名	@keyframes アニメーションの名前を指定します。	3
アニメーション期間	アニメーションが 1 サイクルを完了するのにかかる秒数またはミリ秒数を指定します。デフォルトは0です。	3
アニメーションタイミング関数	アニメーションの速度曲線を指定します。デフォルトは「ease」です。	3
アニメーション遅延	アニメーションが開始するタイミングを指定します。デフォルトは0です。	3
アニメーションの繰り返し回数	アニメーションを再生する回数を指定します。デフォルトは 1 です。	3
アニメーションの方向	次のサイクルでアニメーションを逆方向に再生するかどうかを指定します。デフォルトは「通常」です。	3
アニメーション再生状態	アニメーションが実行中か一時停止中かを指定します。デフォルトは「実行中」です。	3
アニメーションフィルモード	アニメーション時間外のオブジェクトの状態を指定します。	3

CSS 3 の 2D 変換は、次の 2 つのプロパティを使用して実装されます。

財産	説明する	CS
変身	要素に 2D または 3D 変換を適用します。	3
変換元	変換の基点の位置を指定します。	3

静的レンダリング:

コードに示されているように:

<!DOCTYPE html>
<html>
<ヘッド>
<meta http-equiv="コンテンツタイプ" コンテンツ="text/html; charset=utf-8" />
<title>無題のドキュメント</title>
<スタイル>
@keyframes 警告 {
 0% {
  変換: スケール(0);
  不透明度: 0.0;
 }
 25% {
  変換: スケール(0);
  不透明度: 0.1;
 }
 50% {
  変換: スケール(0.1);
  不透明度: 0.3;
 }
 75% {
  変換: スケール(0.5);
  不透明度: 0.5;
 }
 100% {
  変換: スケール(1);
  不透明度: 0.0;
 }
}
@-webkit-keyframes "警告" {
 0% {
  -webkit-transform: スケール(0);
  不透明度: 0.0;
 }
 25% {
  -webkit-transform: スケール(0);
  不透明度: 0.1;
 }
 50% {
  -webkit-transform: スケール(0.1);
  不透明度: 0.3;
 }
 75% {
  -webkit-transform: スケール(0.5);
  不透明度: 0.5;
 }
 100% {
  -webkit-transform: スケール(1);
  不透明度: 0.0;
 }
}
 
。容器 {
 位置: 相対的;
 幅: 40px;
 高さ: 40px;
 境界線: 1px実線 #000;
}
/* 小さい円のサイズは変更しない*/
.dot {
 位置: 絶対;
 幅: 6px;
 高さ: 6px;
 左: 15px;
 上: 15px;
 -webkit-border-radius: 20px;
 -moz-border-radius: 20px;
 境界線: 2px 実線の赤;
 境界線の半径: 20px;
 zインデックス: 2;
}
/* アニメーション化された円を生成します（外側に広がり、大きくなります）*/
。脈 {
 位置: 絶対;
 幅: 24px; 
 高さ: 24px;
 左: 2px;
 上: 2px;
 境界線: 6px 実線の赤;
 -webkit-border-radius: 30px;
 -moz-border-radius: 30px;
 境界線の半径: 30px;
 zインデックス: 1;
 不透明度: 0;
 -webkit-animation: warn 3s easy-out;
 -moz-animation: warn 3s easy-out;
 アニメーション: warn 3s easy-out;
 -webkit-アニメーションの反復回数: 無限;
 -moz-アニメーションの反復回数: 無限;
 アニメーションの反復回数: 無限;
}
</スタイル>
 
</head>
 
<本文>
<div class="コンテナ">
    <div class="dot"></div>
    <div class="pulse"></div>
</div>
</本文>
</html>

要約する

上記はこの記事の全内容です。この記事の内容が皆さんの勉強や仕事に一定の参考学習価値を持つことを願っています。ご質問があれば、メッセージを残してコミュニケーションしてください。123WORDPRESS.COM を応援していただきありがとうございます。

<<: HTMLの行間設定方法と問題点

>>: Nginx がフロントエンドリソースへのクロスドメインアクセスの問題をどのように解決するかの詳細な説明