ホームページ >ウェブフロントエンド >CSSチュートリアル >CSS3でページ読み込み効果を実現する方法
CSS3でページ読み込み効果を実現する方法
- 清浅オリジナル
- 2018-11-29 13:54:174308ブラウズ
CSS3 メソッドによるページ読み込み効果の実現: 最初に HTML サンプル ファイルを作成し、次に本文に div を作成し、最後にアニメーション アニメーションと変換時の 2D スケーリング変換を通じてページ読み込み効果を実現します。
この記事の動作環境: 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でページ読み込み効果を実現する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。