Движение мяча основано на CSS-анимации.

Пример:

Выбрать другой мяч для примера:

image
image
image
image
image
image

Другие мячи можно найти на сайте pngwing.com или ему подобных. Выбирая альтернативный мячик, обратите внимание, что падающий на него свет задается в CSS и поэтому лучше выбирать их без дополнительных графических теней.

HTML:

CSS:

Контейнер страницы, в котором находится мяч должен иметь стиль overflow-x: hidden

Где:

height - высота секции

size - размер мяча

speed - продолжительность анимации, влияющая на скорость движения мяча


За основу взято решение, найденное на codepen.io у пользователя Jomohop

Смотрите также:

Секция на три блока с фотографиями и раскрывающимся при за ходе на них курсора описанием

Новогодняя блок-секция с поздравлением

Падающие в блоке или на всей странице снежинки, квадратики, треугольники и другие элементы

Добавить комментарий:

Ваш комментарий отправлен!