- Главная»
- Уроки»
- HTML и DHTML»
- Аналоговые часы на CSS3 без JavaScript
Аналоговые часы на 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; }
В качестве циферблата используется изображение, которое входит в комплект исходников.
Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: www.script-tutorials.com/analog-clock-with-pure-css3/
Перевел: Сергей Фастунов
Урок создан: 26 Июля 2012
Просмотров: 33134
Правила перепечатки
5 последних уроков рубрики "HTML и DHTML"
-
Лайфхак: наиполезнейшая функция var_export()
При написании или отладки PHP скриптов мы частенько пользуемся функциями var_dump() и print_r() для вывода предварительных данных массив и объектов. В этом посте я бы хотел рассказать вам о функции var_export(), которая может преобразовать массив в формат, пригодный для PHP кода.
-
17 бесплатных шаблонов админок
Парочка бесплатных шаблонов панелей администрирования.
-
30 сайтов для скачки бесплатных шаблонов почтовых писем
Создание шаблона для письма не такое уж простое дело. Предлагаем вам подборку из 30 сайтов, где можно бесплатно скачать подобные шаблоны на любой вкус.
-
Как осуществить задержку при нажатии клавиши с помощью jQuery?
К примеру у вас есть поле поиска, которое обрабатывается при каждом нажатии клавиши клавиатуры. Если кто-то захочет написать слово Windows, AJAX запрос будет отправлен по следующим фрагментам: W, Wi, Win, Wind, Windo, Window, Windows. Проблема?.
-
15 новых сайтов для скачивания бесплатных фото
Подборка из 15 новых сайтов, где можно скачать бесплатные фотографии для заполнения своих сайтов.