Создание анимированного 3D Шара на CSS3

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

Сложность

HTML

Начнем с основного HTML:

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

Что мы имеем, 3 простых контейнера DIV. #ballWrapper - главный контейнер, который содержит шар. Этот контейнер определит положение шара и его высоту на экране. Также у нас есть элемент #ball, который содержит сам шар, и наконец есть элемент #ballShadow, в котором находиться тень от шара.

CSS

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

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

Обратите внимание, что я задал размер 50% верхней и левой позиции контейнера и отрицательную величину верхнему и левому краю, величина которого ровна половине первоначальной высоты и ширины DIV.

Стили для шара:

#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;
}

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

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

css тень

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

#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 и добавил ему линейный градиент с прозрачностью. Кроме того, добавил скругленные углы 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, также добавили полупрозрачный фон.

CSS анимация отскока

Начнем с добавления анимации для нашего шара:

#ball {
    animation: jump 1s infinite;
}

Все, что мы сделали, это определили имя анимации (jump), длительность css анимации (1 секунда) и сколько раз css анимация будет происходить - в нашем случае мы используем 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;
    }
}

Здесь мы указали высоту прыжка шара, начиная с 0px до 160px и обратно до 0px. Обратите внимание, что в середине css анимации мы также добавили эффект «отдачи» шара при помощи border-radius.

Добавим CSS анимацию тени:

#ballShadow {
    animation: shrink 1s infinite;
}

Мы использовали те же значения тени, которые использовали ранее на шаре, только с другой анимацией keyframes, которая выглядит следующим образом:

@-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;
    }
}

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

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

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

Перевод статьи Creating an Animated 3D Bouncing Ball with CSS3

Тэги: transition3D animatetransform

Вход

Уважаемый пользователь! Мы обнаружили, что вы используете AdBlock и вынуждены скрыть часть материалов на нашем сайте. Siteacademy существует и развивается за счет доходов от рекламы. Просим внести наш сайт в список исключений или отключить Блокировщик рекламы на нашем сайте.