代码之家 › 专栏 › 技术社区 › Elaine Byene

清除可重复的CSS代码

css-transforms css

Elaine Byene · 技术社区 · 4 年前

我让这段代码从另一个线程运行。但是,我觉得好像我没有有效地重新使用CSS。如何进一步削减/减少CSS代码?

感觉我把关键帧重复得太多了。另外,我不知道为什么要使用循环,但当我删除它时,它不能正常工作。

附言:在演示中,你只看到十个,三十个和九十个。我将在实际生产代码中添加20、40、50等。

演示: https://jsfiddle.net/dg0L9cw7/1/

HTML代码:

<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>

CSS:

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

#speedometer .barometer {
  background-image: url("https://www.turbotobias.dk/wp-content/uploads/2019/03/barometer.svg");
  background-repeat: no-repeat;
  width: 200px;
  height: 110px;
  display: inline-block;
}

#speedometer .needle {
  background-image: url("https://www.turbotobias.dk/wp-content/uploads/2019/03/needle.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); }
}

3 回复 | 直到 4 年前

Temani Afif 4 年前

使用CSS变量。也可以将标记减少为仅一个元素:

.speedometer {
  display: inline-block;
  background-image: url("https://www.turbotobias.dk/wp-content/uploads/2019/03/barometer.svg");
  width: 200px;
  overflow:hidden;
}


.speedometer:before {
  content:"";
  background-image: url("https://www.turbotobias.dk/wp-content/uploads/2019/03/needle.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>

您还可以使用一些计算使变量更友好。在下面,我考虑的是范围内的percetange so值 [0 100]

.speedometer {
  display: inline-block;
  background-image: url("https://www.turbotobias.dk/wp-content/uploads/2019/03/barometer.svg");
  width: 200px;
  overflow:hidden;
}


.speedometer:before {
  content:"";
  background-image: url("https://www.turbotobias.dk/wp-content/uploads/2019/03/needle.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>

Liad Yogev midzay 4 年前

我将创建一个新类来包含 .needle 和 .barometer 共享,类似于这样:

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

我相信 display: inline-block; 在里面 .针 和 .气压计 不是必需的,因为那些已经从 #speedometer .

使用 css variables 而不是专门为每个转换创建一个属性,这样可以使它看起来更好。

我也会替换 #车速表 进入之内 .speedometer 因为ID应该是唯一的。

Monday A Victor 4 年前

如果使用纯CSS(即使用CSS预处理器),则可以 selector 使用具有类似样式的类到目标元素,并且我们HTML文件中的新类更像:

<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变量,但首先检查兼容性以了解支持它的浏览器范围。