Прыгающий мячик на CSS3
В данном уроке представлен пример мощности CSS3. Мы сделаем 3D мяч, который будет выглядеть очень реалистично с помощью свойств CSS3 и добавим немного анимаций для формирования визуального эффекта.
Примечание: демонстрация будет работать в браузерах, которые поддерживают соответствующие свойства CSS3.
Разметка HTML
Начнем с разметки HTML
<div id="ballWrapper"> <div id="ball"></div> <div id="ballShadow"></div> </div>
У нас есть три простых элемента div
. “#ballWrapper” - основной контейнер, который содержит наш мяч. Данный элемент div
определяет положение мяча и высоту на экране. Элемент “#ball” формирует разметку для мяча, а “#ballShadow” содержит тень отдельно.
CSS
В текстах кода в уроке не используются префиксы для большей наглядности.
Сначала установим ширину и высоту основного контейнера. Он будет занимать положение по центру экрана:
#ballWrapper { width: 140px; height: 300px; position: fixed; left: 50%; top: 50%; margin: -150px 0 0 -70px; }
Координаты контейнера имеют значения ’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; }
Используется псевдо-элемент CSS ::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’ определяет бесконечное выполнение анимации).
А вот код анимации:
@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; } }
В анимации тени изменяются другие свойства. Для того, чтобы придать реалистичности нужно изменить ширину, высоту и прозрачность тени. Когда мяч находится близко к "полу", тень должна стать темнее и меньше. Когда мяч отскакивает вверх, тень должна стать светлее и больше.
В завершении добавим эффект для нажатия кнопки мыши. Мяч будет удаляться от нас. Для достижения эффекта используем псевдо-класс ‘:active‘, добавляется трансформация и изменение свойства ‘scale’:
#ballWrapper { transform: scale(1); transition: all 5s linear 0s; } #ballWrapper:active { transform: scale(0); }
Трансформация значения свойства ‘scale’ (от 1 до 0)формирует иллюзию удаления мяча от зрителя.
Источник: http://feedproxy.google.com/~r/ruseller/CdHX/~3/VZmXaALxL7c/lessons.php


Дайджест новых статей по интернет-маркетингу на ваш email
Новые статьи и публикации
- 2025-04-08 » Горшочек, рисуй: 10 бесплатных сервисов для генерации картинок
- 2025-04-08 » SEO-продвижение в 2025 году: 15 трендов, без которых ТОП не светит
- 2025-03-14 » SPF-запись
- 2025-03-07 » SEO на маркетплейсах: как оптимизировать карточку товара для поисковой выдачи
- 2025-02-18 » Топ-10 бесплатных нейросетей для генерации изображений: лучшие ии генераторы 2024 года
- 2025-02-11 » Критическая уязвимость в 1С-Битрикс
- 2025-02-11 » Google Search Console: руководство для начинающих вебмастеров
- 2025-02-11 » Методы измерения результативности рекламных кампаний: плюсы и минусы
- 2025-02-11 » Тренды SEO в 2025 году
- 2025-02-10 » Свой Google в локалке. Ищем иголку в стоге сена
- 2025-01-29 » SEO — это комплексная работа. Шесть главных факторов ранжирования сайтов
- 2025-01-29 » Гайд для главной страницы e-commerce сайта: как оформить, чтобы повысить конверсию
- 2025-01-20 » Krea AI выпустила бесплатную функцию преобразования изображений в 3D-объекты — их можно вращать и вписывать в фотографии
- 2025-01-19 » Отзывы на Яндекс Картах: как пройти модерацию
- 2025-01-15 » Топ-6 лучших российских нейросетей, в которых можно генерировать тексты и изображения бесплатно и без VPN
- 2025-01-14 » 15 бесплатных способов узнать, чем интересуется ваша аудитория
- 2025-01-11 » Бездепозитные бонусы в казино за регистрацию с выводом: особенности и возможности получения
- 2025-01-09 » Новая модель LAM способна выполнять задачи в Word
- 2024-12-26 » Универсальный промпт для нейросети: как выжать максимум из ChatGPT, YandexGPT, Gemini, Claude в 2025
- 2024-11-26 » Капитан грузового судна, или Как начать использовать Docker в своих проектах
- 2024-11-26 » Обеспечение безопасности ваших веб-приложений с помощью PHP OOP и PDO
- 2024-11-22 » Ошибки в Яндекс Вебмастере: как найти и исправить
- 2024-11-22 » Ошибки в Яндекс Вебмастере: как найти и исправить
- 2024-11-15 » Перенос сайта на WordPress с одного домена на другой
- 2024-11-08 » OSPanel 6: быстрый старт
- 2024-11-08 » Как установить PhpMyAdmin в Open Server Panel
- 2024-09-30 » Как быстро запустить Laravel на Windows
- 2024-09-25 » Next.js
- 2024-09-05 » OpenAI рассказал, как запретить ChatGPT использовать содержимое сайта для обучения
- 2024-08-28 » Чек-лист: как увеличить конверсию интернет-магазина на примере спортпита
Дураки ставят вопросы чаще, чем пытливые люди Горький Максим - (1868-1936) - русский писатель, литературный критик и публицист, общественный деятель |
Мы создаем сайты, которые работают! Профессионально обслуживаем и продвигаем их , а также по всей России и ближнему зарубежью с 2006 года!
Как мы работаем
Заявка
Позвоните или оставьте заявку на сайте.
Консультация
Обсуждаем что именно Вам нужно и помогаем определить как это лучше сделать!
Договор
Заключаем договор на оказание услуг, в котором прописаны условия и обязанности обеих сторон.
Выполнение работ
Непосредственно оказание требующихся услуг и работ по вашему заданию.
Поддержка
Сдача выполненых работ, последующие корректировки и поддержка при необходимости.
Или напишите нам в WhatsApp
Или напишите нам в WhatsApp