ZorNet.Ru — сайт для вебмастера » HTML и CSS » Фоновый эффект при наведении на CSS3

Фоновый эффект при наведении на CSS3

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

Изначально данные точки находятся в состоянии покоя, но стоит только навести курсор на экран, то начинает автоматическое увеличение, а при перемещении курсора размер точки медленно уменьшается. Все это смотрится просто шикарно, и при этом автоматом меняется оттенок цвета по всему монитору или экрану. Где можно такой эффект применить? Здесь каждый сам может решать, как поставить за основу или вывести под специально сделанную страницу с материалом.

Анимированный фоновый эффект с наведением курсора

Как пример:

Установка:

HTML

Код

CSS

Код

.comaticitu{
  position: relative;
  height: 100vh;
  width: 100%;
  display: flex;
  background: #001300;
  flex-wrap: wrap;
  overflow: hidden;
  animation: changingCOlor 3s linear infinite;
}
@keyframes changingCOlor {
  100%{
  filter: hue-rotate(360deg);
  }
}
span{
  height: 35px;
  width: 35px;
  display: block;
  position: relative;
}
span::before{
  content: '';
  position: absolute;
  height: 100%;
  width: 100%;
  left: 0;
  top: 0;
  border-radius: 50%;
  background: #00ff0a;
  pointer-events: none;
  transition: 10s;
  transform: scale(0.1);
  box-shadow: 0 0 10px #0ed315,
  0 0 20px #0ed315,
  0 0 40px #0ed315,
  0 0 60px #0ed315,
  0 0 80px #0ed315,
  0 0 100px #0ed315;
}
span:hover::before{
  transform: scale(1);
  transition: 0s;
}

После создания этих двух файлов вы можете легко скопировать и вставить данные коды в свой документ.

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

14 Мая 2022 Загрузок: 1 Просмотров: 849 Комментариев: (0)

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

СКАЧАТЬ

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

Kosten

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