—»     —»   Разрабатываем анимированный 3D-шар посредством CSS3
  Раздел: Анимация, Руководства, CSS/Style Sheets   Комментариев: 2  

Разрабатываем анимированный 3D-шар посредством CSS3



Привет, друзья! Сегодня мы рассмотрим еще один прекрасный пример того, насколько могущественным может быть CSS3! Начнем с разработки очень привлекательного и реалистичного трехмерного шарика на чистом коде CSS3, а затем добавим немного CSS3-анимаций, заставив этот шарик подпрыгивать.

Разрабатываем анимированный 3D-шар посредством CSS3

Учтите, что этот пример будет работать только в тех браузерах, где имеется поддержка соответствующих CSS-параметров.

HTML-код

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

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

Здесь у нас есть 3 простых DIV-элемента. #ballWrapper – это основной DIV, которым будет «обёрнут» шар. Этот div будет определять параметры position и height на экране для шара. Далее, у нас идет элемент #ball, который представляет собой основную разметку шара, и в завершение мы создадим элемент #ballShadow, который будет удерживать тень шара отдельно от него самого.

CSS-код

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

Для начала нам нужно выставить основные параметры width и height для нашего div-элемента #ballWrapper. Это поможет нам выровнять его по центру экрана.

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

Обратите внимание на то, что мы задаем значение в 50% как параметру left, так и параметру top нашего div-элемента, а также отрицательные параметры top- и left-margin, что даст нам ровно половину исходной высоты и ширины 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;
}

Мы задаем равные параметры width и height, а также border-radius со значением в 70 пикселей (что будет половиной изначально указанных параметров width и height), так что это будет именно шар, а не овал.

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

Разрабатываем анимированный 3D-шар посредством CSS3

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

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

Мы воспользовались CSS-псевдо элементом ::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;
}

Опять же, мы использовали те же параметры для центрирования тени, но на этот раз мы «приклеили» её к нижней части div’а #ballWrapper. Мы также добавили полупрозрачный фон, подходящие параметры box-shadow и border-radius.

Анимация прыжков

Теперь давайте перейдем к веселой части.

Мы начали с того, что задали нашему шару параметр animation:

#ball {
animation: jump 1s infinite;
}

Мы просто определили название анимации (jump), продолжительность анимации (1 секунда), а также количество раз, которое анимация будет повторяться – в нашем случае мы указали «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, чтобы сымитировать удар шара об землю.

А теперь что касается тени шара. Для начала давайте зададим соответствующий параметр анимации тени:

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

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

Последнее, но не менее важное, заключается в том, чтобы добавить к шару «эффект при клике», который будет создавать впечатление, будто шар от нас удаляется, если мы кликнем по нему и задержим кнопку. Для достижения такого эффекта нам нужно использовать псевдо-класс «:active», а также переход, а затем поиграть с параметром CSS-трансформаций «scale»:

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

#ballWrapper:active {
transform: scale(0);
}

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

Посмотреть демо | Скачать архивом
Внимание! У вас нет прав для просмотра скрытого текста.
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Ключевые тэги: CSS, 3D
Опубликовал Design FactoRy   Прочитано (раз): 6333   |   Оставлено комментариев: 2
Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Комментарий #1: 8 июня 2012 @ 03:45
Написал: Ян — группа: Гости  
На сайте с: --   |   Публикаций: 0   |   Комментариев: 0
ICQ: --- не указано ---
Прикольно ) Прямо не верится, что это на CSS сделано. Раньше такое было возможно только с помощью flash.
Кстати, обнаружил баг в Хроме — верхушка шарика пропадает на секунду.
Комментарий #2: 8 июня 2012 @ 10:51
Написал: Design FactoRy — группа: Администраторы  
На сайте с: 21.07.2009   |   Публикаций: 3300   |   Комментариев: 500
ICQ: --- не указано ---
Ян, посмотрел в Хроме - все нормально, бага не наблюдаю.
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

С уважением, Администрация сайта.
* = поля обязательны к заполнению
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Вопрос : Национальная денежная единица США
Подтверждение кода безопасности :

Включите эту картинку для отображения кода безопасности
обновить, если не виден код


Популярные публикации


















Свежие шаблоны сайтов каждый день
С миру по нитке
«    Сентябрь 2017    »
ПнВтСрЧтПтСбВс
 123
45678910
11121314151617
18192021222324
252627282930