効果 html <本文> <div class="content"> <h3>CSS3 読み込みアニメーション</h3> <div class="load-wrapp"> <div class="load-1"> <p>読み込み中 1</p> <div class="line"></div> <div class="line"></div> <div class="line"></div> </div> </div> <div class="load-wrapp"> <div class="load-2"> <p>読み込み中 2</p> <div class="line"></div> <div class="line"></div> <div class="line"></div> </div> </div> <div class="load-wrapp"> <div class="load-3"> <p>読み込み中 3</p> <div class="line"></div> <div class="line"></div> <div class="line"></div> </div> </div> <div class="load-wrapp"> <!-- 境界半径と「破線」スタイルのため、Firefox では 4 の読み込みは機能しません。 --> <div class="load-4"> <p>読み込み中 4</p> <div class="ring-1"></div> </div> </div> <div class="load-wrapp"> <div class="load-5"> <p>5 を読み込んでいます</p> <div class="ring-2"> <div class="ボールホルダー"> <div class="ボール"></div> </div> </div> </div> </div> <div class="load-wrapp"> <div class="load-6"> <p>6 を読み込んでいます</p> <div class="letter-holder"> <div class="l-1 文字">L</div> <div class="l-2 letter">あ</div> <div class="l-3 letter">あ</div> <div class="l-4 letter">d</div> <div class="l-5 letter">私</div> <div class="l-6 letter">ん</div> <div class="l-7 letter">グ</div> <div class="l-8 letter">.</div> <div class="l-9 letter">.</div> <div class="l-10 letter">.</div> </div> </div> </div> <div class="load-wrapp"> <div class="load-7"> <p>7 を読み込んでいます</p> <div class="square-holder"> <div class="square"></div> </div> </div> </div> <div class="load-wrapp"> <div class="load-8"> <p>読み込み中 8</p> <div class="line"></div> </div> </div> <div class="load-wrapp"> <div class="load-9"> <p>読み込み中 9</p> <div class="spinner"> <div class="bubble-1"></div> <div class="bubble-2"></div> </div> </div> </div> <div class="load-wrapp"> <div class="load-10"> <p>10 を読み込んでいます</p> <div class="bar"></div> </div> </div> </div> <div class="clear"></div> </本文> CSS3 /* ----------------------------------------- =デモをより美しくするためのデフォルトのCSS -------------------------------------------- */ 体 { マージン: 0 自動; パディング: 20px; 最大幅: 1200px; overflow-y: スクロール; フォントファミリ: "Open Sans"、サンセリフ; フォントの太さ: 400; 色: #777; 背景色: #f7f7f7; -webkit-font-smoothing: アンチエイリアス; -webkit-テキストサイズ調整: 100%; -ms-テキストサイズ調整: 100%; } 。コンテンツ { パディング: 15px; オーバーフロー: 非表示; 背景色: #e7e7e7; 背景色: rgba(0, 0, 0, 0.06); } h1 { パディング下部: 15px; 下境界線: 1px 実線 #d8d8d8; フォントの太さ: 600; } h1 スパン { フォントファミリー: 等幅、セリフ; } h3 { パディング下部: 20px; ボックスの影: 0 1px 0 rgba(0, 0, 0, 0.1), 0 2px 0 rgba(255, 255, 255, 0.9); } p { マージン: 0; パディング: 10px 0; 色: #777; } 。クリア { クリア: 両方; } /* ----------------------------------------- =CSS3 読み込みアニメーション -------------------------------------------- */ /* =要素のスタイル ---------------------- */ .load-wrapp { フロート: 左; 幅: 100ピクセル; 高さ: 100px; マージン: 0 10px 10px 0; パディング: 20px 20px 20px; 境界線の半径: 5px; テキスト配置: 中央; 背景色: #d8d8d8; } .load-wrapp p { パディング: 0 0 20px; } .load-wrapp:最後の子{ 右マージン: 0; } 。ライン { 表示: インラインブロック; 幅: 15px; 高さ: 15px; 境界線の半径: 15px; 背景色: #4b9cdb; } .リング-1 { 幅: 10px; 高さ: 10px; マージン: 0 自動; パディング: 10px; 境界線: 7px 破線 #4b9cdb; 境界線の半径: 100%; } .リング-2 { 位置: 相対的; 幅: 45px; 高さ: 45px; マージン: 0 自動; 境界線: 4px実線 #4b9cdb; 境界線の半径: 100%; } .ボールホルダー{ 位置: 絶対; 幅: 12px; 高さ: 45px; 左: 17px; 上: 0px; } 。ボール { 位置: 絶対; 上: -11px; 左: 0; 幅: 16px; 高さ: 16px; 境界線の半径: 100%; 背景: #4282b3; } .letter-holder { パディング: 16px; } 。手紙 { フロート: 左; フォントサイズ: 14px; 色: #777; } 。四角 { 幅: 12px; 高さ: 12px; 境界線の半径: 4px; 背景色: #4b9cdb; } .スピナー{ 位置: 相対的; 幅: 45px; 高さ: 45px; マージン: 0 自動; } .バブル-1, .バブル-2 { 位置: 絶対; 上: 0; 幅: 25px; 高さ: 25px; 境界線の半径: 100%; 背景色: #4b9cdb; } .バブル-2 { 上:自動; 下部: 0; } 。バー { フロート: 左; 幅: 15px; 高さ: 6px; 境界線の半径: 2px; 背景色: #4b9cdb; } /* =アニメーション化 ------------------------ */ .load-1 .line:n番目の最後の子(1) { アニメーション: loadingA 1.5秒 1秒 無限; } .load-1 .line:n番目の最後の子(2) { アニメーション: loadingA 1.5秒 0.5秒 無限; } .load-1 .line:n番目の最後の子(3) { アニメーション: loadingA 1.5s 0s 無限; } .load-2 .line:n番目の最後の子(1) { アニメーション: loadingB 1.5秒 1秒 無限; } .load-2 .line:n番目の最後の子(2) { アニメーション: loadingB 1.5秒 0.5秒 無限; } .load-2 .line:n番目の最後の子(3) { アニメーション: loadingB 1.5s 0s 無限; } .load-3 .line:n番目の最後の子(1) { アニメーション: loadingC 0.6s 0.1s 線形無限; } .load-3 .line:n番目の最後の子(2) { アニメーション: loadingC 0.6s 0.2s 線形無限; } .load-3 .line:n番目の最後の子(3) { アニメーション: loadingC 0.6s 0.3s 線形無限; } .load-4 .ring-1 { アニメーション: loadingD 1.5s 0.3s cubic-bezier(0.17, 0.37, 0.43, 0.67) 無限; } .load-5 .ball-holder { アニメーション: loadingE 1.3s 線形無限; } .load-6 .letter { アニメーション名: loadingF; アニメーション期間: 1.6秒; アニメーションの反復回数: 無限; アニメーション方向: 線形; } .l-1 { アニメーション遅延: 0.48秒; } .l-2 { アニメーション遅延: 0.6秒; } .l-3 { アニメーション遅延: 0.72秒; } .l-4 { アニメーション遅延: 0.84秒; } .l-5 { アニメーション遅延: 0.96秒; } .l-6 { アニメーション遅延: 1.08秒; } .l-7 { アニメーション遅延: 1.2秒; } .l-8 { アニメーション遅延: 1.32秒; } .l-9 { アニメーション遅延: 1.44秒; } .l-10 { アニメーション遅延: 1.56秒; } .load-7 .square { アニメーション: loadingG 1.5s cubic-bezier(0.17, 0.37, 0.43, 0.67) 無限大; } .load-8 .line { アニメーション: loadingH 1.5s cubic-bezier(0.17, 0.37, 0.43, 0.67) 無限大; } .load-9 .スピナー { アニメーション: loadingI 2s linear infinite; } .load-9 .bubble-1, .load-9 .bubble-2 { アニメーション: バウンス 2 秒、イーズイン アウト 無限; } .load-9 .bubble-2 { アニメーション遅延: -1秒; } .load-10 .bar { アニメーション: loadingJ 2s cubic-bezier(0.17, 0.37, 0.43, 0.67) 無限大; } @keyframes 読み込みA { 0 { 高さ: 15px; } 50% { 高さ: 35px; } 100% { 高さ: 15px; } } @keyframes 読み込みB { 0 { 幅: 15px; } 50% { 幅: 35px; } 100% { 幅: 15px; } } @keyframes 読み込みC { 0 { 変換: translate(0, 0); } 50% { 変換: translate(0, 15px); } 100% { 変換: translate(0, 0); } } @keyframes 読み込みD { 0 { 変換: 回転(0度); } 50% { 変換: 回転(180度); } 100% { 変換: 回転(360度); } } @keyframes 読み込みE { 0 { 変換: 回転(0度); } 100% { 変換: 回転(360度); } } @keyframes 読み込みF { 0% { 不透明度: 0; } 100% { 不透明度: 1; } } @keyframes 読み込みG { 0% { 変換: translate(0, 0) rotate(0deg); } 50% { 変換: translate(70px, 0) rotate(360deg); } 100% { 変換: translate(0, 0) rotate(0deg); } } @keyframes 読み込みH { 0% { 幅: 15px; } 50% { 幅: 35px; パディング: 4px; } 100% { 幅: 15px; } } @keyframes 読み込み中I { 100% { 変換: 回転(360度); } } @keyframes バウンス { 0%、 100% { 変換: スケール(0); } 50% { 変換: スケール(1); } } @keyframes 読み込みJ { 0%、 100% { 変換: translate(0, 0); } 50% { 変換: translate(80px, 0); 背景色: #f5634a; 幅: 25px; } } 上記は CSS3 で実装された 10 個の読み込みアニメーションです。 1 つ選んで実行してください。 CSS3 読み込みアニメーションの詳細については、123WORDPRESS.COM の他の関連記事にも注目してください。 |
>>: HTML のインラインブロックの空白を素早く削除する 5 つの方法
MySQLをインストールした後、ターミナルでmysql -u root -pと入力してEnterを押...
目次レムフォルクスワーゲンサードパーティのUIフレームワークに適応する結論モバイル開発における最も一...
インストール手順1. Redisをインストールするdocker search redis和docke...
この記事では、パーセンテージスコアリングプログレスバーを実現するためのjQueryの具体的なコードを...
この記事では、参考までに、Vue の具体的なコードで簡単な計算機を実装する方法を紹介します。具体的な...
Linuxインスタンスでシステムディスクを初期化した後、データディスクを再マウントするLinux イ...
この記事では、WeChatアプレットの具体的なコードを参考までに共有します。具体的な内容は次のとおり...
zabbix_agent のデプロイメント:推奨事項: zabbix_agent は docker-...
background-image は、おそらくすべてのフロントエンド開発者がキャリアの中で少なくとも...
今日も私のページが文字化けしていたので、インターネットで関連する問題を検索しました。この方法はかなり...
<canvas> 要素は、クライアント側のベクター グラフィックス用に設計されています。...
Black Duck の 2017 年のオープンソース調査では、回答者の 77% がオープンソース...
この記事の目的は、最も明確な構造を使用していくつかのコンポーネントの基本機能を実装することです。皆さ...
Nginx の紹介Nginx (「エンジン x」) は、ロシアのプログラマー Igor Sysoev...
目次1. バブルソートとは何か2. 例を挙げるラウンド1:第2ラウンド:第3ラウンド:第4ラウンド:...