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

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

ДЕМО
Исходные файлы

HTML

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

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

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

CSS

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

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

Обратите внимание, что я задал размер 50% верхней и левой позиции DIV и отрицательную величину верхнему и левому краю, величина которого ровна половине первоначальной высоты и ширины 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 эффект. Первый уровень тени, затенение в нижней части шара (см. рисунок). Затем, у нас есть второй уровень, который отвечает за размытое свечение — опять же, в нижней части шара. Наконец, третий уровень едва размытая тень, которая находится за контурами шара.

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

#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'. Я также добавил полупрозрачный фон.

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

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

#ball {
    animation: jump 1s infinite;
}

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

<hh user=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. Вы заметите, что в середине анимации я также добавил эффект «отдачи» шара при помощи «border-radius».

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

#ballShadow {
    animation: shrink 1s infinite;
}

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

<hh user=-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);
}

ДЕМО
Исходные файлы

Автор: Lecaw