我喜欢提出各种接口元素，一旦我想制作一个预加载器。
要实现它，我需要以下标记：
<div class="preloader"></div> 根据我的想法，预加载器由两个正方形组成：一个大的正方形，大小为60x60px，另一个小的正方形-15x15px。
由于大正方形是小正方形的轮廓，因此我使用了div .prealoder元素来实现它。 但是对于一个嵌套的正方形，我之前需要一个伪元素。
.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。 有了它，我将能够将所有属性值绑定到单个font-size值，通过它我可以切换预加载器的尺寸。
结果，代码将更改如下：
/* 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); } 为此，请选择字体大小值。 根据我的想法，此属性将设置轮廓的尺寸，因此使用现在为width和height设置的相同值是合乎逻辑的。
Width(em) = 60px / 60px = 1em Height(em) = 60px / 60px = 1em .preloader { width: 1em; height: 1em; font-size: 60px; } 接下来，我将计算.preloader ::元素之前的宽度，高度，顶部和左侧的值。 为此，您不再需要选择font-size值，因为它将从.preloader元素的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); } }