часы на css3 и jquery

Делаем красивые и легкие часы с помощью CSS3 и jQuery

Предлагаем Вам небольшое руководство по тому, как создать симпатичные «настенные» часы, который можно использовать в любом месте Вашего сайта. Используем CSS3 и jQuery.

Итак, нам понадобится компактная HTML-разметка, немного стилей и пару необходимых строк JS-кода. Приступаем к созданию красивых часов для сайта:

1. Структура HTML

Ничего особенного – обертка и три div`а в качестве часовой, минутной и секундной стрелок.

2. Стили CSS

Абсолютным позиционированием задаем начальное положение стрелок и рисуем индикаторы с помощью линейных градиентов.

3. Сценарий jQuery

Определяем в скрипте наши стрелочки и применяем к ним свойство transform на заданный промежуток времени. Просто и изящно.

Скачать готовый пример Вы можете по ссылке выше. Удачи!

317 просмотров
В поисках шаблона для сайта?