ZorNet.Ru — сайт для вебмастера » HTML и CSS » Эффект ряби для изображений на чистом CSS

Эффект ряби для изображений на чистом CSS

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

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

Теперь визуально так смотрится:

Эффект изображений при наведении

Здесь навели клик:

Красивое изображение при клике на CSS

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

HTML

Код

CSS-файл с дополнительным слоем анимации снега:

Код

.ritmydam_gezentrop {
  float:left;
  position:relative;
  overflow:hidden;
}
.ritmydam_gezentrop img {
  display:block;
  float:left;
}
.ritmydam_gezentrop span.tukanga,
.ritmydam_gezentrop span.tukanga {
  display:block;
  position:absolute;
  top:0;
  left:0;
  width:984px;
  height:984px;
  background:transparent url(http://zornet.ru/Aben/ABGDA/zornet_ru/kersa/crt-screen.gif) top left repeat;
}
.ritmydam_gezentrop span.tukanga {
  background:transparent url(http://zornet.ru/Aben/ABGDA/zornet_ru/kersa/crt-snow.gif) top left repeat;
}
.ritmydam_gezentrop:hover span.tukanga {
  display:none;
}
.ritmydam_gezentrop span.letan {
  display:block;
  position:absolute;
  top:0;
  left:0;
  width:945px;
  height:58px;
  background:transparent url(http://zornet.ru/Aben/ABGDA/zornet_ru/kersa/crt-top.png) top left repeat-x;
}
.ritmydam_gezentrop span.sberkugen {
  display:block;
  position:absolute;
  left:0;
  bottom:0;
  width:873px;
  height:123px;
  background:transparent url(http://zornet.ru/Aben/ABGDA/zornet_ru/kersa/crt-bottom.png) bottom left repeat-x;
}

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

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

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

15 Декабря 2017 Загрузок: 4 Просмотров: 3108 Комментариев: (0)

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

СКАЧАТЬ

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

Kosten

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