Анимированная открытка с использованием CSS3
Представим один из примеров практического использования анимаций CSS3 - создание анимированных открыток. В качестве примера приводится открытка из Парижа.
Анимации CSS3 поддерживаются в Chrome 2+, Safari 4+, Firefox 5+, iOS Safari 3.2+ и Android 2.1+. В нашей открытке будут оживляться облака (используем три слоя), свет прожектора (вращение вокруг определенной точки) и вспышки на Эйфелевой башне.
Структура разметки для открытки очень простая:
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Привет из Парижа</title> </head> <body> <div id="wrap"> <h1>Bonne Nuit <em>PARIS !</em></h1> <div id="phare"></div> <div id="eiffel"></div> <div id="eiffel_wrap"> <div id="sparkling1"></div> <div id="sparkling2"></div> </div> <div id="roofs"></div> </div> </body> </html>
Для формирования внешнего вида будут использоваться следующие изображения:
Основа кода CSS для нашей открытки будет иметь следующий вид:
Для независимой анимации трех слоев с облаками будут использоваться следующие кадры.
/* используется для #wrap, который имеет 3 слоя фона */ @-webkit-keyframes wind { 0% {background-position: 0px 200px,0px 350px, left top;} 50% {background-position: 500px 40px,600px 450px, left top;} 100% {background-position: 1000px 200px,1200px 350px, left top} } @-moz-keyframes wind { 0% {background-position: 0px 200px,0px 350px, left top;} 50% {background-position: 500px 40px,600px 450px, left top;} 100% {background-position: 1000px 200px,1200px 350px, left top} } /* используется для #roofs, который имеет 2 слоя фона */ @-webkit-keyframes wind1 { 0% {background-position: 100px 250px, left bottom;} 50% {background-position: 650px 150px, left bottom;} 100% {background-position: 1300px 250px, left bottom} } @-moz-keyframes wind1 { 0% {background-position: 100px 250px, left bottom;} 50% {background-position: 650px 150px, left bottom;} 100% {background-position: 1300px 250px, left bottom} }
Так мы определяем значение свойства background-position
в начале, середине и конце анимации. Затем добавляем:
#wrap {-webkit-animation: wind 80s linear infinite; -moz-animation: wind 80s linear infinite;} #roofs {-webkit-animation: wind 80s linear infinite; -moz-animation: wind 80s linear infinite; }
для определения соответствия к нужным элементам, установки длительности, функции изменения и количества повторений.
Для анимации света прожектора будем одновременно изменять прозрачность с помощью свойства opacity
и вращать изображение вокруг определенной точки (на изображении выше она отмечена красной окружностью).
@-webkit-keyframes phare { 0% { -webkit-transform:rotate(0deg); opacity:0} 50% { -webkit-transform:rotate(180deg); opacity:1} 100% { -webkit-transform:rotate(360deg); opacity:0;} } #phare {-webkit-transform-origin: center top; -webkit-animation: phare 15s linear infinite;}
Для формирования вспышек на Эйфелевой башне будем использовать два изображения:
И устанавливаем стили:
#eiffel_wrap { position:absolute; width:240px; height:462px; right:10px; top: 180px; opacity:0;} #sparkling1 { position:absolute; background: url('images/sparkling1.png') no-repeat; width:240px; height:462px; opacity:0;} #sparkling2 { position:absolute; background: url('images/sparkling2.png') no-repeat; width:240px; height:462px; opacity:0;}
И анимируем элементы #eiffel_wrap
, #sparkling1
и #sparkling2
(в примере приведен вариант только с префиксом -moz):
@-webkit-keyframes sparkling { 0% {opacity:0;} 50%{opacity:1;} 100% {opacity:0;} }
Идея заключается в переменном включении элементов #sparkling1
и #sparkling2
с длительность цикла 0.4с. Для достижения нужного эффекта установим задержку 0.2s для #sparkling1
.
#sparkling1 {-webkit-animation: sparkling .4s .2s infinite;} #sparkling2 {-webkit-animation: sparkling .4s infinite;}
В Париже впечатляющий вечерний световой спектакль включается на несколько минут каждый полный час. Для имитации такого цикла используем элемент #eiffel_wrap
и анимацию eiffel_wrap
(на открытке воспроизводится просто длительная пауза).
#eiffel_wrap { -webkit-animation: eiffel_wrap 30s 1s infinite;} @-webkit-keyframes eiffel_wrap { 0% {opacity:1;-webkit-animation-timing-function: steps(1);} 40%{opacity:0;} 100% {opacity:0;} }
С помощью директивы -webkit-animation-timing-function: steps(1);
переход осуществляется сразу без эффекта затухания.
Источник: http://feedproxy.google.com/~r/ruseller/CdHX/~3/Uk9wjz_HZ14/lessons.php
Дайджест новых статей по интернет-маркетингу на ваш email
Новые статьи и публикации
- 2024-04-17 » 23 сервиса для эффективного экспресс-аудита любого сайта
- 2024-04-08 » Яндекс переходит на новую версию Wordstat
- 2024-04-08 » Яндекс интегрировал в свой облачный сервис эмпатичную нейросеть
- 2024-04-08 » Новая версия нейросети Claude превзошла по мощности аналоги Google и OpenAI
- 2024-04-08 » Как пользоваться GPT 4 и Claude бесплатно и без VPN
- 2024-03-13 » Стратегии SEO на 2024 год
- 2024-03-13 » Как использовать анимацию с помощью JavaScript-библиотеки GSAP
- 2024-03-13 » Использование GSAP 3 для веб-анимации
- 2024-03-13 » Cогласование топографической съёмки с эксплуатирующими организациями
- 2024-02-19 » Теряются лиды? Как настроить сквозную аналитику
- 2024-02-17 » Мерч и IT: на что обратить внимание в 2024 году
- 2024-02-16 » Копируем с RSync: основные примеры синхронизации файлов
- 2024-02-15 » Лучшие noCode AI платформы для создания диалоговых ботов
- 2024-02-14 » Факторы ранжирования Google 2024 — исследование Semrush
- 2024-02-12 » Перенос сайта на другой хостинг
- 2024-02-05 » В России сформирован реестр хостинг-провайдеров
- 2024-02-04 » Использование SSH для подключения к удаленному серверу Ubuntu
- 2024-02-03 » Подключаемся к серверу за NAT при помощи туннеля SSH. Простая и понятная инструкция
- 2024-02-02 » Настройка CI/CD для Gitlab-репозитория: схемы и гайд по шагам
- 2024-02-01 » GitLab CI Pipeline. Запуск сценария через SSH на удаленном сервере
- 2024-01-29 » Introduction to GitLab’s CI/CD for Continuous Deployments
- 2024-01-26 » Настройка GitLab CI/CD
- 2024-01-25 » Установка shell gitlab runner
- 2024-01-25 » Установка и регистрация gitlab-runner в docker контейнере
- 2024-01-25 » Переменные Gitlab-Ci
- 2024-01-25 » Настройка CI/CD в GitLab для синхронизации проекта с веб-серверами
- 2024-01-25 » Копирование файлов scp
- 2024-01-21 » Бездепозитные бонусы от казино: обзор условий и правил использования
- 2024-01-18 » Современная обработка ошибок в PHP
- 2024-01-18 » Пример шаблона проектирования MVC в PHP
Бог тянет за одну руку, а черт - за обе ноги Буш Вильгельм - (1832-1908) - немецкий поэт и художник |
Мы создаем сайты, которые работают! Профессионально обслуживаем и продвигаем их , а также по всей России и ближнему зарубежью с 2006 года!
Как мы работаем
Заявка
Позвоните или оставьте заявку на сайте.
Консультация
Обсуждаем что именно Вам нужно и помогаем определить как это лучше сделать!
Договор
Заключаем договор на оказание услуг, в котором прописаны условия и обязанности обеих сторон.
Выполнение работ
Непосредственно оказание требующихся услуг и работ по вашему заданию.
Поддержка
Сдача выполненых работ, последующие корректировки и поддержка при необходимости.