Я взял этот код из другого вопроса здесь. Он работает, однако, мне кажется, что CSS используется не эффективно. Как я могу еще больше сократить / уменьшить CSS-код?
Такое ощущение, что слишком много повторов в @keyframes
. Кроме того, я не уверен, почему используется цикл, но когда я удаляю его, все перестает работать.
PS: В демоверсии вы видите пример только для значений десять, тридцать и девяносто. На самом деле, я добавлю еще значения: двадцать, сорок, пятьдесят и т.д.
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); }
}
`` `