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

Эффект светящейся лампы на HTML и CSS

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

В заданном эффекте, где включаем и отключаем свет не нужны скрипты и библиотеки, все создано на чистом CSS, что означает, здесь задействовано только HTML и CSS для создания данного эффекта свечения, который происходит по клику. Чтобы создать этот эффект, нам нужно выставить два изображения, виде лампочки, с последующей заменой их местами при нажатии кнопки. Так как одна картинка идет уже с включенным светом, вторая представлена простой лампочкой. И они выставляются ссылками в самом HTML, а в стилистике CSS уже сами можете что-то настроить.

Красивый эффект светящейся лампы с использованием только HTML и CSS

Установка:

HTML

Код

CSS

Код

@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap');
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}
body{
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background: #111;
}
.lampochka{
  width: 462px;
  height: 512px;
  position: relative;
}
img{
  margin-top: -50px;
  height: 450px;
  width: 100%;
  position: absolute;
}
img#bulb-on{
  opacity: 0;
  animation: glow 3s linear infinite;
}
@keyframes glow {
  0%{
  opacity: 1;
  }
  5%{
  opacity: 1;
  }
  70%{
  opacity: 1;
  }
  74%{
  opacity: 0;
  }
  80%{
  opacity: 1;
  }
  84%{
  opacity: 0;
  }
  90%{
  opacity: 1;
  }
  100%{
  opacity: 1;
  }
}
.nuladnik{
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
}
.nuladnik span {
  height: 52px;
  width: 194px;
  display: block;
  text-align: center;
  line-height: 50px;
  background: none;
  color: #f3f0f0;
  text-transform: uppercase;
  font-size: 20px;
  cursor: pointer;
  border: 2px solid #c1c1c1;
  border-radius: 100px;
  transition: all 0.3s ease;
}
.nuladnik span:hover{
  background: #fff;
  color: #111;
}
#nuladnik:checked ~ .nuladnik span{
  background: #fff;
  color: #111;
}
.nuladnik span:before{
  content: "выключить";
}
#nuladnik:checked ~ img#bulb-on{
  animation: none;
}
#nuladnik:checked ~ .nuladnik span:before{
  content: "включить";
}
.lampochka input{
  display: none;
}

Для того, чтоб создать эту кнопку интерактивной, где будет кардинально изменена состояние лампочки, что произойдет при нажатии, здесь задействовано HTML input type = "checkbox" где идет комбинация с меткой.

Это о том, что вы также можете использовать JavaScript, который может кардинально изменить состояния лампочки. Или пойти по простому, это найти данные по размеру изображение на 2 элемента , включен свет и выключен, где самостоятельно поменять, что в дальнейшем установить по месту.

PS - Рекомендую скачать файл, где находятся изображение, чтоб поставить на свои ссылки.

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

01 Марта 2021 Загрузок: 7 Просмотров: 2536 Комментариев: (3)

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

СКАЧАТЬ

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

Kosten

Комментарии: 3
Порядок вывода комментариев: t1tov4rt 03 Марта 2021 21:45¹ 0 Протестировать не удаеться Kosten 03 Марта 2021 22:12² 0 Проверил на демонстрации, все корректно работает. na3uTuB4uk 26 Марта 2021 13:54³ 0 Она и правда работает, только для чего она может пригодиться тут уже вопрос.