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

1
2
3
4
5

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

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

Bootstrap: 3, 4

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

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

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

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

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

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

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

Рейтинг: 5.0 / 5 - 4 голосов

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

Авторство: https://goo.gl/DiRh6n

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

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

Теги: Snippet, сниппет, Bootstrap, Responsive, html, Clock, адаптивные, SVG, Часы

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

Добавлено: 2017-05-16 в 00:34

Метка: 1494884082

⇄ ⇅

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

<style>
body{
background: #159957; /* fallback for old browsers */
background: -webkit-linear-gradient(to right, #155799, #159957); /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, #155799, #159957); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}
</style>

<div class="container"><div class="row">

<div class="col-xs-12 text-center">

<div class="filler"></div> 
 <svg width="200" height="200"> 
 <filter id="innerShadow" x="-20%" y="-20%" width="140%" height="140%"> 
 <feGaussianBlur in="SourceGraphic" stdDeviation="3" result="blur"/> 
 <feOffset in="blur" dx="2.5" dy="2.5"/> 
 </filter> 
 <g> 
 <circle id="shadow" style="fill:rgba(0,0,0,0.1)" cx="97" cy="100" r="87" filter="url(#innerShadow)"></circle> 
 <circle id="circle" style="stroke: #FFF; stroke-width: 12px; fill:#20B7AF" cx="100" cy="100" r="80"></circle> 
 </g> 
 <g> 
 <line x1="100" y1="100" x2="100" y2="55" transform="rotate(80 100 100)" style="stroke-width: 3px; stroke: #fffbf9;" id="hourhand"> 
 <animatetransform attributeName="transform" 
 attributeType="XML" 
 type="rotate" 
 dur="43200s" 
 repeatCount="indefinite"/> 
 </line> 
 <line x1="100" y1="100" x2="100" y2="40" style="stroke-width: 4px; stroke: #fdfdfd;" id="minutehand"> 
 <animatetransform attributeName="transform" 
 attributeType="XML" 
 type="rotate" 
 dur="3600s" 
 repeatCount="indefinite"/> 
 </line> 
 <line x1="100" y1="100" x2="100" y2="30" style="stroke-width: 2px; stroke: #C1EFED;" id="secondhand"> 
 <animatetransform attributeName="transform" 
 attributeType="XML" 
 type="rotate" 
 dur="60s" 
 repeatCount="indefinite"/> 
 </line> 
 </g> 
 <circle id="center" style="fill:#128A86; stroke: #C1EFED; stroke-width: 2px;" cx="100" cy="100" r="3"></circle> 
 </svg>

</div>

</div></div>

<script>
var hands = [];
hands.push(document.querySelector('#secondhand > *'));
hands.push(document.querySelector('#minutehand > *'));
hands.push(document.querySelector('#hourhand > *'));
var cx = 100;
var cy = 100;
function shifter(val) {
 return [val, cx, cy].join(' ');
}
var date = new Date();
var hoursAngle = 360 * date.getHours() / 12 + date.getMinutes() / 2;
var minuteAngle = 360 * date.getMinutes() / 60;
var secAngle = 360 * date.getSeconds() / 60;
hands[0].setAttribute('from', shifter(secAngle));
hands[0].setAttribute('to', shifter(secAngle + 360));
hands[1].setAttribute('from', shifter(minuteAngle));
hands[1].setAttribute('to', shifter(minuteAngle + 360));
hands[2].setAttribute('from', shifter(hoursAngle));
hands[2].setAttribute('to', shifter(hoursAngle + 360));
for (var i = 1; i <= 12; i++) {
 var el = document.createElementNS('http://www.w3.org/2000/svg', 'line');
 el.setAttribute('x1', '100');
 el.setAttribute('y1', '30');
 el.setAttribute('x2', '100');
 el.setAttribute('y2', '40');
 el.setAttribute('transform', 'rotate(' + (i * 360 / 12) + ' 100 100)');
 el.setAttribute('style', 'stroke: #ffffff;');
document.querySelector('svg').appendChild(el);
}
</script>