;-)
  • Инвентарь
  • Техногрет
  • Денис Хрипков

    CSS3-часы без JavaScript 2 февраля 2012


    Для просмотра этого примера необходим браузер Safari 4+, Firefox 6+ или Chrome 13+.

    Задача.

    Сделать часы без использования картинок и JavaScript.

    Начальное положение стрелок задается в динамическом CSS, который формирует серверный скрипт на PHP (1,57 КБ), или на Parser (1,34 КБ). Нужный префикс для @keyframes определяется по HTTP_USER_AGENT.

    Часы показывают московское время (UTC+4). Местное время на сайте может выводиться с применением настроек профиля пользователя или через базу IP-адресов.

    Динамический CSS:

    01 
    02 
    03 
    04 
    05 
    06 
    07 
    08 
    09 
    10 
    11 
    12 
    13 
    14 
    15 
    16 
    17 
    18 
    19 
    20 
    21 
    22 
    23 
    24 
    25 
    26 
    27 
    28 
    29 
    30 
    /* UTC+4 time 23:36:50 */
    /* Browser prefix: -webkit- */
    
    .myClockJS .dial .arr b:nth-child(1)
    , .myClockJS .dial .arr b:nth-child(2)
    {
        -webkit-animation-name: arr1;
    }
    @-webkit-keyframes arr1 {
        from { -webkit-transform: rotate(708deg)}
        to { -webkit-transform: rotate(1068deg)}
    }
    .myClockJS .dial .arr b:nth-child(3)
    , .myClockJS .dial .arr b:nth-child(4)
    {
        -webkit-animation-name: arr2;
    }
    @-webkit-keyframes arr2 {
        from { -webkit-transform: rotate(221deg)}
        to { -webkit-transform: rotate(581deg)}
    }
    .myClockJS .dial .arr b:nth-child(5)
    , .myClockJS .dial .arr b:nth-child(7)
    {
        -webkit-animation-name: arr3;
    }
    @-webkit-keyframes arr3 {
        from { -webkit-transform: rotate(300deg)}
        to { -webkit-transform: rotate(660deg)}
    }

    Статический CSS и HTML:

    01 
    02 
    03 
    04 
    05 
    06 
    07 
    08 
    09 
    10 
    11 
    12 
    13 
    14 
    15 
    16 
    17 
    18 
    19 
    20 
    21 
    22 
    23 
    24 
    25 
    26 
    27 
    28 
    29 
    30 
    31 
    32 
    33 
    34 
    35 
    36 
    37 
    38 
    39 
    40 
    41 
    42 
    43 
    44 
    45 
    46 
    47 
    48 
    49 
    50 
    51 
    52 
    53 
    54 
    55 
    56 
    57 
    58 
    59 
    60 
    61 
    62 
    63 
    64 
    65 
    66 
    67 
    68 
    69 
    70 
    71 
    72 
    73 
    74 
    75 
    76 
    77 
    78 
    79 
    80 
    81 
    82 
    83 
    84 
    85 
    86 
    87 
    88 
    89 
    90 
    91 
    92 
    93 
    94 
    95 
    96 
    97 
    98 
    99 
    100 
    101 
    102 
    103 
    104 
    105 
    106 
    107 
    108 
    109 
    110 
    111 
    112 
    113 
    114 
    115 
    116 
    117 
    118 
    119 
    120 
    121 
    122 
    123 
    124 
    125 
    126 
    127 
    128 
    129 
    130 
    131 
    132 
    133 
    134 
    135 
    136 
    137 
    138 
    139 
    140 
    141 
    142 
    143 
    144 
    145 
    146 
    147 
    148 
    149 
    150 
    151 
    152 
    153 
    154 
    155 
    156 
    157 
    158 
    159 
    160 
    161 
    162 
    163 
    164 
    165 
    166 
    167 
    168 
    169 
    170 
    171 
    172 
    173 
    174 
    175 
    176 
    177 
    178 
    179 
    180 
    181 
    182 
    183 
    184 
    185 
    186 
    187 
    188 
    189 
    190 
    191 
    192 
    193 
    194 
    195 
    196 
    197 
    198 
    199 
    200 
    201 
    202 
    203 
    204 
    205 
    206 
    207 
    208 
    209 
    210 
    211 
    212 
    213 
    214 
    215 
    216 
    217 
    218 
    219 
    220 
    221 
    222 
    223 
    224 
    225 
    226 
    227 
    228 
    229 
    230 
    231 
    232 
    233 
    234 
    235 
    236 
    237 
    238 
    239 
    240 
    241 
    242 
    243 
    244 
    245 
    246 
    247 
    248 
    249 
    250 
    251 
    252 
    253 
    254 
    255 
    256 
    257 
    258 
    259 
    260 
    261 
    262 
    263 
    264 
    265 
    266 
    267 
    268 
    269 
    270 
    271 
    272 
    273 
    274 
    275 
    276 
    277 
    278 
    279 
    280 
    281 
    282 
    283 
    284 
    285 
    286 
    287 
    288 
    289 
    290 
    291 
    292 
    293 
    294 
    295 
    296 
    297 
    298 
    299 
    300 
    301 
    302 
    303 
    304 
    305 
    306 
    307 
    308 
    309 
    310 
    311 
    312 
    313 
    314 
    315 
    316 
    /* global */
    .myClockJS {
        margin: 6em;
    }
    .myClockJS b {
        display: block;
        width: 100%;
        font-weight: normal;
    }
    .myClockJS .inner {
        margin: 0 auto;
        position: relative;
    }
    /* dial clock */
    .myClockJS .dial.inner {
        width: 251px;
        height: 251px;
    }
    .myClockJS .dial .shadow {
        position: absolute;
        width: 100%;
        height: 100%;
        -webkit-border-radius: 50%;
        -moz-border-radius: 50%;
        -ms-border-radius: 50%;
        -o-border-radius: 50%;
        border-radius: 50%;
    }
    .myClockJS .dial .shadow-out {
        margin: -9% 0 0 -9%;
        padding: 9%;
        -webkit-box-shadow: 0px 10px 30px #747788;
        -moz-box-shadow: 0px 10px 30px #747788;
        -ms-box-shadow: 0px 10px 30px #747788;
        -o-box-shadow: 0px 10px 30px #747788;
        box-shadow: 0px 10px 30px #747788;
        background: #fff;
        background: -webkit-linear-gradient(-90deg, #fff, #eaebed);
        background: -moz-linear-gradient(-90deg, #fff, #eaebed);
        background: -ms-linear-gradient(-90deg, #fff, #eaebed);
        background: -o-linear-gradient(-90deg, #fff, #eaebed);
        background: linear-gradient(-90deg, #fff, #eaebed);
    }
    .myClockJS .dial .shadow-in {
        margin: -4% 0 0 -4%;
        padding: 4%;
        -webkit-box-shadow: 0px 3px 10px #747788 inset;
        -moz-box-shadow: 0px 3px 10px #747788 inset;
        -ms-box-shadow: 0px 3px 10px #747788 inset;
        -o-box-shadow: 0px 3px 10px #747788 inset;
        box-shadow: 0px 3px 10px #747788 inset;
        background: #fff;
        background: -webkit-linear-gradient(-90deg, #fff, #dce1e7);
        background: -moz-linear-gradient(-90deg, #fff, #dce1e7);
        background: -ms-linear-gradient(-90deg, #fff, #dce1e7);
        background: -o-linear-gradient(-90deg, #fff, #dce1e7);
        background: linear-gradient(-90deg, #fff, #dce1e7);
    }
    /* segments */
    .myClockJS .dial .seg b {
        position: absolute;
        width: 1%;
        height: 100%;
        min-width: 1px;
        left: 50%;
        margin-left: -0.4%;
    }
    .myClockJS .dial .seg b b:after
    , .myClockJS .dial .seg b b:before {
        content: '';
        position: absolute;
        width: 100%;
        height: 3%;
        background-color: #aaa;
    }
    /* hours */
    .myClockJS .dial .seg>b>b:before
    , .myClockJS .dial .seg>b>b:after {
        height: 6%;
        width: 250%;
    }
    .myClockJS .dial .seg b:before {
        bottom: 0;
    }
    /* setup all 60 segments */
    .myClockJS .dial .seg>b:last-child{
        -webkit-transform: rotate(90deg);
        -moz-transform: rotate(90deg);
        -ms-transform: rotate(90deg);
        -o-transform: rotate(90deg);
        transform: rotate(90deg);
    }
    .myClockJS .dial .seg>b>b:nth-child(2){
        -webkit-transform: rotate(30deg);
        -moz-transform: rotate(30deg);
        -ms-transform: rotate(30deg);
        -o-transform: rotate(30deg);
        transform: rotate(30deg);
    }
    .myClockJS .dial .seg>b>b:last-child{
        -webkit-transform: rotate(60deg);
        -moz-transform: rotate(60deg);
        -ms-transform: rotate(60deg);
        -o-transform: rotate(60deg);
        transform: rotate(60deg);
    }
    .myClockJS .dial .seg>b>b b{
        -webkit-transform: rotate(6deg);
        -moz-transform: rotate(6deg);
        -ms-transform: rotate(6deg);
        -o-transform: rotate(6deg);
        transform: rotate(6deg);
    }
    .myClockJS .dial .seg>b>b>b:last-child{
        -webkit-transform: rotate(18deg);
        -moz-transform: rotate(18deg);
        -ms-transform: rotate(18deg);
        -o-transform: rotate(18deg);
        transform: rotate(18deg);
    }
    /* arrows with clones, for shadow */
    .myClockJS .dial .arr b {
        position: absolute;
        height: 100%;
        left: 50%;
        min-width: 1px;
    }
    .myClockJS .dial .arr b:after {
        position: absolute;
        width: 100%;
        content: '';
    }
    .myClockJS .dial .arr b:nth-child(1)
    , .myClockJS .dial .arr b:nth-child(2) {
        width: 4.5%;
        margin-left: -2.2%;
    }
    .myClockJS .dial .arr b:nth-child(1):after
    , .myClockJS .dial .arr b:nth-child(2):after {
        height: 25%;
        top: 25%;
        background-color: #000;
    }
    .myClockJS .dial .arr b:nth-child(3)
    , .myClockJS .dial .arr b:nth-child(4) {
        width: 3%;
        margin-left: -1.4%;
    }
    .myClockJS .dial .arr b:nth-child(3):after
    , .myClockJS .dial .arr b:nth-child(4):after {
        height: 37%;
        top: 13%;
        background-color: #000;
    }
    .myClockJS .dial .arr b:nth-child(5)
    , .myClockJS .dial .arr b:nth-child(7) {
        width: 1%;
        min-width: 1px;
        margin-left: -0.3%;
    }
    .myClockJS .dial .arr b:nth-child(5):after
    , .myClockJS .dial .arr b:nth-child(7):after {
        height: 67%;
        background-color: #d70000;
    }
    .myClockJS .dial .arr b:nth-child(6)
    , .myClockJS .dial .arr b:nth-child(8) {
        width: 8%;
        margin-left: -3.9%;
    }
    .myClockJS .dial .arr b:nth-child(6):after
    , .myClockJS .dial .arr b:nth-child(8):after {
        height: 8%;
        top: 46%;
        background-color: #d70000;
        -webkit-border-radius: 50%;
        -moz-border-radius: 50%;
        -ms-border-radius: 50%;
        -o-border-radius: 50%;
        border-radius: 50%;
    }
    .myClockJS .dial .arr b:nth-child(1):after
    , .myClockJS .dial .arr b:nth-child(3):after
    , .myClockJS .dial .arr b:nth-child(5):after
    , .myClockJS .dial .arr b:nth-child(6):after {
        background-color: #000;
        -webkit-box-shadow: 0 0 5px #000;
        -moz-box-shadow: 0 0 5px #000;
        -ms-box-shadow: 0 0 5px #000;
        -o-box-shadow: 0 0 5px #000;
        box-shadow: 0 0 5px #000;
        opacity: 0.2;
    }
    .myClockJS .dial .arr b:nth-child(1)
    , .myClockJS .dial .arr b:nth-child(3) {
        margin-top: 1.5%;
    }
    .myClockJS .dial .arr b:nth-child(6)
    , .myClockJS .dial .arr b:nth-child(5) {
        margin-top: 2%;
    }
    .myClockJS .dial .arr b {
        -webkit-animation-iteration-count: infinite;
        -webkit-animation-timing-function: linear;
        -moz-animation-iteration-count: infinite;
        -moz-animation-timing-function: linear;
        -ms-animation-iteration-count: infinite;
        -ms-animation-timing-function: linear;
        -o-animation-iteration-count: infinite;
        -o-animation-timing-function: linear;
        animation-iteration-count: infinite;
        animation-timing-function: linear;
    }
    .myClockJS .dial .arr b:nth-child(1)
    , .myClockJS .dial .arr b:nth-child(2) {
        -webkit-animation-duration: 43200s;
        -moz-animation-duration: 43200s;
        -ms-animation-duration: 43200s;
        -o-animation-duration: 43200s;
        animation-duration: 43200s;
    }
    .myClockJS .dial .arr b:nth-child(3)
    , .myClockJS .dial .arr b:nth-child(4) {
        -webkit-animation-duration: 3600s;
        -moz-animation-duration: 3600s;
        -ms-animation-duration: 3600s;
        -o-animation-duration: 3600s;
        animation-duration: 3600s;
    }
    .myClockJS .dial .arr b:nth-child(5)
    , .myClockJS .dial .arr b:nth-child(7) {
        -webkit-animation-duration: 60s;
        -moz-animation-duration: 60s;
        -ms-animation-duration: 60s;
        -o-animation-duration: 60s;
        animation-duration: 60s;
    }
    
    <div class="myClockJS">
        <div class="inner dial">
            <b class="shadow shadow-out"></b>
            <b class="shadow shadow-in"></b>
            <div class="seg">
                <b>
    
                    <b>
                        <b>
                            <b></b>
                        </b>
                        <b>
                            <b></b>
                        </b>
                    </b>
    
                    <b>
                        <b>
                            <b></b>
                        </b>
                        <b>
                            <b></b>
                        </b>
                    </b>
    
                    <b>
                        <b>
                            <b></b>
                        </b>
                        <b>
                            <b></b>
                        </b>
                    </b>
    
                </b>
                <b>
    
                    <b>
                        <b>
                            <b></b>
                        </b>
                        <b>
                            <b></b>
                        </b>
                    </b>
    
                    <b>
                        <b>
                            <b></b>
                        </b>
                        <b>
                            <b></b>
                        </b>
                    </b>
    
                    <b>
                        <b>
                            <b></b>
                        </b>
                        <b>
                            <b></b>
                        </b>
                    </b>
    
                </b>
            </div>
            <b class="arr">
                <b></b>
                <b></b>
                <b></b>
                <b></b>
                <b></b>
                <b></b>
                <b></b>
                <b></b>
            </b>
        </div>
    </div>