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

Подсветка блоков HTML при наведении клика

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

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

Так смотрятся при проверки на работоспособность:

Стильная подсветка фона и рамок блоков

Первый блок идет под шрифтовым знаком

Код
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.3/css/all.css" />

HTML

Код
<div class="skeleton">
  <div class="sedule">
  <div class="sedule-image">
  <i class="fa fa-user"></i>
  </div>  
  <div class="sedule-content">  
  <div class="sedule-title">
  Font Awesome
  </div>
  <div class="sedule-text">
  Шрифтовые знаки, что идут 1 номером
  </div>
  </div>
  </div>
  <div class="sedule">
  <div class="sedule-image">
  <img src="Ссылка на знак в формате PNG" />
  </div>  
  <div class="sedule-content">
  <div class="sedule-title">
  IMG
  </div>
  <div class="sedule-text">
  Графический ресунок по ссылке
  </div>
  </div>
  </div>

  <div class="sedule">
  <div class="sedule-image">
<svg
  width="100"
  height="100"
  viewBox="0 0 24 24"
  stroke="#0e2136"
  stroke-width="2"
  stroke-linecap="round"
  stroke-linejoin="round"
  fill="none"
>
  <circle cx="12" cy="12" r="9" />
  <path d="M12,3 C 8,3 8,21 12,21 C 16,21 16,3 12,3"/>
  <path d="M3,12 C 3,8 21,8 21,12 C 21,16 3,16 3,12"/>
</svg>
  </div>  
  <div class="sedule-content">
  <div class="sedule-title">
  svg
  </div>
  <div class="sedule-text">
  <p>Здесь идет описание <p></p>
  <p>и также продолжение</p>
  </div>
  </div>
  </div>
</div>

CSS

Код
.skeleton {
  display: flex;
  flex-wrap: wrap;  
  justify-content: center;
  background: url(Ссылка на фон на странице);
  background-size: cover;
  background-position: center;
  margin: 20px 0;  
  padding: 20px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.2), 0 16px 20px rgba(0,0,0,0.2);
}
.skeleton:hover .sedule:after {
  opacity: 1;
}
.skeleton .sedule {
  background-color: #4f93ce;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  position: relative;
  width: calc(33.333% - 20px);
  margin: 10px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.2), 0 16px 20px rgba(0,0,0,0.2);
  opacity: 0.95;
}
@media screen and (max-width: 1534px) {
  .skeleton .sedule {
  width: calc(50% - 20px);
  }
}
@media screen and (max-width: 520px) {
  .skeleton .sedule {
  width: calc(100% - 20px);
  }
}
.skeleton .sedule:hover:before {
  opacity: 1;
}
.skeleton .sedule:before,
.skeleton .sedule:after {
  border-radius: inherit;
  content: "";
  height: 100%;
  left: 0px;
  opacity: 0;
  position: absolute;
  top: 0px;
  transition: opacity 500ms;
  width: 100%;
}
.skeleton .sedule:before {
  background: radial-gradient(600px circle at var(--mouse-x) var(--mouse-y), rgba(191, 226, 255, 0.4), transparent 40%);
  z-index: 3;
}
.skeleton .sedule:after {  
  background: radial-gradient(500px circle at var(--mouse-x) var(--mouse-y), rgba(191, 226, 255, 0.9), transparent 40%);
  z-index: 1;
}
.skeleton .sedule .sedule-content {
  background-color: #337AB7;
  border-radius: inherit;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  text-align: center;
  padding: 78px 16px 16px;
  z-index: 2;
  height: 100%;
  line-height: 1.2;
  margin: 2px;
}
.skeleton .sedule .sedule-image {
  position: absolute;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);  
  z-index: 10;
}
.skeleton .sedule .sedule-image i {
  font-size: 64px;
  color: #16354f;
}
.skeleton .sedule .sedule-image img {
  height: 64px;
}
.skeleton .sedule .sedule-image svg {
  height: 64px;
  fill: #16354f;
}
.skeleton .sedule .sedule-title {
  font-size: 18px;
  font-family: 'Roboto', sans-serif;
  padding: 10px 0;
  color: #BFE2FF;
  text-transform: uppercase;
  font-weight: 600;
}
.skeleton .sedule .sedule-text,
.skeleton .sedule .sedule-text p {
  font-size: 15px;
  font-family: Verdana, sans-serif;
  color: #FFF;
  margin: 0;
  line-height: 1.2;
}
.skeleton .sedule .sedule-text p:not(:last-child) {
  margin-bottom: 10px;
}

JS

Код
let skeleton = document.querySelectorAll(".skeleton");  
for( let i = 0; i < skeleton.length; i++){
  skeleton[i].onmousemove = e => {
  for(const sedule of document.getElementsByClassName("sedule")) {
  const rect = sedule.getBoundingClientRect(),
  x = e.clientX - rect.left,
  y = e.clientY - rect.top;
  sedule.style.setProperty("--mouse-x", `${x}px`);
  sedule.style.setProperty("--mouse-y", `${y}px`);
  };
  }
}

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

Также здесь присутствуют небольшие тени, которые в большинстве сделаны, чтоб подчеркнуть основу каркаса, и также меняются при наведение, где проводя курсор, за ним следует освещение.

Демонстрация
Источник: atuin.ru
2022-12-14 Загрузок: 1 Просмотров: 378 Комментарий: (0)

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

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

Оставь свой отзыв

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