이 코드는 여기 다른 스레드에서 작동합니다. 그러나 CSS를 효율적으로 재사용하지 않는 것 같습니다. CSS 코드를 더 많이 자르거나 줄이려면 어떻게해야합니까?
키 프레임을 너무 많이 반복하는 것 같습니다. 또한 루프를 사용하는 이유를 잘 모르겠지만 제거하면 제대로 작동하지 않습니다.
추신 : 데모에서는 10 개, 30 개 및 90 개만 표시됩니다. 실제 프로덕션 코드에 20, 40, 50 등을 추가 할 것입니다.
데모 : https://jsfiddle.net/dg0L9cw7/1/
#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>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>일부 계산을 사용하여 변수를 더 친숙하게 만들 수도 있습니다. 아래에서 나는 percetange를 고려하고 있으므로 범위의 값[0 100]
.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>이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다