03:33 Разрабатываем анимированный 3D-шар посредством CSS3 | |
Привет, друзья! Сегодня мы рассмотрим еще один прекрасный пример того, насколько могущественным может быть CSS3! Начнем с разработки очень привлекательного и реалистичного трехмерного шарика на чистом коде CSS3, а затем добавим немного CSS3-анимаций, заставив этот шарик подпрыгивать.  Учтите, что этот пример будет работать только в тех браузерах, где имеется поддержка соответствующих CSS-параметров. HTML-код Давайте начнем с простого HTML-кода: Здесь у нас есть 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 представляет собой темную область в самом низу шара (смотрите на изображении). Далее у нас следует второй уровень, который отвечает за размытое свечение (опять же, в самом низу шара). Наконец, третий уровень, который на самом деле представляет собой едва заметную размытую тень по контуру шара. [img]/uploads/posts/2012-06/1339065015_boxshadow-levels.png[/img] Если вы посмотрите на шар, то заметите, что здесь также присутствует еще одна небольшая овальная форма в самом верху шара – она имитирует эффект отражения. Мы создали ее следующим образом: #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) будет создавать впечатление, будто шар отдаляется. Посмотреть демо | Скачать архивом Внимание! У вас нет прав для просмотра скрытого текста. | |
|
| |
| Всего комментариев: 0 | |
