我从另一个线程在这里获取此代码。但是,我好像没有有效地重用CSS。如何进一步减少/减少CSS代码?
感觉就像我在重复关键帧太多了。另外,我不确定为什么要使用循环,但是删除循环后它无法正常工作。
PS:在演示中,您只会看到十,三十和九十。我将在实际生产代码中添加二十,四十,五十等。
演示: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); }
}
使用CSS变量。您还可以将标记减少到仅一个元素:
.speedometer {
display: inline-block;
background-image: url("https://www.turbotobias.dk/wp-content/uploads/2019/03/barometer.svg");
width: 200px;
height: 110px;
overflow:hidden;
}
.speedometer:before {
content:"";
background-image: url("https://www.turbotobias.dk/wp-content/uploads/2019/03/needle.svg");
height: 100%;
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,因此值在[0 100]
.speedometer {
display: inline-block;
background-image: url("https://www.turbotobias.dk/wp-content/uploads/2019/03/barometer.svg");
width: 200px;
height: 110px;
overflow:hidden;
}
.speedometer:before {
content:"";
background-image: url("https://www.turbotobias.dk/wp-content/uploads/2019/03/needle.svg");
height: 100%;
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>
我将创建一个新类来包含.needle
和.barometer
共享的属性,如下所示:
.class-name{
background-repeat: no-repeat;
width: 200px;
height: 110px;
}
[我相信display: inline-block;
和.needle
中的.barometer
是不必要的,因为已经从#speedometer
继承了它们。
使用css variables而不是为每个转换专门创建属性可以使它看起来更好。
我还将#speedometer
替换为.speedometer
,因为ID应该是唯一的。