Задать вопрос
avanesov
@avanesov
html

Как сверстать подобную анимацию?

Здравствуйте!
Подскажите пожалуйста, как можно решить определенную проблему ...
ссылка на код: https://jsfiddle.net/32o77ewu/

Тут есть два совершенно одинаковых по стилям блока. Их отличает только высота. Если вы наведете на них, то увидите анимацию - с центра плавно блок покрывается зеленым фоном с использованием border-radius:50%.

Все это прописано в css. В большом блоке (т.е. чья высота 140px) работает как надо, а при малой высоте (в первом блоке) эта анимация получается какбы "сплющенной".

Можно ли это как-то исправить, чтобы и в маленьком блоке анимация происходила с центра с радиусом окружности 50% ?

спасибо!
  • Вопрос задан
  • 263 просмотра
Комментировать
Подписаться 2 Оценить Комментировать
Пригласить эксперта
Ответы на вопрос 2
Kublyakov
@Kublyakov
Ну сплющенной анимация получается, потому-что у анимируемого блока разные ширина и высота.
Как вы представляете круглую анимацию у прямоугольного блока? =)
Решение проблемы - для этого зеленого блока сделать равными ширину и высоту.
Либо сделать две разных анимации для увеличения ширины и увеличения высоты с разным временем анимации.
Ответ написан
Комментировать
Комментировать
profesor08
@profesor08 Куратор тега CSS
Вот так.
.s-button .bg {
  transition:opacity 0.2s ease 0s, transform 0.6s cubic-bezier(0.4, 0, 0.2, 1) 0s;
  border-radius:50%;
  width: 10em;
  height: 10em;
  z-index:0;
  content:"";
  margin:auto;
  transform:scale(0);
  position:absolute;
  top:0;
  left:0;
  bottom:0;
  right:0;
  background:#94c766;
  }
Ответ написан
Комментировать
Комментировать
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
Тестировщик-стажёр
ITooLabs • Тула
от 35 000 до 40 000 ₽
Fullstack PHP Developer
Smapse Education
от 40 000 до 65 000 ₽
Trainee - IT Support
move2usajobs.com LLC • Лос-Анджелес
от 2 000 до 4 000 $
Ещё вакансии
Заказы с Хабр Фриланса
Необходимо сверстать приложение согласно макету Figma используя React
26 апр. 2024, в 22:22
1500 руб./за проект
Написать модуль подключения матрицы Sony к ПЛИС (Verilog)
26 апр. 2024, в 21:30
15000 руб./за проект
8266 f12 требуется сделать ревью и оптимизировать работу
26 апр. 2024, в 20:42
2000 руб./за проект
Ещё заказы