ホームページ > 記事 > ウェブフロントエンド > CSS3 でプリロード アニメーション効果を実現するためのいくつかの方法
この記事では主に CSS3 アニメーション: プリロード アニメーション効果の 5 つの例を紹介します。内容は非常に優れているので、参考として共有します。
図に示すようなアニメーション効果を実現します:
アニメーション 1 をプリロードします: 二重回転円
2 つの異なる方向に回転する円。内側のリングの速度を表す CSS コードを定義します。つまり、内側のリングの速度は外側のリングの速度の 2 倍になります。
実装を図に示します:
html コード:
<body style="background: #ffb83c;"> <p id="preloader-1"> <span></span> <span></span> </p> </body>
css コード:
#preloader-1{ position: relative; } #preloader-1 span{ position: absolute; border:8px solid #fff; border-top:8px solid transparent; border-radius: 999px; } #preloader-1 span:nth-child(1){ width:80px; height: 80px; animation: spin-1 2s infinite linear; } #preloader-1 span:nth-child(2){ top:20px; left:20px; width:40px; height: 40px; animation: spin-2 1s infinite linear; } @keyframes spin-1{ 0%{transform: rotate(360deg); opacity: 1.0;} 50%{transform: rotate(180deg); opacity: 0.5;} 100%{transform: rotate(0deg);opacity: 0;} } @keyframes spin-2{ 0%{transform: rotate(0deg); opacity: 0.5;} 50%{transform: rotate(180deg); opacity: 1;} 100%{transform: rotate(360deg);opacity: 0.5;} }
アニメーション 2 をプリロード: インターレース円
2つの円横方向にずらして前後に動かします。各円には、独自の逆方向移動アニメーション パラメータ セットがあります。
効果:
htmlコード:
<body style="background: #4ad3b4;"> <p id="preloader-2"> <span></span> <span></span> </p> </body>
cssコード:
#preloader-2{ position: relative; } #preloader-2 span{ position: absolute; width:30px; height: 30px; background: #fff; border-radius: 999px; } #preloader-2 span:nth-child(1){ animation: cross-1 1.5s infinite linear; } #preloader-2 span:nth-child(2){ animation: cross-2 1.5s infinite linear; } @keyframes cross-1{ 0%{transform: translateX(0); opacity: 0.5;} 50%{transform: translateX(80px); opacity: 1;} 100%{transform: translateX(0);opacity: 0.5;} } @keyframes cross-2{ 0%{transform: translateX(80px); opacity: 0.5;} 50%{transform: translateX(0); opacity: 1;} 100%{transform: translateX(80px);opacity: 0.5;} }
アニメーション3をプリロード:回転円
効果:
HTMLコード:
<body style="background: #ab69d9;"> <p id="preloader-3"> <span></span> </p> </body>
css コード:
#preloader-3{ position: relative; width:80px; height: 80px; border:4px solid rgba(255,255,255,.25); border-radius: 999px; } #preloader-3 span{ position: absolute; width:80px; height:80px; border:4px solid transparent; border-top:4px solid #fff; border-radius: 999px; top:-4px; left:-4px; animation: rotate 1s infinite linear; } @keyframes rotate{ 0%{transform: rotate(0deg);} 100%{transform: rotate(360deg);} }
プリロードアニメーション 4: ジャンプサークル
これは、異なる円の間の距離を Delay パラメータに設定することによる、メキシコの波パターンのアニメーション効果です。成し遂げる。
効果:
html コード:
<body style="background: #c1d64a;"> <p id="preloader-4"> <span></span> <span></span> <span></span> <span></span> <span></span> </p> </body>
CSS コード:
#preloader-4{ position: relative; } #preloader-4 span{ position:absolute; width:16px; height: 16px; border-radius: 999px; background: #fff; animation: bounce 1s infinite linear; } #preloader-4 span:nth-child(1){ left:0; animation-delay: 0s; } #preloader-4 span:nth-child(2){ left:20px; animation-delay: 0.25s; } #preloader-4 span:nth-child(3){ left:40px; animation-delay: 0.5s; } #preloader-4 span:nth-child(4){ left:60px; animation-delay: 0.75s; } #preloader-4 span:nth-child(5){ left:80px; animation-delay: 1.0s; } @keyframes bounce{ 0%{transform: translateY(0px);opacity: 0.5;} 50%{transform: translateY(-30px);opacity: 1.0;} 100%{transform: translateY(0px);opacity: 0.5;} }
アニメーション 5 をプリロード: レーダー サークル
設定に与えるレーダー放射効果3 つのスパン要素に同じフェードインおよびフェードアウト効果を適用し、それぞれをわずかに遅らせてそれを実現します。
効果:
htmlコード:
<body style="background: #f9553f;"> <p id="preloader-5"> <span></span> <span></span> <span></span> </p> </body>
cssコード:
#preloader-5{ position: relative; } #preloader-5 span{ position:absolute; width:50px; height: 50px; border:5px solid #fff; border-radius: 999px; opacity: 0; animation: radar 2s infinite linear; } #preloader-5 span:nth-child(1){ animation-delay: 0s; } #preloader-5 span:nth-child(2){ animation-delay: 0.66s; } #preloader-5 span:nth-child(3){ animation-delay: 1.33s; } @keyframes radar{ 0%{transform: scale(0);opacity: 0;} 25%{transform: scale(0);opacity: 0.5;} 50%{transform: scale(1);opacity: 1.0;} 75%{transform: scale(1.5);opacity: 0.5;} 100%{transform: scale(2);opacity: 0;} }
以上がこの記事の全内容です。皆様の学習に役立つことを願っています。その他の関連コンテンツ PHP 中国語 Web サイトにご注意ください。
関連する推奨事項:
ブラウザのズームによって背景画像のサイズが変わらないコードをCSSを使用して実装する2つの方法
CSS3のAnimationアニメーションプロパティの使用分析について
以上がCSS3 でプリロード アニメーション効果を実現するためのいくつかの方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。