ZorNet.Ru — сайт для вебмастера » HTML и CSS » Эффект CSS пульсирующего изображения

Эффект CSS пульсирующего изображения

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

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

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

Это видим по умолчанию:

Здесь завершенный эффект:

Установочный процесс:

HTML

Код

CSS

Код

.pauntin_nesulab {
list-style: none;
padding: 0;
margin: 0;
}
.pauntin_nesulab li {
  border: 5px solid rgba(0, 0, 0, 0);
  box-sizing: border-box;
  width: 35%;
  float: left;
  position: relative;
  cursor: pointer;
}
.pauntin_nesulab img {
max-width: 100%;
vertical-align: middle;
}

.img-placeholder:before,
.img-placeholder:after {
padding-top: 35%;
content: "";
display: block;
}
.img-placeholder {
background: #1d1b1b;
box-shadow: 0 0 0 8px #0e0e0e inset, 0 0 0 9px #2d2c2c inset;
color: #444;
line-height: 0;
text-align: center;
display: block;
}

.pauntin_nesulab li:before {
transition: all .5s ease;
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: #2d2c2c;
transform: scale(0);
}
.pauntin_nesulab li:hover:before {
opacity: .5;
transform: scale(1);
}
.pauntin_nesulab li:after {
transition: all .6s ease .2s;
content: "";
position: absolute;
top: 8px;
left: 8px;
right: 8px;
bottom: 8px;
border: 1px solid #aaa;
background: #151414;
opacity: 0;
transform: scale(0);
}
.pauntin_nesulab li:hover:after {
opacity: .35;
transform: scale(1);
}

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

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

29 Октября 2019 Загрузок: 1 Просмотров: 1361 Комментариев: (0)

Поделиться в социальных сетях

СКАЧАТЬ

Материал разместил

Kosten

Комментарии: 0