清理可重复的 CSS 代码

Question

我从这里的另一个线程得到了这段代码。但是，我觉得好像我没有有效地重新使用 CSS 。我怎样才能 cut/reduce CSS 代码更进一步？

感觉我重复关键帧的方式太多了。另外，我不确定为什么要使用循环，但是当我删除它时它不能正常工作。

PS：在演示中，你只看到十、三十和九十。我将在实际生产代码中添加二十、四十、五十等。

#speedometer {
  display: inline-block;
  position: relative;
}

#speedometer .barometer {
  background-image: url("https://svgshare.com/i/GAZ.svg");
  background-repeat: no-repeat;
  width: 200px;
  height: 110px;
  display: inline-block;
}

#speedometer .needle {
  background-image: url("https://svgshare.com/i/GBP.svg");
  background-repeat: no-repeat;
  z-index: 999999;
  width: 200px;
  height: 110px;
  display: inline-block;
  left: 0px;
  position: absolute;
  bottom: 5px;
  transform-origin: 50% calc(100% - 8px);
}

#speedometer .needle.ten {
  animation: changeTen 3s linear, loopTen 1s linear 3s infinite alternate;
}

@keyframes changeTen {
  0% {
    transform: rotate(-90deg);
  }
  100% {
    transform: rotate(-60deg);
  }
}

@keyframes loopTen {
  0% {
    transform: rotate(-60deg);
  }
  100% {
    transform: rotate(-60deg);
  }
}

#speedometer .needle.thirty {
  animation: changeThirty 3s linear, loopThirty 1s linear 3s infinite alternate;
}

@keyframes changeThirty {
  0% {
    transform: rotate(-90deg);
  }
  100% {
    transform: rotate(-30deg);
  }
}

@keyframes loopThirty {
  0% {
    transform: rotate(-30deg);
  }
  100% {
    transform: rotate(-30deg);
  }
}

#speedometer .needle.ninety {
  animation: changeNinety 3s linear, loopNinety 1s linear 3s infinite alternate;
}

@keyframes changeNinety {
  0% {
    transform: rotate(-90deg);
  }
  100% {
    transform: rotate(80deg);
  }
}

@keyframes loopNinety {
  0% {
    transform: rotate(80deg);
  }
  100% {
    transform: rotate(80deg);
  }
}

<div id="speedometer">
  <span class="barometer"></span>
  <span class="needle ten"></span>
</div>
<div id="speedometer">
  <span class="barometer"></span>
  <span class="needle thirty"></span>
</div>
<div id="speedometer">
  <span class="barometer"></span>
  <span class="needle ninety"></span>
</div>

Answer 1

使用CSS 个变量。您还可以将标记减少到只有一个元素：

.speedometer {
  display: inline-block;
  background-image: url("https://svgshare.com/i/GAZ.svg");
  width: 200px;
  overflow:hidden;
}


.speedometer:before {
  content:"";
  background-image: url("https://svgshare.com/i/GBP.svg");
  height: 110px;
  display: block;
  margin-bottom: 5px;
  transform-origin:50% calc(100% - 8px) ;
  animation: change 3s linear forwards;
  backface-visibility: hidden;
}

@keyframes change {
  0% { transform:rotate(-90deg); }
  100% { transform:rotate(var(--r,90deg)); }
}

<div class="speedometer" style="--r:-60deg;">
</div>
<div class="speedometer" style="--r:-30deg;">
</div>
<div class="speedometer" style="--r:80deg;">
</div>

您还可以通过一些计算使变量更友好。在下面，我正在考虑 [0 100]

范围内的 percetange 值

.speedometer {
  display: inline-block;
  background-image: url("https://svgshare.com/i/GAZ.svg");
  width: 200px;
  overflow:hidden;
}


.speedometer:before {
  content:"";
  background-image: url("https://svgshare.com/i/GBP.svg");
  height: 110px;
  display: block;
  margin-bottom: 5px;
  transform-origin:50% calc(100% - 8px) ;
  animation: change 3s linear forwards;
  backface-visibility: hidden;
}

@keyframes change {
  0% { transform:rotate(-90deg); }
  100% { transform:rotate(calc(1.8deg*var(--p) - 90deg)); }
}

<div class="speedometer" style="--p:40;">
</div>
<div class="speedometer" style="--p:20;">
</div>
<div class="speedometer" style="--p:80;">
</div>

Answer 2

我会创建一个新的 class 来包含 .needle 和 .barometer 共享的属性，如下所示：

.class-name{
  background-repeat: no-repeat;
  width: 200px;
  height: 110px;
}

我认为 .needle 和 .barometer 中的 display: inline-block; 不是必需的，因为它们已经继承自 #speedometer 。

使用 css variables 而不是专门为每个过渡制作属性可以使它看起来更好。

我也会将 #speedometer 替换为 .speedometer 因为 ID 应该是唯一的。

Answer 3

如果您使用的是纯 CSS（即没有 CSS 预处理器），您可以使用带有 class 的 selector 来定位具有相似样式和我们的元素HTML 文件中的新 class 更像是：

<div id="speedometer" class="d-inline-block">
  <span class="barometer d-inline-block dimension"></span>
  <span class="needle ten d-inline-block dimension"></span>
</div>

CSS:

#speedometer {
  position: relative;
}

.d-inline-block{
  display: inline-block;
}

.dimension{
  width: 200px;
  height: 110px;
}

#speedometer .barometer {
  background-image: url("https://www.turbotobias.dk/wp- 
  content/uploads/2019/03/barometer.svg");
  background-repeat: no-repeat;
}

#speedometer .needle {
  background-image: url("https://www.turbotobias.dk/wp- 
  content/uploads/2019/03/needle.svg");
  background-repeat: no-repeat;
  z-index: 999999;
  left: 0px;
  position: absolute;
  bottom: 5px;
  transform-origin:50% calc(100% - 8px) ;
}

或者，您可以像这样使用多个选择器

 #speedometer,
.barometer,
.needle  {
 display: inline-block;
}

您也可以使用 CSS 变量，但首先检查兼容性以了解支持它的浏览器范围。

清理可重复的 CSS 代码

Cleaning up repeatable CSS codes

css

css-transforms

css-animations