CSS에서 점선 테두리로 원을 만들고 호버로 애니메이션하기

CSS 서클에 애니메이션을 적용하려고합니다. 사용자가 호버를 움직이면 원의 경계선이 점선이되고 회전하는 바퀴처럼 움직여야합니다. 주어진 시간 동안 회전시킬 수는 있지만 마우스 포인터가 마우스 포인터 위로 움직일 때까지 움직이는 방법을 찾지 못하고 마우스 포인터를 원에서 꺼내 점선 테두리를 만들면 애니메이션을 멈출 수 있습니다.CSS에서 점선 테두리로 원을 만들고 호버로 애니메이션하기

HTML

<div> 
</div>

CSS

div { 
    background: red; 
    border: 5px solid green; 
    width: 200px; 
    height: 200px; 
    border-radius: 50%; 
    transition: all 5s ease-in-out; 
} 

div:hover { 
    transform:rotate(180deg); 
    border: 5px dotted blue; 
}

jsfiddle ->

출처

2013-06-21 The Last Coder

CSS 애니메이션이 필요합니다. CSS 전환은 반복되지 않습니다. – Prinzhorn

어떻게 점선 테두리를 만들 수 있습니까? 당신이 나를 도울 수있다 : –

나는 당신이 Firefox를 사용하고 있다고 가정한다. http://stackoverflow.com/questions/3718215/css3-rounded-and-dotted-borders – Prinzhorn

http://jsfiddle.net/uYBKQ/1/ 당신은 CSS 애니메이션이 필요합니다. (이 예는 웹킷입니다) 이러한 규칙을 추가,

<div class="rotate"> 
<!-- The content --> 
</div>

그리고 당신의 CSS 파일 :

여기

div:hover { 
    -webkit-animation: rotate 2s linear infinite; 
} 

@-webkit-keyframes rotate { 
    from{ 
     -webkit-transform: rotate(0deg); 
    } 
    to{ 
     -webkit-transform: rotate(180deg); 
    } 
}

가 DEMO

을의 HTML 코드에서

은 다음과 클래스를 넣어

건배, 레오

Firefox에서 작동하려면 그냥 광고 d는 각 공급 업체 접두사입니다. http://jsfiddle.net/vHRat/3/ 다음

업데이트 된 CSS입니다 : 내가 여기 당신의 바이올린 포크

출처

2013-06-21 17:19:07 leoMestizo

현대적인 브라우저에서만 사용됩니다. http://modernizr.com/을 확인하고 싶습니다. Modernizr은 지원되지 않는 css3 기능을 javascript로 확인하고 대체합니다. –

나는 그것을 더 잘 말할 수 없었다. @ Joe_Maker에게 감사합니다. – leoMestizo

0으로 경계 반경을 변경하면 그 가치는, 당신은 회전 분명히 알 수있는 일에 대한 또한

div { 
    background: red; 
    border: 5px solid green; 
    width: 200px; 
    height: 200px; 
    border-radius: 0%; 
} 

div:hover { 
    border: dotted 5px blue; 
    animation: hover 5s; 
    -webkit-animation: hover 5s; /* Safari and Chrome */ 
} 
@keyframes hover 
{ 
    from {} 
    to { 
     transform:rotate(360deg); 
     -ms-transform:rotate(360deg); /* IE 9 */ 
     -webkit-transform:rotate(360deg); /* Safari and Chrome */ 
    } 
} 
@-webkit-keyframes hover /* Safari and Chrome */ 
{ 
    from {} 
     to { 
      transform:rotate(360deg); 
      -ms-transform:rotate(360deg); /* IE 9 */ 
      -webkit-transform:rotate(360deg); /* Safari and Chrome */ 
     } 
}

. 테두리가 단색으로 나타나고 회전으로 인해 원이 정적으로 나타납니다.

출처

2013-06-21 17:22:16 NullHappens

CSS에서 점선 테두리로 원을 만들고 호버로 애니메이션하기

답변

관련 문제