viksnamax
@viksnamax
All-in-One

Как сделать анимацию увеличения круга?

Есть круг сделанный html + css, при наведении он должен увеличивать, но от центра.
<div id='circle'></div>
#circle {
  width: 100px;
  height: 100px;
  background: red;
  left: 200px;
  top: 200px;
  transition: width .7s, height .7s;
  border-radius: 50%;
}

#circle:hover {
  height: 300px;
  width: 300px;
}

При таком коде центр смещается, а должен быть фиксированным, как это можно реализовать без svg
  • Вопрос задан
  • 62 просмотра
Решения вопроса 1
Stalker_RED
@Stalker_RED


Еще лучше менять размер через transform указав центр при помощи transform-origin

Ответ написан
Пригласить эксперта
Ответы на вопрос 1
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
Sveak Барнаул
от 50 000 ₽
RUVOD Москва
от 150 000 до 200 000 ₽
eGamings Воронеж
от 80 000 до 110 000 ₽
07 апр. 2020, в 19:10
2000 руб./за проект
07 апр. 2020, в 18:58
4000 руб./за проект