効果プレビュー 右側の「クリックしてプレビュー」ボタンを押すと現在のページでプレビューが表示され、リンクをクリックすると全画面でプレビューされます。 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 HTML <html> -- 開始タグ<ヘッド>ウェブページ上の...
私はずっとキャッシュについて学びたいと思っていました。結局のところ、キャッシュはフロントエンドのパフ...
進捗バーを実装するためのJavaScriptの具体的なコードは参考までに。具体的な内容は次のとおりで...
1. アクセス頻度、同時接続、ダウンロード速度を制限するために使用されるモジュールと命令の概要ngx...
この記事は「Attribution 4.0 International (CC BY 4.0)」ライ...
translate(-50%,-50%) 属性:中央に配置するには、長さと幅の 50% だけ上と左...
1. Apacheサーバーのインストールと設定yum インストール httpd -y systemc...
目次1. 背景2. ローカルカスタム指示3. グローバルカスタム指示4.1 カスタムコマンドフック関...
insとdel は、HTML 4.0 で導入され、文書の作成時に作成者が共同作業できるようにし、また...
公式サイトからダウンロード: https://www.mysql.com MySQLの公式サイトにア...
目次1. インストール要件2. OSイメージのダウンロード3. VMware Workstation...
上記の Web ページをデザインします。 <!DOCTYPE html> <htm...
まず、Windows 64 ビット用の最新の MySQL 5.7.17 コミュニティ圧縮バージョンを...
1. デザインの方向性を明確にする<br />まず、どのユーザーを対象にデザインするのか...
以下はcentos7での設定方法ですsystemc ソース パッケージをダウンロード: System...