jsClock / Часы / Сниппеты Bootstrap | BootstrapТема

1
2
3
4
5

Версия: v1.0.1

Каталог: Сниппеты Bootstrap

Категория: Часы

Bootstrap: 3, 4

Для CMS: HTML, Drupal, Joomla, uCoz, WordPress, Magento, OpenCart, PrestaShop

Язык: Английский

Вес файла: 3.1 Kb

Уникальный ID: 2520

Количество символов:

Посмотрели: 2473 раз

Помощь: установка & настройка

Прикреплён файл №2: /stuff/0-0-0-2520-20

Скачали бесплатно: 52 раз

Прокомментировали: 0 раз

Рейтинг: 4.1 / 5 - 9 голосов

Тип лицензии: CC BY 4.0

Авторство: Посмотреть

Информация: Пользователям

Информация: Правообладателям

Теги: Snippet, Clock, js clock, сниппет, Bootstrap, Часы

Поделился: BootstrapТема

Добавлено: 2017-12-03 в 11:44

Метка: 1566150328

⇄ ⇅

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" />

<style>
.clock {
 width: 200px;
 height: 200px;
 border: solid 10px #333;
 border-radius: 50%;
 margin: calc(50vh - 100px) calc(50% - 100px);
 position: relative;
 background: rgba(256, 256, 256, 0.25);
 cursor: pointer;
}
@media only screen and (min-width: 768px) and (min-height: 540px) {
 .clock {
 width: 300px;
 height: 300px;
 border: solid 15px #333;
 margin: calc(50vh - 150px) calc(50% - 150px);
 }
}
.dot {
 background: red;
 width: 10px;
 height: 10px;
 position: absolute;
 top: calc(50% - 5px);
 left: calc(50% - 5px);
 display: none;
}
.spire {
 position: absolute;
}
.hour {
 top: calc(50% - 37.5px);
 left: calc(50% - 2.5px);
 width: 5px;
 height: 40px;
 border-radius: 0 0 5px 5px;
 background: #333;
 z-index: 4;
 transform-origin: 2.5px 37.5px;
 transition: transform 2s ease;
}
@media only screen and (min-width: 768px) and (min-height: 540px) {
 .hour {
 top: calc(50% - 57.5px);
 left: calc(50% - 2.5px);
 width: 5px;
 height: 60px;
 transform-origin: 2.5px 57.5px;
 }
}
.min {
 top: calc(50% - 67.5px);
 left: calc(50% - 2.5px);
 width: 5px;
 height: 70px;
 border-radius: 0 0 5px 5px;
 background: rgba(167, 139, 131, 1);
 z-index: 3;
 transform-origin: 2.5px 67.5px;
 transition: transform 1s ease;
}
@media only screen and (min-width: 768px) and (min-height: 540px) {
 .min {
 top: calc(50% - 102.5px);
 left: calc(50% - 2.5px);
 width: 5px;
 height: 105px;
 transform-origin: 2.5px 102.5px;
 }
}
.sec {
 top: calc(50% - 78.75px);
 left: calc(50% - 1.25px);
 width: 2.5px;
 height: 80px;
 border-radius: 0 0 2.5px 2.5px;
 background: rgba(231, 76, 60, 1);
 z-index: 2;
 transform-origin: 1.25px 78.75px;
 transition: transform .5s ease;
}
@media only screen and (min-width: 768px) and (min-height: 540px) {
 .sec {
 top: calc(50% - 118.75px);
 left: calc(50% - 1.25px);
 width: 2.5px;
 height: 120px;
 transform-origin: 1.25px 118.75px;
 }
}
.digit {
 position: absolute;
 top: calc(50% - 100px);
 left: calc(50% - 100px);
 width: 200px;
 font: 42px/200px Arial;
 color: rgba(32, 32, 32, 0.6);
 display: none;
 z-index: -10;
}
@media only screen and (min-width: 768px) and (min-height: 540px) {
 .digit {
 top: calc(50% - 150px);
 left: calc(50% - 150px);
 width: 300px;
 font: 58px/300px Arial;
 }
}
.clock:hover + .digit {
 display: block;
}
</style>

<div class="container">
<div class="row">
<div class="col-md-4 col-md-offset-4 text-center">

<div class="clock">
<div class="dot"></div>
<div class="spire hour"></div>
<div class="spire min"></div>
<div class="spire sec"></div>
</div>
<div class="digit">00:00</div>

</div>
</div>
</div>

<script src="https://bootstraptema.ru/snippets/clock/2017/jsclock/jsclock.js"></script>