Развернуть ширину круга

Я новичок в анимации CSS3, я хотел бы узнать, как сделать следующее: У меня есть цирцея:

CSS circle

В режиме hover я хотел бы расширить ширину круга, превратив его в форму таблеток с переходом, как на этом изображении:

CSS circle with expanded width

Это то, что я пробовал. Дело в том, что круг переходит в эллипс по мере расширения ширины:

.logo {
  background: red;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  transition: width 2s;
}

.logo:hover {
  width: 300px;
}
<div class="logo"></div>
+8
источник поделиться
1 ответ

Вам просто нужно изменить значение граничного радиуса на любую другую единицу, чем процент (все единицы, перечисленные здесь). Для объяснения того, как это работает и почему вам нужно использовать эти единицы для получения желаемого результата, см. Радиус границы в процентах (%) против пикселей (пикселей).

Пример с px. Кружок расширяется до формы пилюли при наведении:

.logo {
  width: 100px;
  height: 100px;
  border-radius: 50px;
  background: red;
  transition: width 2s;
}
.logo:hover {
  width: 300px;
}
<div class="logo"></div>

Если вы не знаете высоту круга, вы можете установить очень высокое значение, чтобы круг сохранял форму таблеток по мере расширения ширины:

.logo {
  width: 200px;
  height: 200px;
  border-radius: 999px;
  background: red;
  transition: width 2s;
}
.logo:hover {
  width: 400px;
}
<div class="logo"></div>
+20
источник

Связанные вопросы


Похожие вопросы

Посмотрите другие вопросы по меткам или Задайте вопрос