viksnamax
@viksnamax
Молодой перспективный веб-разработчик

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

Есть круг сделанный 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
  • Вопрос задан
  • 59 просмотров
Решения вопроса 1
Stalker_RED
@Stalker_RED


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

Ответ написан
Пригласить эксперта
Ответы на вопрос 1
HunteR-VRX
@HunteR-VRX
frontend-разработчик
#circle:hover {
transform: scale(1.3);
}
Ответ написан
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы
Девять линий Ульяновск
от 45 000 до 80 000 руб.
Sveak Барнаул
от 50 000 руб.
UMA.TECH Москва
от 150 000 до 215 000 руб.
20 июн. 2019, в 22:17
20000 руб./за проект
20 июн. 2019, в 21:15
1000 руб./в час
20 июн. 2019, в 21:09
30000 руб./за проект