Аналоговые часы на CSS3 без JavaScript
В данном уроке мы сделаем аналоговые часы (со стрелками), используя только CSS. В наших часах будет три стрелки - часовая, минутная и секундная. Каждая из стрелок представляет собой прямоугольник, поворачивающийся на определенный угол. А в основе функционирования лежат трансформации и задержки на рассчитанное время.
В уроке используются префиксы только для браузеров Firefox и Webkit, так как материал является демонстрацией возможностей CSS.
Разметка HTML
Структура разметки довольна простая, не смотря на громоздкость кода. Для каждого положения стрелки используется свой элемент div
.
<!DOCTYPE html> <html lang="ru"> <head> <meta charset="utf-8" /> <title>Аналоговые часты на CSS3 (без JavaScript) | Материалы сайта RUSELLER.COM</title> <link href="/css/layout.css" type="text/css" rel="stylesheet"> <link href="/css/clocks.css" type="text/css" rel="stylesheet"> </head> <body> <div class="container"> <div id="clock"> <div class="secs"> <div id="s1"></div><div id="s2"></div><div id="s3"></div> <div id="s4"></div><div id="s5"></div><div id="s6"></div> <div id="s7"></div><div id="s8"></div><div id="s9"></div> <div id="s10"></div><div id="s11"></div><div id="s12"></div> <div id="s13"></div><div id="s14"></div><div id="s15"></div> <div id="s16"></div><div id="s17"></div><div id="s18"></div> <div id="s19"></div><div id="s20"></div><div id="s21"></div> <div id="s22"></div><div id="s23"></div><div id="s24"></div> <div id="s25"></div><div id="s26"></div><div id="s27"></div> <div id="s28"></div><div id="s29"></div><div id="s30"></div> <div id="s31"></div><div id="s32"></div><div id="s33"></div> <div id="s34"></div><div id="s35"></div><div id="s36"></div> <div id="s37"></div><div id="s38"></div><div id="s39"></div> <div id="s40"></div><div id="s41"></div><div id="s42"></div> <div id="s43"></div><div id="s44"></div><div id="s45"></div> <div id="s46"></div><div id="s47"></div><div id="s48"></div> <div id="s49"></div><div id="s50"></div><div id="s51"></div> <div id="s52"></div><div id="s53"></div><div id="s54"></div> <div id="s55"></div><div id="s56"></div><div id="s57"></div> <div id="s58"></div><div id="s59"></div><div id="s60"></div> </div> <div class="mins"> <div id="m1"></div><div id="m2"></div><div id="m3"></div> <div id="m4"></div><div id="m5"></div><div id="m6"></div> <div id="m7"></div><div id="m8"></div><div id="m9"></div> <div id="m10"></div><div id="m11"></div><div id="m12"></div> <div id="m13"></div><div id="m14"></div><div id="m15"></div> <div id="m16"></div><div id="m17"></div><div id="m18"></div> <div id="m19"></div><div id="m20"></div><div id="m21"></div> <div id="m22"></div><div id="m23"></div><div id="m24"></div> <div id="m25"></div><div id="m26"></div><div id="m27"></div> <div id="m28"></div><div id="m29"></div><div id="m30"></div> <div id="m31"></div><div id="m32"></div><div id="m33"></div> <div id="m34"></div><div id="m35"></div><div id="m36"></div> <div id="m37"></div><div id="m38"></div><div id="m39"></div> <div id="m40"></div><div id="m41"></div><div id="m42"></div> <div id="m43"></div><div id="m44"></div><div id="m45"></div> <div id="m46"></div><div id="m47"></div><div id="m48"></div> <div id="m49"></div><div id="m50"></div><div id="m51"></div> <div id="m52"></div><div id="m53"></div><div id="m54"></div> <div id="m55"></div><div id="m56"></div><div id="m57"></div> <div id="m58"></div><div id="m59"></div><div id="m60"></div> </div> <div class="hours"> <div id="h1"></div><div id="h2"></div><div id="h3"></div> <div id="h4"></div><div id="h5"></div><div id="h6"></div> <div id="h7"></div><div id="h8"></div><div id="h9"></div> <div id="h10"></div><div id="h11"></div><div id="h12"></div> </div> </div> </div> </body> </html>
CSS
Код приводится с сокращениями - удалены повторяющиеся классы для положений стрелок, которые отличаются только значениями. Полный код можно посмотреть в исходниках.
#clock { background: #fff url(cface.png) 0 0 no-repeat; height: 500px; margin: 0 auto; overflow: hidden; position: relative; width: 500px; -webkit-border-radius: 250px; -moz-border-radius: 250px; -ms-border-radius: 250px; -o-border-radius: 250px; border-radius: 250px; } /* секунды */ @-webkit-keyframes secs_effect { 0% {opacity: 1;} 1.66% {opacity: 1;} 1.67% {opacity: 0;} 100% {opacity: 0;} } @-moz-keyframes secs_effect { 0% {opacity: 1;} 1.66% {opacity: 1;} 1.67% {opacity: 0;} 100% {opacity: 0;} } #clock .secs { height: 400px; left: 155px; position: absolute; top: 249px; width: 400px; } #clock .secs div { background-color: #860000; height: 2px; opacity: 0; position: absolute; width: 190px; -moz-animation-name: secs_effect; -moz-animation-duration: 60s; -moz-animation-timing-function: linear; -moz-animation-iteration-count: infinite; -moz-animation-direction: normal; -moz-animation-delay: 0; -moz-animation-play-state: running; -moz-animation-fill-mode: forwards; -webkit-animation-name: secs_effect; -webkit-animation-duration: 60s; -webkit-animation-timing-function: linear; -webkit-animation-iteration-count: infinite; -webkit-animation-direction: normal; -webkit-animation-delay: 0; -webkit-animation-play-state: running; -webkit-animation-fill-mode: forwards; } #clock #s1 { -moz-transform: rotate(-90deg) translatex(130px); -moz-animation-delay: 0s; -webkit-transform: rotate(-90deg) translatex(130px); -webkit-animation-delay: 0s; } #clock #s2 { -moz-transform: rotate(-84deg) translatex(130px); -moz-animation-delay: 1s; -webkit-transform: rotate(-84deg) translatex(130px); -webkit-animation-delay: 1s; } #clock #s3 { -moz-transform: rotate(-78deg) translatex(130px); -moz-animation-delay: 2s; -webkit-transform: rotate(-78deg) translatex(130px); -webkit-animation-delay: 2s; } ........... #clock #s60 { -moz-transform: rotate(264deg) translatex(130px); -moz-animation-delay: 59s; -webkit-transform: rotate(264deg) translatex(130px); -webkit-animation-delay: 59s; } /* минуты*/ @-webkit-keyframes mins_effect { 0% {opacity: 1;} 1.66% {opacity: 1;} 1.67% {opacity: 0;} 100% {opacity: 0;} } @-moz-keyframes mins_effect { 0% {opacity: 1;} 1.66% {opacity: 1;} 1.67% {opacity: 0;} 100% {opacity: 0;} } #clock .mins { height: 300px; left: 175px; position: absolute; top: 249px; width: 300px; } #clock .mins div { background-color: #000086; height: 3px; opacity: 0; position: absolute; width: 150px; -moz-animation-name: mins_effect; -moz-animation-duration: 3600s; -moz-animation-timing-function: linear; -moz-animation-iteration-count: infinite; -moz-animation-direction: normal; -moz-animation-delay: 0; -moz-animation-play-state: running; -moz-animation-fill-mode: forwards; -webkit-animation-name: mins_effect; -webkit-animation-duration: 3600s; -webkit-animation-timing-function: linear; -webkit-animation-iteration-count: infinite; -webkit-animation-direction: normal; -webkit-animation-delay: 0; -webkit-animation-play-state: running; -webkit-animation-fill-mode: forwards; } #clock #m1 { -moz-transform: rotate(-90deg) translatex(110px); -moz-animation-delay: 0s; -webkit-transform: rotate(-90deg) translatex(110px); -webkit-animation-delay: 0s; } #clock #m2 { -moz-transform: rotate(-84deg) translatex(110px); -moz-animation-delay: 60s; -webkit-transform: rotate(-84deg) translatex(110px); -webkit-animation-delay: 60s; } #clock #m3 { -moz-transform: rotate(-78deg) translatex(110px); -moz-animation-delay: 120s; -webkit-transform: rotate(-78deg) translatex(110px); -webkit-animation-delay: 120s; } ........... #clock #m60 { -moz-transform: rotate(264deg) translatex(110px); -moz-animation-delay: 3540s; -webkit-transform: rotate(264deg) translatex(110px); -webkit-animation-delay: 3540s; } /* часы*/ @-webkit-keyframes hours_effect { 0% {opacity: 1;} 8.33% {opacity: 1;} 8.34% {opacity: 0;} 100% {opacity: 0;} } @-moz-keyframes hours_effect { 0% {opacity: 1;} 8.33% {opacity: 1;} 8.34% {opacity: 0;} 100% {opacity: 0;} } #clock .hours { height: 300px; left: 175px; position: absolute; top: 249px; width: 300px; } #clock .hours div { background-color: #860086; height: 3px; opacity: 0; position: absolute; width: 150px; -moz-animation-name: hours_effect; -moz-animation-duration: 43200s; -moz-animation-timing-function: linear; -moz-animation-iteration-count: infinite; -moz-animation-direction: normal; -moz-animation-delay: 0; -moz-animation-play-state: running; -moz-animation-fill-mode: forwards; -webkit-animation-name: hours_effect; -webkit-animation-duration: 43200s; -webkit-animation-timing-function: linear; -webkit-animation-iteration-count: infinite; -webkit-animation-direction: normal; -webkit-animation-delay: 0; -webkit-animation-play-state: running; -webkit-animation-fill-mode: forwards; } #clock #h1 { -moz-transform: rotate(-180deg) translatex(110px); -moz-animation-delay: 0s; -webkit-transform: rotate(-180deg) translatex(110px); -webkit-animation-delay: 0s; } #clock #h2 { -moz-transform: rotate(-150deg) translatex(110px); -moz-animation-delay: 3600s; -webkit-transform: rotate(-150deg) translatex(110px); -webkit-animation-delay: 3600s; } #clock #h3 { -moz-transform: rotate(-120deg) translatex(110px); -moz-animation-delay: 7200s; -webkit-transform: rotate(-120deg) translatex(110px); -webkit-animation-delay: 7200s; } ........... #clock #h12 { -moz-transform: rotate(150deg) translatex(110px); -moz-animation-delay: 39600s; -webkit-transform: rotate(150deg) translatex(110px); -webkit-animation-delay: 39600s; }
В качестве циферблата используется изображение, которое входит в комплект исходников.
Источник: http://feedproxy.google.com/~r/ruseller/CdHX/~3/l0X_9hMYNqw/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 года!
Как мы работаем
Заявка
Позвоните или оставьте заявку на сайте.
Консультация
Обсуждаем что именно Вам нужно и помогаем определить как это лучше сделать!
Договор
Заключаем договор на оказание услуг, в котором прописаны условия и обязанности обеих сторон.
Выполнение работ
Непосредственно оказание требующихся услуг и работ по вашему заданию.
Поддержка
Сдача выполненых работ, последующие корректировки и поддержка при необходимости.