Секундомер на чистом CSS3
В данном уроке мы сделаем секундомер с использованием только CSS3. Для реализации идеи будут применяться кадры анимации CSS3 и свойство управления состоянием анимации (для функционирования кнопок управления секундомером).
Изображение будет использоваться только в качестве фона (исключительно с эстетическими целями). А JavaScript применяется в виде плагина prefixfree - для уменьшения размера кода и повышения наглядности за счет исключения префиксов браузеров. Для логики и вывода секундомера не задействовано ни каких изображений и ни строчки JavaScript.
Построение основы
В основе логики работы нашего примера лежит простой элемент div
, который содержит цифры, сменяющиеся с помощью анимации. Между цифрами имеются пробелы, так что их легко выровнять по вертикали уменьшив ширину контейнера.
<div">0 1 2 3 4 5 6 7 8 9</div>
Затем обернем наш простой элемент в дополнительный контейнер, чтобы выводить только одну цифру:
<div class="cell"> <div class="numbers">0 1 2 3 4 5 6 7 8 9</div> </div>
Для вывода нашей цифры используем следующие стили:
.cell { /*Нужно выводить только одну цифру. Поэтому высота = высоте строки в классе .numbers а ширина = ширине .numbers*/ width: 0.60em; height: 40px; border: 1px solid #000; font-size: 50px; overflow: hidden; } .numbers { width: 0.6em; line-height: 40px; font-family: digital, arial, verdana; text-align: center; } /* Используем шрифт с более подходящим моменту начертанием*/ @font-face { font-family: 'digital'; src: url('../fonts/DS-DIGI.TTF'); }
Теперь добавим анимации к нашей цифре. Логика работы заключается в изменении значения свойства top для абсолютно позиционируемого класса numbers. Также для анимации нужно установить шаги с длительностью 1 секунда, чтобы цифры сменяли друг друга.
.cell { /*Нужно выводить только одну цифру. Поэтому высота = высоте строки в классе .numbers а ширина = ширине .numbers*/ width: 0.60em; height: 40px; border: 1px solid #000; font-size: 50px; overflow: hidden; position: relative; } .numbers { width: 0.6em; line-height: 40px; font-family: digital, arial, verdana; text-align: center; position: absolute; top: 0; left: 0; /* Используем шаги для анимации, чтобы обеспечить смену цифр. 10 цифр = 10 шагов*/ animation: move 1s steps(10, end) infinite; } /* Логика работы заключается в смене значения свойства top */ @keyframes move { 0% {top: 0;} 100% {top: -400px;} /*height = 40. digits = 10. hence -400 to move it completely to the top*/ }
Создаем секундомер
Теперь просто копируем столько цифр для секундомера, сколько нужно. Для соответствующих позиций присваиваем классы секунд, минут, часов. Добавляем разделитель между группами цифр. Также все цифры заключаем в один контейнер и устанавливаем смещение цифр влево, для выравнивания их по горизонтали.
<div class="timer"> <div class="cell"> <div class="numbers tenhour">0 1 2 3 4 5 6 7 8 9</div> </div> <div class="cell"> <div class="numbers hour">0 1 2 3 4 5 6 7 8 9</div> </div> <div class="cell divider"><div class="numbers">:</div></div> <div class="cell"> <div class="numbers tenminute">0 1 2 3 4 5 6 7 8 9</div> </div> <div class="cell"> <div class="numbers minute">0 1 2 3 4 5 6 7 8 9</div> </div> <div class="cell divider"><div class="numbers">:</div></div> <div class="cell"> <div class="numbers tensecond">0 1 2 3 4 5 6 7 8 9</div> </div> <div class="cell"> <div class="numbers second">0 1 2 3 4 5 6 7 8 9</div> </div> <div class="cell divider"><div class="numbers">:</div></div> <div class="cell"> <div class="numbers hundredmilisecond">0 1 2 3 4 5 6 7 8 9</div> </div> <div class="cell"> <div class="numbers tenmilisecond">0 1 2 3 4 5 6 7 8 9</div> </div> <div class="cell"> <div class="numbers milisecond">0 1 2 3 4 5 6 7 8 9</div> </div> </div>
Минут и секунд всего 60. Поэтому надо сделать два вида анимаций - с 10 цифрами и 10 шагами и с 6 цифрами и 6 шагами.
.moveten { animation: moveten 1s steps(10, end) infinite; } .movesix { animation: movesix 1s steps(6, end) infinite; } @keyframes moveten { 0% {top: 0;} 100% {top: -400px;} /*Высота = 40. Цифр = 10. Полное смещение до верха -400 */ } @keyframes movesix { 0% {top: 0;} 100% {top: -240px;} /*Высота = 40. Цифр = 6. Полное смещение до верха -240 */ }
Соответственно изменяем набор классов у цифр в структуре нашего секундомера:
<div class="timer"> <div class="cell"> <div class="numbers tenhour moveten">0 1 2 3 4 5 6 7 8 9</div> </div> <div class="cell"> <div class="numbers hour moveten">0 1 2 3 4 5 6 7 8 9</div> </div> <div class="cell divider"><div class="numbers">:</div></div> <div class="cell"> <div class="numbers tenminute movesix">0 1 2 3 4 5 6</div> </div> <div class="cell"> <div class="numbers minute moveten">0 1 2 3 4 5 6 7 8 9</div> </div> <div class="cell divider"><div class="numbers">:</div></div> <div class="cell"> <div class="numbers tensecond movesix">0 1 2 3 4 5 6</div> </div> <div class="cell"> <div class="numbers second moveten">0 1 2 3 4 5 6 7 8 9</div> </div> <div class="cell divider"><div class="numbers">:</div></div> <div class="cell"> <div class="numbers hundredmilisecond moveten">0 1 2 3 4 5 6 7 8 9</div> </div> <div class="cell"> <div class="numbers tenmilisecond moveten">0 1 2 3 4 5 6 7 8 9</div> </div> <div class="cell"> <div class="numbers milisecond moveten">0 1 2 3 4 5 6 7 8 9</div> </div> </div>
Теперь нужно синхронизировать вывод цифр по времени. Логика здесь простая. На одну цифру тратиться столько времени, сколько соответствует ее положению в секундомере, а в счетчике имеется 10 или 6 цифр. Соответственно длительность соответствующей анимации вычисляется по формуле ПОЛОЖЕНИЕ ЦИФРЫ * КОЛИЧЕСТВО ЦИФР В СЧЕТЧИКЕ.
.second {animation-duration: 10s;} .tensecond {animation-duration: 60s;} /*60 раз.second*/ .milisecond {animation-duration: 1s;} /*1/10 от .second*/ .tenmilisecond {animation-duration: 0.1s;} .hundredmilisecond {animation-duration: 0.01s;} .minute {animation-duration: 600s;} /*60 раз .second*/ .tenminute {animation-duration: 3600s;} /*60 раз .minute*/ .hour {animation-duration: 36000s;} /*60 раз .minute*/ .tenhour {animation-duration: 360000s;} /*10 раз .hour*/
Добавляем элементы управления
Для управления секундомером будем использовать радио кнопки. Добавляем в структуру разметки кнопки и метки для них:
<div class="container"> <!-- Элементы управления --> <input id="start" name="controls" type="radio" /> <input id="stop" name="controls" type="radio" /> <input id="reset" name="controls" type="radio" /> <div class="timer"> <div class="cell"> <div class="numbers tenhour moveten">0 1 2 3 4 5 6 7 8 9</div> </div> <div class="cell"> <div class="numbers hour moveten">0 1 2 3 4 5 6 7 8 9</div> </div> <div class="cell divider"><div class="numbers">:</div></div> <div class="cell"> <div class="numbers tenminute movesix">0 1 2 3 4 5 6</div> </div> <div class="cell"> <div class="numbers minute moveten">0 1 2 3 4 5 6 7 8 9</div> </div> <div class="cell divider"><div class="numbers">:</div></div> <div class="cell"> <div class="numbers tensecond movesix">0 1 2 3 4 5 6</div> </div> <div class="cell"> <div class="numbers second moveten">0 1 2 3 4 5 6 7 8 9</div> </div> <div class="cell divider"><div class="numbers">:</div></div> <div class="cell"> <div class="numbers milisecond moveten">0 1 2 3 4 5 6 7 8 9</div> </div> <div class="cell"> <div class="numbers tenmilisecond moveten">0 1 2 3 4 5 6 7 8 9</div> </div> <div class="cell"> <div class="numbers hundredmilisecond moveten">0 1 2 3 4 5 6 7 8 9</div> </div> </div> <!-- Метки для кнопок элементов управления --> <div id="timer_controls"> <label for="start">Start</label> <label for="stop">Stop</label> <label for="reset">Reset</label> </div> </div>
Задаем стили для кнопок и меток и определяем функционал с помощью свойства animation-play-state
. Также по умолчанию нужно остановить анимацию.
#timer_controls { margin-top: -5px; } #timer_controls label { cursor: pointer; padding: 5px 10px; background: #efefef; font-family: arial, verdana, tahoma; font-size: 11px; border-radius: 0 0 3px 3px; } input[name="controls"] {display: none;} /* Функционал элементов управления */ #stop:checked~.timer .numbers {animation-play-state: paused;} #start:checked~.timer .numbers {animation-play-state: running;} #reset:checked~.timer .numbers {animation: none;} .moveten { animation: moveten 1s steps(10, end) infinite; /* По умолчанию анимация остановлена */ animation-play-state: paused; } .movesix { animation: movesix 1s steps(6, end) infinite; /* По умолчанию анимация остановлена */ animation-play-state: paused; }
Заключение
Секундомер готов. Остается только добавить стили для облагораживания внешнего вида.
Источник: http://feedproxy.google.com/~r/ruseller/CdHX/~3/faVhpKlWqoU/lessons.php
Дайджест новых статей по интернет-маркетингу на ваш email
Новые статьи и публикации
- 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
- 2024-01-18 » Мифический человеко-DevOps
- 2023-12-28 » Google подвел итоги 2023 года в поиске
- 2023-12-28 » 5 ошибок отдела продаж, из-за которых вы теряете клиентов
- 2023-12-28 » Американский суд признал монополию Google на рынках дистрибуции Android-приложений
- 2023-12-28 » Хостинг-провайдер GoDaddy перестанет оказывать услуги пользователям из России
Кто мало хочет, тот дешево стоит |
Мы создаем сайты, которые работают! Профессионально обслуживаем и продвигаем их , а также по всей России и ближнему зарубежью с 2006 года!
Как мы работаем
Заявка
Позвоните или оставьте заявку на сайте.
Консультация
Обсуждаем что именно Вам нужно и помогаем определить как это лучше сделать!
Договор
Заключаем договор на оказание услуг, в котором прописаны условия и обязанности обеих сторон.
Выполнение работ
Непосредственно оказание требующихся услуг и работ по вашему заданию.
Поддержка
Сдача выполненых работ, последующие корректировки и поддержка при необходимости.