CSS3 전환 국경 반경 문제

내가CSS3 전환 국경 반경 문제

는 기본적으로 나는 국경을 애니메이션을 원하고, 문제가 내가 마우스를 가져 가면이다 "유일한 국경 반경", CSS 전환 문제에 직면하고있다 애니메이션이 시작되기까지 몇 초가 걸립니다. 지연을 0으로 설정하려고 시도했지만 작동하지 않았습니다.

일반적인 문제입니까? 그리고 해결책이 있다면 나에게 보여줘. 그렇지 않다면 어떻게해야합니까? Fiddle

일부 HTML 코드 : 여기 내 예를

<a href=""><span class="icon"><p>A</p></span></a> 
<a href=""><span class="icon"><p>B</p></span></a> 
<a href=""> <span class="icon"><p>C</p></span></a> 
<a href=""> <span class="icon"><p>D</p></span></a>

모두

출처

2013-12-17 Bilal Khoukhi

문제는 국경 반경 감사합니다. 당신은 사용

border-radius: 50px;

당신의 요소의 폭이 당신이 반경과의 half를 사용할 필요가 50 픽셀이기 때문에 25 픽셀 또는 @ 데이비드 토마스 사용을 50 %까지 언급 한 바와 같이.

border-radius: 50%;

는 100 픽셀 또는 1000px의 테두리 반경을 사용하는 경우 폭이 결과는 동일 50 픽셀 인 경우 그것은 중요하지 않습니다 http://jsfiddle.net/DhQxV/1/

참조하십시오. 그러나 반경을 애니메이션하면 애니메이션에 영향을 미치고 지연 될 수 있습니다.

출처

2013-12-17 07:52:57

실제로 50px를 추가 한 이유는 50px 이상이 반지름을 원형으로 만드는 것이라고 생각했기 때문입니다. 나는 시험을해야했다. 감사합니다 –

요소의 너비를 60px로 변경하고 다시 50px로 변경해야 변경해야 할 필요가 있습니다. 이 경우 응답은 정확하지만 변경된 너비에 자동으로 적응하는 'border-radius : 50 %'를 사용하여 명시 적으로 권하고 싶습니다. –

CSS3 전환 국경 반경 문제

답변

관련 문제