Аналоговые часы на 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

Читать комменты и комментировать

Добавить комментарий / отзыв



Защитный код
Обновить

Аналоговые часы на CSS3 без JavaScript | | 2012-08-16 21:03:56 | | Статьи Web-мастеру | | В данном уроке мы сделаем аналоговые часы (со стрелками), используя только CSS. В наших часах будет три стрелки - часовая, минутная и секундная. Каждая из стрелок представляет собой прямоугольник, поворачивающийся на определенный угол. А в ос | РэдЛайн, создание сайта, заказать сайт, разработка сайтов, реклама в Интернете, продвижение, маркетинговые исследования, дизайн студия, веб дизайн, раскрутка сайта, создать сайт компании, сделать сайт, создание сайтов, изготовление сайта, обслуживание сайтов, изготовление сайтов, заказать интернет сайт, создать сайт, изготовить сайт, разработка сайта, web студия, создание веб сайта, поддержка сайта, сайт на заказ, сопровождение сайта, дизайн сайта, сайт под ключ, заказ сайта, реклама сайта, хостинг, регистрация доменов, хабаровск, краснодар, москва, комсомольск |
 
Поделиться с друзьями: