JavaScript 변수를 기반으로 CSS로 이미지를 변환하는 방법은 무엇입니까?

Question

이이 웹 사이트에 같이하는 방법의 예는 다음과 같습니다 지프에서

https://imgur.com/a/st9df

, Chart.js 중간에 화살표가

차트 (캔버스)에 사용됩니다 CSS 변환으로 회전 됨

자바 스크립트 변수가 "0"이면 화살표가 시작에서 멈춰야하고 변수가 "33"이면 ~ 1/3에서 중지해야합니다. 차트 등등.

또한 화살표는 멈추는 화살표의 색도 변경해야합니다. 자바 스크립트에서 다른 변수가 필요합니다. http://ripskins.net/round/59891/50+otFELF0-eo4PL0md8

Answer 1

당신은 클래스를 추가하는 CSS 애니메이션을 키 프레임 및 jQuery를 사용하여 결과 색상을 변경하여이 뭔가를 얻을 수 있습니다 여기에

는 차트를 직접 볼 수있는 웹 사이트 링크입니다.

최종 출력 색상을 변경하기 위해 시간 초과를 설정할 수도 있습니다.

$(document).ready(function(){ 
 

 
    $("#demo").addClass("trans"); 
 
    
 
})

.square 
 
{ 
 
    width:100px; 
 
    height:100px; 
 
    background:red; 
 
} 
 

 
.trans 
 
{ 
 
    transition: all 2s ease-out; 
 
    animation: transrotate 2s; 
 
} 
 

 
@keyframes transrotate{ 
 

 
    0%{ 
 
    transform: rotate(0deg); 
 
    } 
 
    100%{ 
 
    transform: rotate(360deg); 
 
    background: blue; 
 
    } 
 

 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div class="square" id="demo"> 
 
    
 
</div>