ZorNet.Ru — сайт для вебмастера » JavaScript и jQuery » Цифровые часы с эффектом свечения на CSS

Цифровые часы с эффектом свечения на CSS

Красиво выполненный дизайн на цифровые часы с эффектом яркого свечения при помощи HTML, CSS, и JavaScript, где идут несколько цветовых оттенков. Эти цифровые часы с оригинальной палитрой цвета, отлично смотрятся на веб-странице, что будут отображать реальное время с красочным градиентным светящимся фоном и текстовым эффектом, которое отлично вписалось по своей стилистке, так как можно установить, как на светлый фон, так и на темный сайт по своему формату.

Нужно заметить, как правило, в реальном промежутке времени, эти часы по характеристике принимают данные с наших компьютеров, а не с сервера, что далее идет отображение на сайте или на отдельно созданной страницы. Используя метод Javascript, здесь мы получаем данные в реальном времени с моего текущего персонального компьютера.

Как можно заметить, что здесь присутствует единственный CSS, чтобы создать эффект свечения фона, а также есть возможность анимировать его с помощью свойства CSS @keyframes. Для этого присутствует demo страница, где изначально можно оценить полностью стилистику и работу этих часов.

Так выглядят на темном фоне:

Установка:

HTML

Код

CSS

Код

.bookacket {
  height: 98px;
  width: 358px;
  position: relative;
  background: linear-gradient(
135deg
, #0fe6d2, #efd814, #f526dc);
  border-radius: 10px;
  cursor: default;
  animation: animate 1.5s linear infinite;
}
.bookacket .uncomenkad,
.bookacket span{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.bookacket .uncomenkad{
  z-index: 999;
  height: 90px;
  width: 348px;
  background: #1b1b1b;
  border-radius: 6px;
  text-align: center;
}
.uncomenkad #vemekunys {
  line-height: 86px;
  color: #fbf4f4;
  font-size: 48px;
  font-weight: 600;
  letter-spacing: 2px;
  background: linear-gradient(
135deg
, #05f3dc, #e4d01b, #f10bd5);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: animate 1.5s linear infinite;
}
@keyframes animate {
  100%{
  filter: hue-rotate(360deg);
  }
}
.bookacket span{
  height: 100%;
  width: 100%;
  border-radius: 10px;
  background: inherit;
}
.bookacket span:first-child{
  filter: blur(7px);
}
.bookacket span:last-child{
  filter: blur(20px);
}

Код

setInterval(()=>{
  const vemekunys = document.querySelector(".uncomenkad #vemekunys");
  let date = new Date();
  let hours = date.getHours();
  let minutes = date.getMinutes();
  let seconds = date.getSeconds();
  let day_night = "AM";
  if(hours > 12){
  day_night = "PM";
  hours = hours - 12;
  }
  if(seconds < 10){
  seconds = "0" + seconds;
  }
  if(minutes < 10){
  minutes = "0" + minutes;
  }
  if(hours < 10){
  hours = "0" + hours;
  }
  vemekunys.textContent = hours + ":" + minutes + ":" + seconds + " "+ day_night;
  });

При установочном процессе вам не нужно выставлять временной отрезок, ведь все произойдет автоматически с установочным процессом.

Но и не забываем про CSS, ведь в стилистике прописан основной стиль дизайна, что появляется возможность кардинально поменять цветовую гамму, которая будет совпадать с основой дизайна сайта или блога.

Демонстрация

04 Февраля 2021 Загрузок: 5 Просмотров: 2260 Комментариев: (0)

Поделиться в социальных сетях

СКАЧАТЬ

Материал разместил

Kosten

Комментарии: 0