Создаем анимированный прыгающий 3D-мяч при помощи CSS3

Сегодня мы увидим еще один замечательный пример того, как можно использовать возможности CSS3. Мы начнем с создания очень реалистичного 3D-шара с использованием только свойств CSS3, а также добавим немного анимации для придания мячу эффекта "подпрыгивания".

Пожалуйста, обратите внимание: результат этого урока будет работать как задумано только в браузерах, которые поддерживают соответствующие свойства CSS.

HTML

Давайте начнем с очень простого HTML:

<div id="ballWrapper">
 <div id="ball"></div>
 <div id="ballShadow"></div>
</div>

Итак, мы имеем здесь 3 простых блока DIV. Блок с id "#ballWrapper" является основным блоком, внутри которого будет наш мяч. Этот DIV будет определять положение мяча и высоту экрана. Далее, у нас есть элемент "#ball", который и будет "мячом", и, наконец, есть элемент "#ballShadow", который создаст тень мяча.

CSS

Обратите внимание, что мы не будем использовать префиксы браузеров в статье. Но Вы можете, конечно, найти их в исходных файлах.

Во-первых, мы установим ширину и высоту для блока #ballWrapper. Это поможет нам разместить его в центре экрана:

 #ballWrapper {
 width: 140px;
 height: 300px;
 position: fixed;
 left: 50%;
 top: 50%;
 margin: -150px 0 0 -70px;
}  

Обратите внимание, что я задал свойствам top и left значение "50%", и отрицательный верхний и левый отступ, который равен ровно половине первоначальной высоты и ширины блока. Таким образом, мы поместим шар в центр экрана.

Теперь, зададим нашему шару некоторые стили:

 #ball {
 width: 140px;
 height: 140px;
 border-radius: 70px;
 background: linear-gradient(top,  rgba(187,187,187,1) 0%,rgba(119,119,119,1) 99%);
 box-shadow: inset 0 -5px 15px rgba(255,255,255,0.4),
 inset -2px -1px 40px rgba(0,0,0,0.4),
 0 0 1px #000;
}  

Мы задаем мячу равную ширину и высоту и свойство "border-radius" со значением "70px" (что составляет половину от исходной ширины и высоты), таким образом блок будет в форме шара.

Еще одна вещь, которую вы можете заметить, на заднем плане. Я задал шару линейный фон и 3 различных уровня тени блока, так чтобы получить 3D эффект. Первый уровень тени блока - это темная тень в нижней части шара (см. рисунок). Затем, у нас есть второй уровень, который отвечает за размытое свечение - опять же, в нижней части мяча. Наконец, третий уровень - это едва заметная размытая тень за контуром мяча.

Тень для мяча

Если вы посмотрите на шар, то вы заметите, что там есть еще одна небольшая овальная форма в верхней части шара, которая создает эффект отражения. Вот как я сделал это:

 #ball::after {
 content: "";
 width: 80px;
 height: 40px;
 position: absolute;
 left: 30px;
 top: 10px;
 background: linear-gradient(top,  rgba(232,232,232,1) 0%,rgba(232,232,232,1) 1%,rgba(255,255,255,0) 100%);
 border-radius: 40px / 20px;
}  

Я использовал псевдо-элемент ::after и задал ему линейный градиент с прозрачностью. Кроме того, я установил border-radius равный "40px/20px", поэтому он имеет овальную форму.

Далее, обратимся к тени шара:

 #ballShadow {
 width: 60px;
 height: 75px;
 position: absolute;
 z-index: 0;
 bottom: 0;
 left: 50%;
 margin-left: -30px;
 background: rgba(20, 20, 20, .1);
 box-shadow: 0px 0 20px 35px rgba(20,20,20,.1);
 border-radius: 30px / 40px;
}  

Опять же, я использовал всё те же свойства, что и для первого блока, для центрирования тени, но на этот раз я разместил его ниже блока #ballWrapper. Я также добавил полупрозрачный фон, тени блока и закругленные углы.

Анимация

Теперь давайте взглянем на анимацию...

Я начну с добавления свойства animation для нашего шара:

 #ball {
 animation: jump 1s infinite;
}  

Все что я сделал, это определил имя анимации (jump), длительность анимации (1s) и сколько раз анимация будет повторяться - в нашем случае мы установили «infinite», что означает, что анимация будет повторяться бесконечно.

Код анимации:

 @keyframes jump {
 0% {
 top: 0;
 }
 50% {
 top: 140px;
 height: 140px;
 }
 55% {
 top: 160px;
 height: 120px;
 border-radius: 70px / 60px;
 }
 65% {
 top: 120px;
 height: 140px;
 border-radius: 70px;
 }
 95% {
 top: 0;
 }
 100% {
 top: 0;
 }
}  

Таким образом,  я изменяю здесь свойство "top" для мяча. Начиная с 0 и до 160, а затем обратно до 0. Вы можете заметить, что в середине анимации я также изменял свойство "border-radius" - таким образом я создаю эффект "отскока" мяча от земли.

А теперь займемся тенью мяча, сначала давайте добавим соответствующее свойство animation для тени:

 #ballShadow {
 animation: shrink 1s infinite;
}  

Я использовал те же значения, что и для мяча, только с другими ключевыми кадрами и назвал анимацию shrink:

 @-keyframes shrink {
 0% {
 bottom: 0;
 margin-left: -30px;
 width: 60px;
 height: 75px;
 background: rgba(20, 20, 20, .1);
 box-shadow: 0px 0 20px 35px rgba(20,20,20,.1);
 border-radius: 30px / 40px;
 }
 50% {
 bottom: 30px;
 margin-left: -10px;
 width: 20px;
 height: 5px;
 background: rgba(20, 20, 20, .3);
 box-shadow: 0px 0 20px 35px rgba(20,20,20,.3);
 border-radius: 20px / 20px;
 }
 100% {
 bottom: 0;
 margin-left: -30px;
 width: 60px;
 height: 75px;
 background: rgba(20, 20, 20, .1);
 box-shadow: 0px 0 20px 35px rgba(20,20,20,.1);
 border-radius: 30px / 40px;
 }
}  

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

Последнее, но не менее интересное, давайте добавим "click effect" для мяча, который создает эффект, как если бы мяч отдалялся от нас, когда мы нажмем на него и удерживаем левую кнопку мыши. Для достижения этого эффекта, мы должны использовать псевдо-класс :active, добавим transition и изменим свойство CSS3 "scale" следующим образом:

 #ballWrapper {
 transform: scale(1);
 transition: all 5s linear 0s;
}
 
#ballWrapper:active {
 transform: scale(0);
}  

Переход от значения scale(1) к scale(0), будет выглядеть как будто элемент удаляется от вас.

Демонстрация

Скачать исходные файлы

Перевод статьи с tympanus.net/codrops


Если у Вас возникли вопросы, то для скорейшего получения ответа рекомендуем воспользоваться нашим форумом

You have no rights to post comments