Аналоговые часы в чистом CSS3: точное время без JavaScript

Сегодня — еще одна замечательная статья — мы собираемся создать чистые CSS3 Analog Clock без какого-либо javascript (мы собираемся использовать мощь CSS3 с анимацией для его создания). Наши часы имеют три стрелки на лице — часы, минуты и секунды. Каждый из них представляет собой узкий прямоугольник, повернутый на нужный угол. Как это работает? — Легко: я использую необходимые задержки для всех этих стрелок. Как именно — читайте дальше.

Для наших часов я подготовил стили -webkit и -moz. Поэтому имейте в виду, что эти часы будут работать только в браузерах Firefox и Webkit (Chrome и Safari). Если вам нравится — вы всегда можете расширить необходимые стили (для стрелок / стрелок) для браузеров IE и Opera (добавив одинаковые таблицы стилей с префиксами -ms и -o).

Вот пример и загружаемый пакет:

Live Demo

скачать в упаковке

Хорошо, скачайте файлы примеров и давайте начнем кодировать!

Шаг 1. Разметка HTML

Разметка для наших часов не очень проста — она содержит много элементов DIV. Каждый из них является одной из наших стрел / рук. Вот.

index.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>Analog Clock with Pure CSS3 (without javascript) | Script Tutorials</title>
        <link href="css/layout.css" type="text/css" rel="stylesheet">
        <link href="css/clocks.css" type="text/css" rel="stylesheet">
    </head>
    <body>
        <header>
            <h2>Analog Clock with Pure CSS3 (without javascript)</h2>
            <a href="http://www.script-tutorials.com/analog-clock-with-pure-css3/" class="stuts">Back to original tutorial on <span>Script Tutorials</span></a>
        </header>
        <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>

Шаг 2. CSS

Теперь — стили CSS. Как обычно, мы не будем публиковать стили макета главной страницы (layout.css). Но вот таблицы стилей для наших часов:

CSS / clocks.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;
}

/* seconds */
@-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;
}

/* minutes */
@-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;
}

/* hours */
@-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;
}

Теперь — вы можете понять основную идею. Я не буду публиковать все «повторяющиеся» стили для каждой стрелки. Полный код вы можете найти в нашей упаковке.

Шаг 4. Изображения

Для наших часов я использовал одно изображение (как лицо наших часов):

Live Demo

скачать в упаковке

Вывод

Наконец-то мы построили наши часы! Это было сложно, но мы сделали это. Я надеюсь, что это будет интересным дополнением к вашему сайту. Не забудьте сказать спасибо и оставить комментарий. Удачи!

Источник: http://www.script-tutorials.com/analog-clock-with-pure-css3/

Аналоговые часы в чистом CSS3: точное время без JavaScript

Live Demo

скачать в упаковке

Шаг 1. Разметка HTML

index.html

Шаг 2. CSS

CSS / clocks.css

Шаг 4. Изображения

Live Demo

скачать в упаковке

Вывод

Категории

Последние статьи

Рефакторинг Hudson God Class

Альтернативы синтаксиса Java лямбда

Morphia и MongoDB: развивающиеся структуры документов

OpenShift Express: развертывание приложения Java EE (с поддержкой AS7)

Интеграция jqGrid, REST, AJAX и Spring MVC