Уважаемые пользователи seo-vebmaster.ucoz.net. Вы найдете у нас на портале - различные скрипты сайтов, уникальные, бесплатные шаблоны, модули, хаки и релизы популярных CMS . С Уважением Администрация seo-vebmaster.ucoz.net

Скачать Подсветка блоков HTML при наведении клика бесплатно
После регистрации у вас появиться еще одна ссылка для бесплатного скачивания и пропадет рекламма!
22.12.2023, 14:09
Подсветка блоков 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>
  </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

Скачать Подсветка блоков HTML при наведении клика
Категория: Скачать Скрипты Ucoz бесплатно бесплатно | Добавил: diamont1977
Просмотров: 18 | Загрузок: 0 | Рейтинг: 0.0/0


Всего комментариев: 0
avatar
Мини профиль
Для просмотра мини профиля,войдите на сайт как пользователь.
Мы в ВКонтакте
Популярные новости
Шаблон 7ol...
Шаблон для...
Уникальный...
Оригинал с...
Шаблон для...
Лучшие фай...
Последние ...
Мини-чат
Для добавления необходимо
войти или зарегистрироваться
Статистика
Счетчики сайта
Top.Mail.Ru

Анализ сайта seo-vebmaster.ucoz.net Яндекс.Метрика Catalog.ru.net - Каталог сайтов
Сейчас online
Онлайн всего: 1
Гостей: 1
Пользователей: 0
Сегодня наш сайт посетили
Счетчик пользователей
Сегодня нас посетило
Счетчики сайта
  • Счетчик юзеров
  • Всего юзеров: 13
    За месяц: 0
    За неделю: 0
    За вчера: 0
    Сегодня: 0
  • Счетчик материалов
  • Всего файлов: 1407
    Всего новостей: 0
    Всего статей: 0
    Темы форума: 1533
    Категории
    Шаблоны Ucoz бесплатно [24]
    Скачать бесплатно Шаблоны Ucoz бесплатно
    Скрипты Ucoz бесплатно [94]
    Скачать Скрипты Ucoz бесплатно
    Шапки для Ucoz [0]
    Скачать Шапки Ucoz бесплатно
    Иконки для Ucoz [5]
    Иконки Ucoz бесплатно
    Кнопки Ucoz бесплатно [3]
    Тут найдете и скачаете Кнопки Ucoz бесплатно
    Уроки Ucoz бесплатно [5]
    Тут найдете и скачаете Уроки Ucoz бесплатно
    Для Форумов Ucoz бесплатно [0]
    Тут найдете и скачаете Для Форумов Ucoz бесплатно
    Разное Ucoz бесплатно [38]
    Тут найдете и скачаете Разное Ucoz бесплатно
    Партнеры сайта
    Стать партнером Стать партнером Стать партнером Стать партнером
    Интересные файлы
    Темный вид...
    Навигация
    Градиенты ...
    Соцсети
    Фоны для ф...
    Навигация
    Веб-элемен...