• Страница 1 из 1
  • 1
Форум » Веб-разработка » Скрипты для сайтов » Эффект мигающего изображения на чистом CSS (Создать эффект мигающего изображения при использовании CSS)
Эффект мигающего изображения на чистом CSS
Kosten
Дата: Среда, 2019-04-03, 22:45 | Сообщение 1
Администраторы
Сообщений:24298
Награды: 56


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

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

Установка:



HTML

Код
<h2 id="klas">Красивый эффект</h2>
    <div class="kodenzia makinlogedon-pavkacuved">
        <div>
            <figure><img src="http://zornet.ru/_fr/79/0293453.jpg" /></figure>
            <span>Здесь название 1</span>
        </div>
        <div>
            <figure><img src="http://zornet.ru/_fr/79/9937638.jpg" /></figure>
            <span>Здесь название 2</span>
        </div>
        <div>
            <figure><img src="http://zornet.ru/_fr/79/7763355.jpg" /></figure>
            <span>Здесь название 3</span>
        </div>
    </div>

CSS

Код
.makinlogedon-pavkacuved {
    margin: 15px 15px 0;
    padding: 0;
}
.makinlogedon-pavkacuved:last-child {
    padding-bottom: 60px;
}
.makinlogedon-pavkacuved::after {
    content: '';
    clear: both;
    display: block;
}
.makinlogedon-pavkacuved div {
    position: relative;
    float: left;
    width: 300px;
    height: 200px;
    margin: 0 0 0 25px;
    padding: 0;
  cursor:pointer;
}
.makinlogedon-pavkacuved div:first-child {
    margin-left: 0;
}
.makinlogedon-pavkacuved div span {
    position: absolute;
    bottom: -20px;
    left: 0;
    z-index: -1;
    display: block;
    width: 300px;
    margin: 0;
    padding: 0;
    color: #444;
    font-size: 18px;
    text-decoration: none;
    text-align: center;
    -webkit-transition: .3s ease-in-out;
    transition: .3s ease-in-out;
    opacity: 0;
}
figure {
    width: 300px;
    height: 200px;
    margin: 0;
    padding: 0;
    background: #fff;
    overflow: hidden;
}
figure:hover+span {
    bottom: -36px;
    opacity: 1;
}

/* Flashing */
.kodenzia 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;
    }
}

Один из самых простых эффектов при наведение курсора, что стильно смотрится.

Демонстрация
Прикрепления: sakodsan.zip(2.0 Kb)
Страна: (RU)
Форум » Веб-разработка » Скрипты для сайтов » Эффект мигающего изображения на чистом CSS (Создать эффект мигающего изображения при использовании CSS)
  • Страница 1 из 1
  • 1
Поиск: