Скачать для фотошопа и для создания сайта Четверг, 12.12.2024, 14:59
Приветствую Вас Гость | RSS
Меню сайта

Категории раздела
Шаблоны для Ucoz
Шапки для Ucoz
Скрипты для Ucoz
Иконки для Ucoz
Кнопки для Ucoz
Уроки для Ucoz
Статьи для Ucoz
Прочее для Ucoz

Популярное

Мини-чат

Наш опрос
Оцените мой сайт
1. Отлично
2. Хорошо
3. Неплохо
4. Плохо
5. Ужасно
Всего ответов: 7

Статистика

Онлайн всего: 1
Гостей: 1
Пользователей: 0


Анимация блика на изображение в CSS3
После регистрации у вас появиться еще одна ссылка для бесплатного скачивания и пропадет рекламма!
20.10.2020, 00:12
Анимация блика на изображение в CSS3




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

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

Как пример наведении клика:



После того, как убрали клик, где снимок приобретает оттенок цвета:



Установка:

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

HTML

Код
Код
<figure class="animatsiya_bleska">
  <img src="http://zornet.ru/Images/izobrazheniye/zornet_ru_75.jpg" alt="Ключевые слова" />
  <figcaption>
  <h3>ZorNet.Ru</h3>
  </figcaption>
  <a href="http://zornet.ru"></a>
</figure>


CSS

Код
Код
.animatsiya_bleska {
  background-color: #045e78;
  color: #ffffff;
  display: inline-block;
  font-family: 'Poppins', sans-serif;
  font-size: 16px;
  margin: 10px;
  max-width: 315px;
  min-width: 230px;
  overflow: hidden;
  position: relative;
  text-align: left;
  width: 100%;
}

.animatsiya_bleska * {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all 0.45s ease;
  transition: all 0.45s ease;
}

.animatsiya_bleska:after {
  background-color: white;
  opacity: 0.6;
  top: 0;
  bottom: 0;
  content: '';
  left: -100%;
  position: absolute;
  width: 200px;
  box-shadow: 0 0 100px white;
  -webkit-transform: skew(-20deg);
  transform: skew(-20deg);
  -webkit-transition: all 0.6s ease;
  transition: all 0.6s ease;
}

.animatsiya_bleska img {
  vertical-align: top;
  max-width: 100%;
  backface-visibility: hidden;
}

.animatsiya_bleska figcaption {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1;
  line-height: 1em;
  opacity: 0;
}

.animatsiya_bleska h3 {
  position: absolute;
  left: 10px;
  bottom: 10px;
  font-size: 1.4em;
  font-weight: 400;
  line-height: 1.1em;
  margin: 0;
  text-transform: uppercase;
}

.animatsiya_bleska h3 span {
  font-weight: 700;
}

.animatsiya_bleska a {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1;
}

.animatsiya_bleska:hover > img,
.animatsiya_bleska.hover > img {
  opacity: 0.4;
  -webkit-filter: grayscale(100%);
  filter: grayscale(100%);
}

.animatsiya_bleska:hover:after,
.animatsiya_bleska.hover:after {
  left: 200%;
}

.animatsiya_bleska:hover figcaption,
.animatsiya_bleska.hover figcaption {
  opacity: 1;
}


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

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


Всего комментариев: 0
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]
Вход на сайт

Поиск

Популярное
SLS-Склад Лайт 
Feedmaster 1.7.4.2 бесплатно. 
Atlantis Word Processor 1.6.2 Beta 
Mozilla Sunbird 0.9 RU 
Фото на документы Экспресс 1.51 Rus 

На форуме
Файлообменник. З...
Автор: roterb
Форум: Куплю/Продам
Дата: 19.07.2024
Ответов: 0
Куплю, обмен шве...
Автор: roterb
Форум: Куплю/Продам
Дата: 27.06.2024
Ответов: 0
Файлообменник Sh...
Автор: Marco
Форум: Заработок на Файлообменниках
Дата: 27.06.2024
Ответов: 1
Заработок на фай...
Автор: Marco
Форум: Заработок на Файлообменниках
Дата: 27.06.2024
Ответов: 1
Файлообменник Le...
Автор: Marco
Форум: Заработок на Файлообменниках
Дата: 27.06.2024
Ответов: 1

Популярное

Партнеры сайта
Стать партнером Стать партнером Стать партнером Стать партнером

Copyright MyCorp © 2024