| Меню сайта |
|
 |
| Категории раздела |
|
|
| Популярное |
|
|
|
| Мини-чат |
|
|
|
| Наш опрос |
Оцените мой сайт
Всего ответов: 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 |
| Просмотров: 129 | Загрузок: 0
| Рейтинг: 0.0/0 |
Добавлять комментарии могут только зарегистрированные пользователи. [ Регистрация | Вход ] |
|
| Вход на сайт |
|
|
| Поиск |
|
|
| Популярное |
|
|
| Популярное |
|
|
|
|
