CSS3でページ読み込み効果を実現する方法-CSSチュートリアル-php.cn

CSS3でページ読み込み効果を実現する方法

清浅

リリース： 2021-04-20 15:13:38

オリジナル

4291 人が閲覧しました

CSS3 メソッドによるページ読み込み効果の実現: 最初に HTML サンプルファイルを作成し、次に本文に div を作成し、最後にアニメーションアニメーションと変換時の 2D スケーリング変換を通じてページ読み込み効果を実現します。

CSS3でページ読み込み効果を実現する方法

この記事の動作環境: Windows7 システム、HTML5&&CSS3 バージョン、Dell G3 コンピューター。

ページ読み込みのアニメーションをさまざまな形状に変更することができます。今日紹介したいのは、ページを読み込むアニメーションを円形にすることです。アニメーションを使用する場合は、ブラウザーの互換性に注意する必要があります。問題点

ナレッジポイントの詳細説明

## (1) アニメーション: アニメーションのプロパティを設定します。

animation-name: 必要なキーフレーム名を設定します。セレクターにバインドされます。この例では、

animation-duration をロードするようにバインドされています。アニメーションの完了にかかる時間 (秒またはミリ秒)。

animation-timing-function: アニメーション速度曲線。

animation-delivery: アニメーションが開始されるまでの遅延。

animation-iteration-count: アニメーションを再生する回数。

animation-direction: アニメーションを順番に逆方向に再生するかどうか。

例: ロードするアニメーション名を設定し、アニメーションの完了に必要な時間は 1.4 秒、低速で開始および終了し、無限ループで再生します。

animation: load 1.4s infinite ease-in-out;

ログイン後にコピー

(2) アニメーション-fill-mode 属性

none: デフォルトの動作を変更しません。

forwards: アニメーションが完了したら、最後の属性値 (最後のキーフレームで定義されたもの) を保持します。

backwards:アニメーション遅延で指定された期間中、アニメーションが表示される前に、開始プロパティ値 (最初のキーフレームで定義) が適用されます。

both: 前方フィルモードと後方フィルモードの両方が適用されます。

(3) 変換:scale(x,y) 2D スケーリング変換。

# 完全なコード

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.load {
  margin:300px auto;
  width: 150px;
  text-align: center;
}
.load div{
  width: 30px;
  height: 30px;
  background-color:rgb(118,224,250);
  border-radius: 100%;
  display: inline-block;
  -webkit-animation: load 1.4s infinite ease-in-out;
  -webkit-animation-fill-mode: both;

}
.load .circle1 {
  -webkit-animation-delay: -0.32s;
}
.load .circle2 {
  -webkit-animation-delay: -0.16s;
}
@-webkit-keyframes load {
  0%, 80%, 100% { -webkit-transform: scale(0.0) }
  40% { -webkit-transform: scale(1.0) }
}
</style>
</head>
<body>
<div class="load">
  <div class="circle1"></div>
  <div class="circle2"></div>
  <div class="circle3"></div>
</body>
</html>

ログイン後にコピー

[推奨コース:

#CSS3 チュートリアル ]レンダリング

ダイナミックレンダリング

要約: 上記は以上ですこの記事の内容全体この記事の内容を通じて、CSS3 アニメーションをある程度理解し、好みのページ読み込みスタイルを作成できるようになることを願っています。
以上がCSS3でページ読み込み効果を実現する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。