html <div class="スピナー"></div> CS .スピナー{ 幅: 40px; 高さ: 40px; 背景色: #333; マージン: 100px 自動; -webkit-animation: sk-rotateplane 1.2s 無限イーズインアウト; アニメーション: sk-rotateplane 1.2s 無限イーズインアウト; } @-webkit-keyframes sk-rotateplane { 0% { -webkit-transform: パースペクティブ(120px) } 50% { -webkit-transform: perspective(120px) rotateY(180deg) } 100% { -webkit-transform: perspective(120px) rotateY(180deg) rotateX(180deg) } } @keyframes sk-rotateplane { 0% { 変換: perspective(120px) rotateX(0deg) rotateY(0deg); -webkit-transform: 視点(120px) 回転X(0度) 回転Y(0度) } 50% { 変換: 視点(120px)、回転X(-180.1度)、回転Y(0度); -webkit-transform: 視点(120px) 回転X(-180.1度) 回転Y(0度) } 100% { 変換: 視点(120px)、回転X(-180度)、回転Y(-179.9度); -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg); } } 分析: perspective プロパティは、ビューからの 3D 要素の距離を定義します。 html <div class="sk-chase"> <div class="sk-chase-dot"></div> <div class="sk-chase-dot"></div> <div class="sk-chase-dot"></div> <div class="sk-chase-dot"></div> <div class="sk-chase-dot"></div> <div class="sk-chase-dot"></div> </div> CS .sk-チェイス{ 幅: 40px; 高さ: 40px; 位置: 相対的; アニメーション: sk-chase 2.5 秒 無限線形 両方; } .sk-チェイスドット{ 幅: 100%; 高さ: 100%; 位置: 絶対; 左: 0; 上: 0; アニメーション: sk-chase-dot 2.0s 無限のease-in-out 両方; } .sk-chase-dot:before { コンテンツ: ''; 表示: ブロック; 幅: 25%; 高さ: 25%; 背景色: #fff; 境界線の半径: 100%; アニメーション: sk-chase-dot-before 2.0s 無限のease-in-out 両方; } .sk-chase-dot:nth-child(1) { アニメーション遅延: -1.1s; } .sk-chase-dot:nth-child(2) { アニメーション遅延: -1.0s; } .sk-chase-dot:nth-child(3) { アニメーション遅延: -0.9s; } .sk-chase-dot:nth-child(4) { アニメーション遅延: -0.8s; } .sk-chase-dot:nth-child(5) { アニメーション遅延: -0.7s; } .sk-chase-dot:nth-child(6) { アニメーション遅延: -0.6s; } .sk-chase-dot:nth-child(1):before { アニメーション遅延: -1.1s; } .sk-chase-dot:nth-child(2):before { アニメーション遅延: -1.0s; } .sk-chase-dot:nth-child(3):before { アニメーション遅延: -0.9s; } .sk-chase-dot:nth-child(4):before { アニメーション遅延: -0.8s; } .sk-chase-dot:nth-child(5):before { アニメーション遅延: -0.7s; } .sk-chase-dot:nth-child(6):before { アニメーション遅延: -0.6s; } @keyframes sk-chase { 100% { 変換: 回転(360度); } } @keyframes sk-chase-dot { 80%、100% { 変換: 回転(360度); } } @keyframes sk-chase-dot-before { 50% { 変換: スケール(0.4); } 100%、0% { 変換: スケール(1.0); } } 分析: 親要素のdivを定義し、6つの白い点を含め、回転アニメーションを追加し、異なる遅延時間を設定すると、順番に表示される効果が得られます。 html <div class="spinner"> <div class="double-bounce1"></div> <div class="double-bounce2"></div> </div> CS .スピナー{ 幅: 40px; 高さ: 40px; 位置: 相対的; マージン: 100px 自動; } .ダブルバウンス1、.ダブルバウンス2 { 幅: 100%; 高さ: 100%; 境界線の半径: 50%; 背景色: #333; 不透明度: 0.6; 位置: 絶対; 上: 0; 左: 0; -webkit-animation: sk-bounce 2.0s 無限イーズインアウト; アニメーション: sk-bounce 2.0s 無限イーズインアウト; } .ダブルバウンス2 { -webkit アニメーション遅延: -1.0 秒; アニメーション遅延: -1.0秒; } @-webkit-keyframes sk-bounce { 0%、100% { -webkit-transform: スケール(0.0) } 50% { -webkit-transform: スケール(1.0) } } @keyframes sk-バウンス { 0%、100% { 変換: スケール(0.0); -webkit-transform: スケール(0.0); } 50% { 変換: スケール(1.0); -webkit-transform: スケール(1.0); } } 分析: 半透明の円を実現するために、2 つの子 div 要素が使用されています。これらは互いに重なるように絶対配置され、同じアニメーションが異なる遅延時間で交互にズームインとズームアウトするように設定されています。 html <div class="spinner"> <div class="rect1"></div> <div class="rect2"></div> <div class="rect3"></div> <div class="rect4"></div> <div class="rect5"></div> </div> CS .スピナー{ マージン: 100px 自動; 幅: 50px; 高さ: 40px; テキスト配置: 中央; フォントサイズ: 10px; } .spinner > div { 背景色: #333; 高さ: 100%; 幅: 6px; 表示: インラインブロック; -webkit-animation: sk-stretchdelay 1.2s 無限イーズインアウト; アニメーション: sk-stretchdelay 1.2s 無限イーズインアウト; } .スピナー.rect2 { -webkit アニメーション遅延: -1.1 秒; アニメーション遅延: -1.1秒; } .スピナー.rect3 { -webkit アニメーション遅延: -1.0 秒; アニメーション遅延: -1.0秒; } .スピナー.rect4 { -webkit アニメーション遅延: -0.9 秒; アニメーション遅延: -0.9秒; } .スピナー.rect5{ -webkit アニメーション遅延: -0.8 秒; アニメーション遅延: -0.8秒; } @-webkit-keyframes sk-stretchdelay { 0%、40%、100% { -webkit-transform: scaleY(0.4) } 20% { -webkit-transform: スケールY(1.0) } } @keyframes sk-stretchdelay { 0%、40%、100% { 変換: スケールY(0.4); -webkit-transform: スケールY(0.4); } 20% { 変換: スケールY(1.0); -webkit-transform: スケールY(1.0); } } 分析: html <div class="spinner"> <div class="cube1"></div> <div class="cube2"></div> </div> CS .cube1, .cube2 { 背景色: #333; 幅: 15px; 高さ: 15px; 位置: 絶対; 上: 0; 左: 0; -webkit-animation: sk-cubemove 1.8s 無限イーズインアウト; アニメーション: sk-cubemove 1.8 秒 無限イーズインアウト; } .cube2 { -webkit アニメーション遅延: -0.9 秒; アニメーション遅延: -0.9秒; } @-webkit-keyframes sk-cubemove { 25% { -webkit-transform: translateX(42px) rotate(-90deg) scale(0.5) } 50% { -webkit-transform: translateX(42px) translateY(42px) rotate(-180deg) } 75% { -webkit-transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5) } 100% { -webkit-transform: 回転(-360度) } } @keyframes sk-cubemove { 25% { 変換: translateX(42px) rotate(-90deg) scale(0.5); -webkit-transform: translateX(42px) rotate(-90deg) scale(0.5); } 50% { 変換: translateX(42px) translateY(42px) 回転(-179度); -webkit-transform: translateX(42px) translateY(42px) rotate(-179deg); } 50.1% { 変換: translateX(42px) translateY(42px) 回転(-180度); -webkit-transform: translateX(42px) translateY(42px) rotate(-180deg); } 75% { 変換: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5); -webkit-transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5); } 100% { 変換: 回転(-360度); -webkit-transform: 回転(-360度); } } 分析: 2 つのサブ要素が白い四角形を実装し、アニメーション属性を追加し、それぞれ X 軸と Y 軸の移動距離とスケーリングを設定し、異なる遅延時間で分離し、 html <div class="スピナー"></div> CS .スピナー{ 幅: 40px; 高さ: 40px; マージン: 100px 自動; 背景色: #333; 境界線の半径: 100%; -webkit-animation: sk-scaleout 1.0s 無限イーズインアウト; アニメーション: sk-scaleout 1.0s 無限イーズインアウト; } @-webkit-keyframes sk-scaleout { 0% { -webkit-transform: スケール(0) } 100% { -webkit-transform: スケール(1.0); 不透明度: 0; } } @keyframes sk-scaleout { 0% { -webkit-transform: スケール(0); 変換: スケール(0); } 100% { -webkit-transform: スケール(1.0); 変換: スケール(1.0); 不透明度: 0; } } 分析: html <div class="spinner"> <div class="dot1"></div> <div class="dot2"></div> </div> CS .スピナー{ マージン: 100px 自動; 幅: 40px; 高さ: 40px; 位置: 相対的; テキスト配置: 中央; -webkit-animation: sk-rotate 2.0s 無限線形; アニメーション: sk-rotate 2.0s 無限線形; } .dot1、.dot2 { 幅: 60%; 高さ: 60%; 表示: インラインブロック; 位置: 絶対; 上: 0; 背景色: #333; 境界線の半径: 100%; -webkit-animation: sk-bounce 2.0s 無限イーズインアウト; アニメーション: sk-bounce 2.0s 無限イーズインアウト; } .dot2 { 上:自動; 下部: 0; -webkit アニメーション遅延: -1.0 秒; アニメーション遅延: -1.0秒; } @-webkit-keyframes sk-rotate { 100% { -webkit-transform: rotate(360deg) }} @keyframes sk-rotate { 100% { transform: rotate(360deg); -webkit-transform: rotate(360deg) }} @-webkit-keyframes sk-bounce { 0%、100% { -webkit-transform: スケール(0.0) } 50% { -webkit-transform: スケール(1.0) } } @keyframes sk-バウンス { 0%、100% { 変換: スケール(0.0); -webkit-transform: スケール(0.0); } 50% { 変換: スケール(1.0); -webkit-transform: スケール(1.0); } } 分析: 2 つの実線の円は、中心の周りを円形にスケーリングおよび回転する動作を実行しますが、遅延時間が異なるため、同時に反対のパフォーマンスを示します。 html <div class="spinner"> <div class="bounce1"></div> <div class="bounce2"></div> <div class="bounce3"></div> </div> CS .スピナー{ マージン: 100px 自動 0; 幅: 70ピクセル; テキスト配置: 中央; } .spinner > div { 幅: 18px; 高さ: 18px; 背景色: #333; 境界線の半径: 100%; 表示: インラインブロック; -webkit-animation: sk-bouncedelay 1.4s 無限のease-in-out 両方; アニメーション: sk-bouncedelay 1.4s 無限のease-in-out 両方; } .スピナー .バウンス1 { -webkit アニメーション遅延: -0.32 秒; アニメーション遅延: -0.32秒; } .スピナー .バウンス2 { -webkit アニメーション遅延: -0.16 秒; アニメーション遅延: -0.16秒; } @-webkit-keyframes sk-bouncedelay { 0%、80%、100% { -webkit-transform: scale(0) } 40% { -webkit-transform: スケール(1.0) } } @keyframes sk-バウンス遅延 { 0%、80%、100% { -webkit-transform: スケール(0); 変換: スケール(0); } 40% { -webkit-transform: スケール(1.0); 変換: スケール(1.0); } } 分析: 3 つの単色の円が水平に配置され、線形アニメーション html <div class="sk-circle"> <div class="sk-circle1 sk-child"></div> <div class="sk-circle2 sk-child"></div> <div class="sk-circle3 sk-child"></div> <div class="sk-circle4 sk-child"></div> <div class="sk-circle5 sk-child"></div> <div class="sk-circle6 sk-child"></div> <div class="sk-circle7 sk-child"></div> <div class="sk-circle8 sk-child"></div> <div class="sk-circle9 sk-child"></div> <div class="sk-circle10 sk-child"></div> <div class="sk-circle11 sk-child"></div> <div class="sk-circle12 sk-child"></div> </div> CS .sk-circle { マージン: 100px 自動; 幅: 40px; 高さ: 40px; 位置: 相対的; } .sk-circle .sk-child { 幅: 100%; 高さ: 100%; 位置: 絶対; 左: 0; 上: 0; } .sk-circle .sk-child:before { コンテンツ: ''; 表示: ブロック; マージン: 0 自動; 幅: 15%; 高さ: 15%; 背景色: #333; 境界線の半径: 100%; -webkit-animation: sk-circleBounceDelay 1.2s 無限のease-in-out 両方; アニメーション: sk-circleBounceDelay 1.2s 無限のイーズインアウト 両方; } .sk-circle .sk-circle2 { -webkit-transform: 回転(30度); -ms-transform:回転(30度); 変換: 回転(30度) } .sk-circle .sk-circle3 { -webkit-transform: 回転(60度); -ms-transform:回転(60度); 変換: 回転(60度) } .sk-circle .sk-circle4 { -webkit-transform: 回転(90度)。 -ms-transform:回転(90度); 変換: 回転(90度) } .sk-circle .sk-circle5 { -webkit-transform: 回転(120度); -ms-transform:回転(120度); 変換: 回転(120度) } .sk-circle .sk-circle6 { -webkit-transform: 回転(150度); -ms-transform:回転(150度); 変換: 回転(150度); } .sk-circle .sk-circle7 { -webkit-transform: 回転(180度); -ms-transform:回転(180度); 変換: 回転(180度) } .sk-circle .sk-circle8 { -webkit-transform:回転(210度); -ms-transform:回転(210度); 変換: 回転(210度) } .sk-circle .sk-circle9 { -webkit-transform: 回転(240度)。 -ms-transform:回転(240度); 変換: 回転(240度) } .sk-circle .sk-circle10 { -webkit-transform: 回転(270度)。 -ms-transform:回転(270度); 変換: 回転(270度) } .sk-circle .sk-circle11 { -webkit-transform: 回転(300度)。 -ms-transform:回転(300度); 変換: 回転(300度) } .sk-circle .sk-circle12 { -webkit-transform: 回転(330度); -ms-transform:回転(330度); 変換: 回転(330度) } .sk-circle .sk-circle2:前 { -webkit アニメーション遅延: -1.1 秒; アニメーション遅延: -1.1秒; } .sk-circle .sk-circle3:before { -webkit アニメーション遅延: -1 秒; アニメーション遅延: -1s; } .sk-circle .sk-circle4:前 { -webkit アニメーション遅延: -0.9 秒; アニメーション遅延: -0.9秒; } .sk-circle .sk-circle5:前 { -webkit アニメーション遅延: -0.8 秒; アニメーション遅延: -0.8秒; } .sk-circle .sk-circle6:前 { -webkit アニメーション遅延: -0.7 秒; アニメーション遅延: -0.7秒; } .sk-circle .sk-circle7:前 { -webkit アニメーション遅延: -0.6 秒; アニメーション遅延: -0.6秒; } .sk-circle .sk-circle8:前 { -webkit アニメーション遅延: -0.5 秒; アニメーション遅延: -0.5秒; } .sk-circle .sk-circle9:前 { -webkit アニメーション遅延: -0.4 秒; アニメーション遅延: -0.4秒; } .sk-circle .sk-circle10:前 { -webkit アニメーション遅延: -0.3 秒; アニメーション遅延: -0.3秒; } .sk-circle .sk-circle11:前 { -webkit アニメーション遅延: -0.2 秒; アニメーション遅延: -0.2秒; } .sk-circle .sk-circle12:前 { -webkit アニメーション遅延: -0.1 秒; アニメーション遅延: -0.1秒; } @-webkit-keyframes sk-circleBounceDelay { 0%、80%、100% { -webkit-transform: スケール(0); 変換: スケール(0); } 40% { -webkit-transform: スケール(1); 変換: スケール(1); } } @keyframes sk-circleBounceDelay { 0%、80%、100% { -webkit-transform: スケール(0); 変換: スケール(0); } 40% { -webkit-transform: スケール(1); 変換: スケール(1); } } 分析: 全体のローディング効果は 12 個の円の中心で構成されています。円形に見えるようにさまざまな回転が設定され、スケールを調整するためにさまざまな遅延時間が設定されます。 html <div class="sk-cube-grid"> <div class="sk-cube sk-cube1"></div> <div class="sk-cube sk-cube2"></div> <div class="sk-cube sk-cube3"></div> <div class="sk-cube sk-cube4"></div> <div class="sk-cube sk-cube5"></div> <div class="sk-cube sk-cube6"></div> <div class="sk-cube sk-cube7"></div> <div class="sk-cube sk-cube8"></div> <div class="sk-cube sk-cube9"></div> </div> CS .sk-キューブグリッド{ 幅: 40px; 高さ: 40px; マージン: 100px 自動; } .sk-キューブグリッド .sk-キューブ { 幅: 33%; 高さ: 33%; 背景色: #333; フロート: 左; -webkit-animation: sk-cubeGridScaleDelay 1.3 秒、無限のイーズインアウト; アニメーション: sk-cubeGridScaleDelay 1.3 秒、無限のイーズインアウト; } .sk-キューブグリッド .sk-キューブ1 { -webkit アニメーション遅延: 0.2 秒; アニメーション遅延: 0.2秒; } .sk-キューブグリッド .sk-キューブ2 { -webkit アニメーション遅延: 0.3 秒; アニメーション遅延: 0.3秒; } .sk-キューブグリッド .sk-キューブ3 { -webkit アニメーション遅延: 0.4 秒; アニメーション遅延: 0.4秒; } .sk-キューブグリッド .sk-キューブ4 { -webkit-アニメーション遅延: 0.1秒; アニメーション遅延: 0.1秒; } .sk-キューブグリッド .sk-キューブ5 { -webkit アニメーション遅延: 0.2 秒; アニメーション遅延: 0.2秒; } .sk-キューブグリッド .sk-キューブ6 { -webkit アニメーション遅延: 0.3 秒; アニメーション遅延: 0.3秒; } .sk-キューブグリッド .sk-キューブ7 { -webkit-アニメーション遅延: 0秒; アニメーション遅延: 0秒; } .sk-キューブグリッド .sk-キューブ8 { -webkit アニメーション遅延: 0.1 秒; アニメーション遅延: 0.1秒; } .sk-キューブグリッド .sk-キューブ9 { -webkit アニメーション遅延: 0.2 秒; アニメーション遅延: 0.2秒; } @-webkit-keyframes sk-cubeGridScaleDelay { 0%、70%、100% { -webkit-transform: scale3D(1, 1, 1); 変換: scale3D(1, 1, 1); } 35% { -webkit-transform: scale3D(0, 0, 1); 変換: scale3D(0, 0, 1); } } @keyframes sk-cubeGridScaleDelay { 0%、70%、100% { -webkit-transform: scale3D(1, 1, 1); 変換: scale3D(1, 1, 1); } 35% { -webkit-transform: scale3D(0, 0, 1); 変換: scale3D(0, 0, 1); } } 分析: 9 つのブロックが html <div class="sk-fading-circle"> <div class="sk-circle1 sk-circle"></div> <div class="sk-circle2 sk-circle"></div> <div class="sk-circle3 sk-circle"></div> <div class="sk-circle4 sk-circle"></div> <div class="sk-circle5 sk-circle"></div> <div class="sk-circle6 sk-circle"></div> <div class="sk-circle7 sk-circle"></div> <div class="sk-circle8 sk-circle"></div> <div class="sk-circle9 sk-circle"></div> <div class="sk-circle10 sk-circle"></div> <div class="sk-circle11 sk-circle"></div> <div class="sk-circle12 sk-circle"></div> </div> CS .sk-フェーディングサークル{ マージン: 100px 自動; 幅: 40px; 高さ: 40px; 位置: 相対的; } .sk-フェーディングサークル .sk-サークル { 幅: 100%; 高さ: 100%; 位置: 絶対; 左: 0; 上: 0; } .sk-フェーディングサークル .sk-circle:before { コンテンツ: ''; 表示: ブロック; マージン: 0 自動; 幅: 15%; 高さ: 15%; 背景色: #333; 境界線の半径: 100%; -webkit-animation: sk-circleFadeDelay 1.2s 無限のease-in-out 両方; アニメーション: sk-circleFadeDelay 1.2s 無限のイーズインアウト 両方; } .sk-フェーディングサークル .sk-circle2 { -webkit-transform: 回転(30度); -ms-transform:回転(30度); 変換: 回転(30度); } .sk-フェーディングサークル .sk-circle3 { -webkit-transform: 回転(60度); -ms-transform:回転(60度); 変換: 回転(60度); } .sk-フェーディングサークル .sk-circle4 { -webkit-transform: 回転(90度)。 -ms-transform:回転(90度); 変換: 回転(90度); } .sk-フェーディングサークル .sk-circle5 { -webkit-transform: 回転(120度); -ms-transform:回転(120度); 変換: 回転(120度); } .sk-フェーディングサークル .sk-circle6 { -webkit-transform: 回転(150度); -ms-transform:回転(150度); 変換: 回転(150度); } .sk-フェーディングサークル .sk-circle7 { -webkit-transform: 回転(180度); -ms-transform:回転(180度); 変換: 回転(180度); } .sk-フェーディングサークル .sk-circle8 { -webkit-transform:回転(210度); -ms-transform:回転(210度); 変換: 回転(210度); } .sk-フェーディングサークル .sk-circle9 { -webkit-transform: 回転(240度)。 -ms-transform:回転(240度); 変換: 回転(240度); } .sk-フェーディングサークル .sk-circle10 { -webkit-transform: 回転(270度)。 -ms-transform:回転(270度); 変換: 回転(270度); } .sk-フェーディングサークル .sk-circle11 { -webkit-transform: 回転(300度)。 -ms-transform:回転(300度); 変換: 回転(300度); } .sk-フェーディングサークル .sk-circle12 { -webkit-transform: 回転(330度); -ms-transform:回転(330度); 変換: 回転(330度); } .sk-フェーディングサークル .sk-circle2:before { -webkit アニメーション遅延: -1.1 秒; アニメーション遅延: -1.1秒; } .sk-フェーディングサークル .sk-circle3:before { -webkit アニメーション遅延: -1 秒; アニメーション遅延: -1秒; } .sk-フェーディングサークル .sk-circle4:before { -webkit アニメーション遅延: -0.9 秒; アニメーション遅延: -0.9秒; } .sk-フェーディングサークル .sk-circle5:before { -webkit アニメーション遅延: -0.8 秒; アニメーション遅延: -0.8秒; } .sk-フェーディングサークル .sk-circle6:before { -webkit アニメーション遅延: -0.7 秒; アニメーション遅延: -0.7秒; } .sk-フェーディングサークル .sk-circle7:before { -webkit アニメーション遅延: -0.6 秒; アニメーション遅延: -0.6秒; } .sk-フェーディングサークル .sk-circle8:before { -webkit アニメーション遅延: -0.5 秒; アニメーション遅延: -0.5秒; } .sk-フェーディングサークル .sk-circle9:before { -webkit アニメーション遅延: -0.4 秒; アニメーション遅延: -0.4秒; } .sk-フェーディングサークル .sk-circle10:before { -webkit アニメーション遅延: -0.3 秒; アニメーション遅延: -0.3秒; } .sk-フェーディングサークル .sk-circle11:before { -webkit アニメーション遅延: -0.2 秒; アニメーション遅延: -0.2秒; } .sk-フェーディングサークル .sk-circle12:before { -webkit アニメーション遅延: -0.1 秒; アニメーション遅延: -0.1秒; } @-webkit-keyframes sk-circleFadeDelay { 0%、39%、100% { 不透明度: 0; } 40% { 不透明度: 1; } } @keyframes sk-circleFadeDelay { 0%、39%、100% { 不透明度: 0; } 40% { 不透明度: 1; } } 分析: 読み込みアニメーションは、360 度に広がる 12 個の単色のドットで構成され、順番に回転して透明度が変化します。 html <div class="sk-folding-cube"> <div class="sk-cube1 sk-cube"></div> <div class="sk-cube2 sk-cube"></div> <div class="sk-cube4 sk-cube"></div> <div class="sk-cube3 sk-cube"></div> </div> CS .sk-折りたたみキューブ{ マージン: 20px 自動; 幅: 40px; 高さ: 40px; 位置: 相対的; -webkit-transform:rotateZ(45度); 変換: rotateZ(45deg); } .sk-折りたたみキューブ .sk-キューブ { フロート: 左; 幅: 50%; 高さ: 50%; 位置: 相対的; -webkit-transform: スケール(1.1); スケールを1.1に変更します。 変換: スケール(1.1); } .sk-折りたたみキューブ .sk-cube:before { コンテンツ: ''; 位置: 絶対; 上: 0; 左: 0; 幅: 100%; 高さ: 100%; 背景色: #333; -webkit-animation: sk-foldCubeAngle 2.4s 無限線形両方; アニメーション: sk-foldCubeAngle 2.4 秒 無限線形 両方; -webkit-transform-origin: 100% 100%; 変換の原点を 100% に設定します。 変換の原点: 100% 100%; } .sk-折りたたみキューブ .sk-キューブ2 { -webkit-transform: スケール(1.1)、Z軸回転(90度)。 変換: スケール(1.1)、Z軸回転(90度); } .sk-折りたたみキューブ .sk-cube3 { -webkit-transform: スケール(1.1)、Z軸回転(180度)。 変換: スケール(1.1)、Z軸回転(180度)。 } .sk-折りたたみキューブ .sk-cube4 { -webkit-transform: スケール(1.1)、Z軸回転(270度)。 変換: スケール(1.1)、Z軸回転(270度)。 } .sk-折りたたみキューブ .sk-cube2:before { -webkit アニメーション遅延: 0.3 秒; アニメーション遅延: 0.3秒; } .sk-折りたたみキューブ .sk-cube3:before { -webkit アニメーション遅延: 0.6 秒; アニメーション遅延: 0.6秒; } .sk-折りたたみキューブ .sk-cube4:before { -webkit アニメーション遅延: 0.9 秒; アニメーション遅延: 0.9秒; } @-webkit-keyframes sk-foldCubeAngle { 0%、10% { -webkit-transform: perspective(140px) rotateX(-180deg); 変換: 視点(140px) 回転X(-180deg); 不透明度: 0; } 25%、75% { -webkit-transform: perspective(140px) rotateX(0deg); 変換: 視点(140px) 回転X(0deg); 不透明度: 1; } 90%、100% { -webkit-transform: perspective(140px) rotateY(180deg); 変換: 視点(140px) Y方向回転(180度); 不透明度: 0; } } @keyframes sk-foldCubeAngle { 0%、10% { -webkit-transform: perspective(140px) rotateX(-180deg); 変換: 視点(140px) 回転X(-180deg); 不透明度: 0; } 25%、75% { -webkit-transform: perspective(140px) rotateX(0deg); 変換: 視点(140px) 回転X(0deg); 不透明度: 1; } 90%、100% { -webkit-transform: perspective(140px) rotateY(180deg); 変換: 視点(140px) Y方向回転(180度); 不透明度: 0; } } 分析: 4 つの正三角形のブロックが正方形を形成し、45 度回転します。次に、各ブロックを異なる遅延時間で X 軸に沿って反転します。 結論: 上記のケースの原則は、異なる遅延時間を設定し、X、Y、Z 軸上で要素またはサブ要素を移動および回転し、スケーリングすることによってアニメーション効果を実現することです。これらの参照と創造性により、より多くのタイプ読み込み効果を作成できます。 CSS を使用してさまざまな Loading エフェクトを実現する方法とそれに伴う解析プロセスに関するこの記事はこれで終わりです。CSS を使用してさまざまな Loading エフェクトを実現する方法に関するより関連性の高いコンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。 |
<<: JS を使用して HTML で回転するクリスマスツリーを実装する
>>: MySQL でよく使用されるデータベースとテーブル シャーディング ソリューションの概要
私たちのコンピューターには、ディレクトリ、写真、ソース コードなどのファイルが保存されています。たく...
1. クエリプロセスプロセスリストを表示2. 対応するプロセスを照会し、IDを強制終了します。検証(...
導入: Nginx (エンジン エックスと同じ発音) は、BSD のようなプロトコルに基づいてリリー...
1. Tclスクリプトファイルcircle.tclコードコメント #シミュレーションに必要なプロパテ...
おすすめの読み物: Navicat12.1シリーズのクラッキングとアクティベーションのチュートリアル...
導入MySQL 5.7 は、SSL/TLS と全体的なセキュリティ開発におけるいくつかの重要な変更に...
ローカルでコンテナを作成した後、このコンテナに基づいてローカル イメージを作成し、このイメージを D...
導入圧縮トランスポート プロトコル、圧縮列ソリューション、圧縮テーブル ソリューションなど、MySQ...
MySQL では、REVOKE ステートメントを使用してユーザーの特定の権限を削除できます (ユーザ...
MySQL ウィンドウ関数の紹介MySQL は MySQL 8.0 以降、ウィンドウ関数をサポートし...
序文最近、私は小さな個人ブログ プロジェクトを書くのに忙しくしています。 「グローバル検索」機能を実...
1. 概要MySQL バージョン: 5.6.21ダウンロードアドレス: https://dev.my...
1. スロークエリの用途は何ですか? long_query_time を超えて実行されるすべての S...
計算されたプロパティ場合によっては、テンプレートにロジックを詰め込みすぎると、テンプレートが重くなり...
Centos7はyumを使用してMySQLをインストールし、リモート接続を実現する方法です。MySQ...