CSS3 Переход границы радиуса (задерживается при наведении)

Question

CSS3 Переход границы радиуса (задерживается при наведении)

0

Я столкнулся с проблемой перехода 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>

Всем спасибо

Bilal Khoukhi 17 дек. 2013, в 09:20

Источник

Теги:

html

css

css3

css-transitions

1 ответ

Ещё вопросы

Bas van Dijk · Accepted Answer · 2013-12-17T06-38-00.000Z

Проблема заключается в радиусе границы. Ты используешь:

border-radius: 50px;

Так как ширина вашего элемента составляет 50 пикселей, вам нужно использовать half с радиусом, равным 25 пикселям или, как указано @david-thomas, использовать 50%.

border-radius: 50%;

См. Http://jsfiddle.net/DhQxV/1/

Неважно, если вы используете радиус границы 100px или 1000px, если ваша ширина равна 50px, результат будет таким же. Однако, если вы анималируете радиус, это повлияет на вашу анимацию и вызовет задержку.

Я фактически добавил 50px, потому что я думал, что 50px или больше - это то, что делает радиус круговым. Я должен был проверить. Спасибо
Стоит отметить, что это потребует изменений, если вы измените ширину элемента на 60px, и снова, если вы вернетесь к 50px; в этом случае, хотя ответ правильный, я бы рекомендовал явно использовать border-radius: 50% который автоматически адаптируется к любым измененным значениям ширины.