Мигающий эффект изображение при наведении CSS - Форум

Новые сообщения
Участники
Правила форума
Поиск
RSS

Страница 1 из 1
1

Мигающий эффект изображение при наведении CSS (Оригинальный hover-эффекта при помощи CSS3)

Мигающий эффект изображение при наведении CSS

Kosten

Четверг, 14 Июня 2018, 00:46 | Сообщение 1

Администраторы

Сообщений:44490

Награды: 70

« 557 »

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

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

Также при наведение будет в самом низу выежать название картинки.

Приступаем к установке:

Разметка HTML

Код

<div class="zopdsavtun zarikolpesam-debimos">
        <div>
            <figure><img src="http://zornet.ru/ABVUN/sarunolas/zornet/pic01.jpg" /></figure>
            <span>ZORNET.RU #1</span>
        </div>
        <div>
            <figure><img src="http://zornet.ru/ABVUN/sarunolas/zornet/pic02.jpg" /></figure>
            <span>ZORNET.RU #2</span>
        </div>
        <div>
            <figure><img src="http://zornet.ru/ABVUN/sarunolas/zornet/pic03.jpg" /></figure>
            <span>ZORNET.RU #3</span>
        </div>
    </div>

CSS

Код

body {
    color: #333;
    font-family: 'Open Sans', sans-serif;
    font-weight: 300;
}
h1,
h1+p {
    margin: 29.8px 15px 0;
    font-weight: 300;
}
h1+p a {
    color: #2f2e2e;
}
h1+p a:hover {
    text-decoration: none;
}
h2 {
    margin: 59px 14px 0;
    padding: 0;
    font-weight: 300;
}
h2 span {
    margin-left: 1em;
    color: #a59f9f;
    font-size: 90%;
}
.zarikolpesam-debimos {
    margin: 14px 14px 0;
    padding: 0;
}
.zarikolpesam-debimos:last-child {
    padding-bottom: 59px;
}
.zarikolpesam-debimos::after {
    content: '';
    clear: both;
    display: block;
}
.zarikolpesam-debimos div {
    position: relative;
    float: left;
    width: 296px;
    height: 189px;
    margin: 0 0 0 19px;
    padding: 0;
}
.zarikolpesam-debimos div:first-child {
    margin-left: 0;
}
.zarikolpesam-debimos div span {
    position: absolute;
    bottom: -18px;
    left: 0;
    z-index: -1;
    display: block;
    width: 300px;
    margin: 0;
    padding: 0;
    color: #464343;
    font-size: 20px;
    text-decoration: none;
    text-align: center;
    -webkit-transition: .3s ease-in-out;
    transition: .3s ease-in-out;
    opacity: 0;
}
figure {
    width: 300px;
    height: 195px;
    margin: 0;
    padding: 0;
    background: #f5f5f5;
    overflow: hidden;
  cursor:pointer;
}
figure:hover+span {
    bottom: -36px;
    opacity: 1;
}

/* Flashing */
.zopdsavtun figure:hover img {
    opacity: 1;
    -webkit-animation: flash 1.5s;
    animation: flash 1.5s;
}
@-webkit-keyframes flash {
    0% {
        opacity: .4;
    }
    100% {
        opacity: 1;
    }
}
@keyframes flash {
    0% {
        opacity: .4;
    }
    100% {
        opacity: 1;
    }
}

@-webkit-keyframes flash {
0%, 50%, 100% { opacity: 1; }
25%, 75% { opacity: 0; }
}
@keyframes flash {
0%, 50%, 100% { opacity: 1; }
25%, 75% { opacity: 0; }
}

Создание эффекта мигание очень простой, что требуется, это манипулировать непрозрачностью элемента на разных этапах, чтобы сформировать эффект вспышки. Чтобы манипулировать непрозрачностью на разных этапах, мы можем использовать правило CSS3 @keyframe. Правило @keyframes указывает код анимации, и анимация создается путем постепенного перехода от одного набора стилей CSS к другому.

Вывод:

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

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

Прикрепления: 8222813.jpg (69.3 Kb)

Страна: (RU)

Kosten

Четверг, 14 Июня 2018, 00:52 | Сообщение 2

Администраторы

Сообщений:44490

Награды: 70

« 557 »

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

Подробнее:

Код

Сначала определите правило @keyframe с именем «flash». Внутри измените непрозрачность до 0,3 в начале анимации (которая равна 0%), а затем сбросьте ее до 1 на 100%.

Подобно:

Код

@-webkit-keyframes flash {
0% { opacity: .3; }
100% { opacity: 1; }
}
@keyframes flash {
0% { opacity: .3; }
100% { opacity: 1; }
}

Мы уже применили «Flash» CSS-класс ко всем изображениям. Итак, в случае события наведения на изображения вызовите анимацию @keyframe.

Подобно:

Код

.flash:hover {
opacity: 1;
-webkit-animation: flash 1s;
animation: flash 1s;
}

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

Такие как:

Код

@-webkit-keyframes flash {
0%, 50%, 100% { opacity: 1; }
25%, 75% { opacity: 0; }
}
@keyframes flash {
0%, 50%, 100% { opacity: 1; }
25%, 75% { opacity: 0; }
}

Как вы можете видеть, значение непрозрачности изменяется от 0 до 1 с 5 интервалами, чтобы создать более быстрый мигающий эффект. Здесь вы можете посмотреть рабочую демонстрацию.

Страна: (RU)

Мигающий эффект изображение при наведении CSS (Оригинальный hover-эффекта при помощи CSS3)

Страница 1 из 1
1