効果プレビュー 右側の「クリックしてプレビュー」ボタンを押すと現在のページでプレビューが表示され、リンクをクリックすると全画面でプレビューされます。 https://codepen.io/comehope/pen/wYvGwr インタラクティブビデオ このビデオはインタラクティブなので、いつでもビデオを一時停止して、ビデオ内のコードを編集できます。 Chrome、Safari、Edgeで開いて視聴してください。 https://scrimba.com/p/pEgDAM/cnMgQTr ソースコードのダウンロード Daily Front-end Practice Series の完全なソース コードを GitHub からダウンロードしてください。 https://github.com/comehope/front-end-daily-challenges コード解釈 DOM を定義すると、コンテナーには 10 個の子要素が含まれます。 <div class="loader"> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> </div> センターディスプレイ: 体 { マージン: 0; 高さ:100vh; ディスプレイ: フレックス; アイテムの位置を中央揃えにします。 コンテンツの中央揃え: 中央; 背景: 線形グラデーション(#eee 70%、ピンク); } コンテナ スタイルを、ピンクの背景と線の付いた円に設定します。 .ローダー{ 幅: 6em; 高さ: 6em; パディング: 3em; フォントサイズ: 10px; 背景色: ピンク; 境界線の半径: 50%; 境界線: 0.8em のホットピンク単色; } 子要素のレイアウトを水平タイルに設定します。 .ローダー{ ディスプレイ: フレックス; アイテムの位置を中央揃えにします。 コンテンツの両端揃え: スペースの間; } 子要素のスタイルを設定するには: .loader > スパン { 幅: 0.5em; 高さ: 50%; 背景色: ディープピンク; } 子要素にアニメーション効果を追加します。 .loader > スパン { 変換: スケールY(0.05) 移動X(-0.5em); アニメーション: span-animate 1.5 秒 無限イーズインアウト; } @keyframes span-animate { 0%、100% { 変換: スケールY(0.05) 移動X(-0.5em); } 15% { 変換: スケールY(1.2) 移動X(1em); } 90%、100% { 背景色: ホットピンク; } } サブ要素のインデックスを設定して、サブ要素がアニメーションを順番に再生できるようにします。 .loader > スパン { アニメーション遅延: calc(var(--n) * 0.05s); } .loader > span:nth-child(1) { --n: 1; } .loader > span:nth-child(2) { --n: 2; } .loader > span:nth-child(3) { --n: 3; } .loader > span:nth-child(4) { --n: 4; } .loader > span:nth-child(5) { --n: 5; } .loader > span:nth-child(6) { --n: 6; } .loader > span:nth-child(7) { --n: 7; } .loader > span:nth-child(8) { --n: 8; } .loader > span:nth-child(9) { --n: 9; } .loader > span:nth-child(10) { --n: 10; } コンテナアニメーションを追加して脈動効果を強化します。 .ローダー{ アニメーション: loader-animate 1.5s 無限の easy-in-out; } @keyframes ローダーアニメーション { 45%、55% { 変換: スケール(1.05); } } 要約する 上記は、エディターが紹介した純粋な CSS を使用して脈動するローダー効果を作成するソースコードです。皆様のお役に立てれば幸いです。ご質問がある場合は、メッセージを残してください。エディターがすぐに返信します。また、123WORDPRESS.COM ウェブサイトをサポートしてくださっている皆様にも感謝申し上げます。 |
<<: nginx を介してローカルでリバースプロキシを構成するプロセス全体
>>: Oracle の MySQL バージョンでユーザー Scott のテーブル ステートメントを作成する例
目次原因:以下を実行します: 1. コンストラクター2.レンダリング機能3.bind関数とarrow...
目次ネイティブJS GETリクエストの送信方法投稿リクエストの送信方法パラメータ付きのGETリクエス...
MySQL テーブルでの接続方法は実は非常に簡単なので、ここではその特徴を簡単にリストします。テーブ...
昨日、パソコンにPHP開発環境をセットアップした後、Apacheサーバーを再起動するとエラーが続きま...
製品設計者は、複雑で大規模な製造システムと多様な市場に直面しているため、知識体系には幅広さと深さの両...
目次シンプルな CASEWHEN 関数:これは、CASEWHEN 条件式関数を使用するのと同じです。...
1. インデックスの役割一般的に言えば、インデックスは本の目次に相当します。条件に基づいてクエリを実...
目次プロジェクトの作成プロジェクト構造メイン.jsアプリ.vue:設定コンポジションAPI参照反応的...
WeChatアプレットのログインインターフェースは参考までに実装されています。具体的な内容は次のとお...
目次1. コンパイラコードフォーマット仕様設定2. Vueテンプレートの設定1. コンパイラコードフ...
W3C は HTML の標準をいくつか確立していますが、ブラウザは独自の定義済みスタイルに従って W...
ハイパーリンクの下線を削除するには、スタイルシート CSS を使用する必要があります。当面は CSS...
Docker の基盤技術: Docker の基盤となる 2 つのコア テクノロジーは、名前空間とコ...
序文最近この問題に遭遇するまで、私は UTF-8 が文字セットの問題に対する普遍的な解決策だと考えて...
プロジェクトでは、何らかの不可逆的な理由により、テーブルに保存されたデータがページの表示要件を満たす...