? Введение

Вы когда-нибудь хотели создать часы, которые не просто показывают время? Что, если каждая протекающая секунда может принести новую тему? С помощью CSS @property и возможностей манипуляции цветом hsl() вы можете! В этой статье я покажу вам процесс создания динамичных и визуально привлекательных «Тематических часов», которые каждую секунду меняют свои цвета (так называемые темы), привнося новую жизнь в каждый момент!.

?️ Концепция

Идея «Тематических часов» проста, но увлекательна: с течением времени внешний вид часов меняется. Мы будем использовать пользовательские свойства CSS для анимации оттенка цветов (ну, это угол в градусах) и обновлять тему часов каждую секунду (а также каждую минуту и ​​час). Результат? Бесшовные, постоянно меняющиеся часы, которые завораживают и функциональны.

? Демо и код

Ну, вот полный код «Тематических часов». Я разберу это на части, чтобы понять, как каждая часть влияет на общий эффект.

? Разбираем код

1.Пользовательские свойства CSS и @property. Магия этих часов, меняющих тему, заключается в использовании пользовательских свойств CSS и правила @property. Мы определяем пользовательское свойство --angle, которое управляет оттенком цветов часов с помощью функции hsl(). Анимируя это свойство в течение 60 секунд с помощью правила @keyframes, мы достигаем непрерывного перехода цвета.

• Пользовательское свойство --angle: управляет оттенком цвета hsl(), динамически изменяя тему. а также делает пользовательское свойство анимируемым, обеспечивая плавные переходы.
• CSS @keyframes anim: эта анимация вращает значение оттенка от 0 до 360 в течение 60 секунд, циклически проходя весь цветовой спектр.

2.Динамическое переключение тем: кнопка переключения позволяет пользователям переключаться между светлой и темной темами. Нажатие кнопки переключает темный класс элемента html, изменяя внешний вид часов.

• Переключение светлого/темного режима: тему можно переключить с помощью кнопки, которая динамически обновляет внешний вид часов.
• Анимация вращения контейнера: контейнер часов вращается при изменении темы, добавляя тонкий эффект перехода.

3. Обновление часов и времени. Часть кода JavaScript отвечает за обновление стрелок часов и цифрового отображения времени. Функция setTime пересчитывает положение часовой, минутной и секундной стрелок каждую секунду, а также обновляет отображение времени и даты.

• Функция «шкала»: преобразует текущее время в градусы, соответствующие вращению стрелок часов.

- Обновления в реальном времени: стрелки часов и цифровое время обновляются каждую секунду в соответствии с текущим временем.

? Собираем все части вместе

Объединив возможности пользовательских свойств CSS, манипуляцию с цветом hsl() и правило @property, мы создали часы, которые не только показывают время, но и меняют свой внешний вид с каждой секундой. Этот проект — отличный пример того, как можно использовать CSS для создания интерактивных и визуально привлекательных веб-элементов с минимальным использованием JavaScript.

Поставьте лайк ❤️ и подпишитесь, чтобы увидеть больше alishata128