私はさまざまなインターフェース要素を思いつくのが好きで、かつてはプリローダーを作りたかったのです。
それを実装するには、次のマークアップが必要でした。
<div class="preloader"></div>
私の考えでは、プリローダーは2つの正方形で構成されています。サイズが60x60pxの大きな正方形と、15x15pxの小さな正方形です。
大きな正方形は小さな正方形の輪郭であるため、div .prealoder要素を使用して実装しました。 しかし、囲まれた正方形の場合、before疑似要素が必要でした。
.preloader { width: 60px; height: 60px; border: 2px solid #fff; position: relative; } .preloader::before { content: ""; width: 15px; height: 15px; background-color: #fff; position: absolute; top: calc(50% - 7.5px); left: calc(50% - 7.5px); }
アニメーション用に、次のスクリプトを作成しました。
.preloader::before { animation: preloader 2.25s ease-out both infinite; } @keyframes preloader { 0%, 10%, 90%, 100% { transform: translate3d(0, 0, 0) scale(0); } 20%, 70% { transform: translate3d(0, 0, 0) scale(1); } 30% { transform: translate3d(-15px, -15px, 0) scale(1); } 40% { transform: translate3d(15px, -15px, 0) scale(1); } 50% { transform: translate3d(15px, 15px, 0) scale(1); } 60% { transform: translate3d(-15px, 15px, 0) scale(1); } }
メインディスプレイに加えて、輪郭120x120pxおよび内側の正方形30x30pxの寸法のプリローダーを追加したかった。
.preloader_l { width: 120px; height: 120px; } .preloader_l::before { width: 30px; height: 30px; top: calc(50% - 15px); left: calc(50% - 15px); animation-name: preloader-l; } @keyframes preloader-l { 0%, 10%, 90%, 100% { transform: translate3d(0, 0, 0) scale(0); } 20%, 70% { transform: translate3d(0, 0, 0) scale(1); } 30% { transform: translate3d(-30px, -30px, 0) scale(1); } 40% { transform: translate3d(30px, -30px, 0) scale(1); } 50% { transform: translate3d(30px, 30px, 0) scale(1); } 60% { transform: translate3d(-30px, 30px, 0) scale(1); } }
すべてが計画通りになりました。 私はお茶を飲みに行きましたが、別のサイズを追加する必要がある場合、サイズ（幅と高さ）、位置（上と左）、およびアニメーションスクリプトを再度指定する必要があると思いました。
これを修正するために、測定単位emを使用します。 これを使用して、すべてのプロパティ値を単一のフォントサイズ値にバインドし、プリローダーのサイズを切り替えることができます。
その結果、コードは次のように変更されます。
/* Xem Xpx em px. */ .preloader { width: Xem; height: Xem; font-size: Xpx; } .preloader::before { width: Xem; height: Xem; animation: preloader 2.25s ease-out both infinite; } @keyframes preloader { 0%, 10%, 90%, 100% { transform: translate3d(0, 0, 0) scale(0); } 20%, 70% { transform: translate3d(0, 0, 0) scale(1); } 30% { transform: translate3d(-Xem, -Xem, 0) scale(1); } 40% { transform: translate3d(Xem, -Xem, 0) scale(1); } 50% { transform: translate3d(Xem, Xem, 0) scale(1); } 60% { transform: translate3d(-Xem, Xem, 0) scale(1); } } .preloader_l { font-size: Xpx; }
解決策
問題を解決するには、em計算式が役立ちます。
Vem = Vpx / Fs
Vpxは、以前に設定されたpxの値です。 Fsの値は、Vpxの値を分割するのに便利な一致した数値です。
これで、次のプロパティの計算を開始できます。
.preloader { width: 60px; height: 60px; } .preloader::before { width: 15px; height: 15px; top: calc(50% - 7.5px); left: calc(50% - 7.5px); }
これを行うには、font-size値を選択します。 私の考えによれば、このプロパティはアウトラインのサイズを設定するので、幅と高さに現在設定されているのと同じ値を使用するのが論理的です。
Width(em) = 60px / 60px = 1em Height(em) = 60px / 60px = 1em
.preloader { width: 1em; height: 1em; font-size: 60px; }
次に、要素の前にある.preloader ::の幅、高さ、上下の値を計算します。 これを行うには、.preloader要素のfont-sizeから継承されるため、font-size値を選択する必要がなくなりました。
Width(em) = 15px / 60px = 0.25em Height(em) = 15px / 60px = 0.25em Top(em) = 7.5px / 60px = 0.125em; Left(em) = 7.5px / 60px = 0.125em;
.preloader::before { width: 0.25em; height: 0.25em; top: calc(50% - 0.125em); left: calc(50% - 0.125em); }
アニメーションスクリプトの値を変更するために残ります。
@keyframes preloader { 0%, 10%, 90%, 100% { transform: translate3d(0, 0, 0) scale(0); } 20%, 70% { transform: translate3d(0, 0, 0) scale(1); } 30% { transform: translate3d(-15px, -15px, 0) scale(1); } 40% { transform: translate3d(15px, -15px, 0) scale(1); } 50% { transform: translate3d(15px, 15px, 0) scale(1); } 60% { transform: translate3d(-15px, 15px, 0) scale(1); } }
符号に関係なく値を見ると、15pxだけを翻訳する必要があります。 私はすでにこれを行っており、それらは0.25emに対応しています。
@keyframes preloader { 0%, 10%, 90%, 100% { transform: translate3d(0, 0, 0) scale(0); } 20%, 70% { transform: translate3d(0, 0, 0) scale(1); } 30% { transform: translate3d(-0.25em, -0.25em, 0) scale(1); } 40% { transform: translate3d(0.25em, -0.25em, 0) scale(1); } 50% { transform: translate3d(0.25em, 0.25em, 0) scale(1); } 60% { transform: translate3d(-0.25em, 0.25em, 0) scale(1); } }
これで、.preloader_l要素のサイズを120pxに設定できます。
.preloader_l { font-size: 120px; }
CSSルール.preloader_l ::を削除し、アニメーションスクリプトpreloader-lは不要になったため、削除したことに注意してください。
宿題
このトリックを統合するために、タスクを準備しました。 アニメーションスクリプトで使用されるpxからemに値を変換する必要があります。 以前に計算されたプロパティ値はすべて保持されます。
@keyframes preloader { 0%, 70%, 100% { transform: translate3d(0, 0, 0) scale(0); } 10%, 60% { transform: translate3d(0, 0, 0) scale(1); } 20% { transform: translate3d(9px, -21px, 0) scale(1); } 30% { transform: translate3d(3px, 21px, 0) scale(1); } 40% { transform: translate3d(-9px, -21px, 0) scale(1); } 50% { transform: translate3d(-9px, 21px, 0) scale(1); } }