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

Два эффекта пробегающего блика на CSS

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

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

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

Первый вариант:

HTML

Код
<h1 class="kuingspel-glareladies">Пробегающий по буквам блик</h1>

CSS

Код
.kuingspel-glareladies {
  position: relative;
  cursor:pointer;
}
.kuingspel-glareladies:after {
  content: "";
  position: absolute; top: 0; left: -2em;
  width: 100%;
  height: 100%;
  background: linear-gradient(to left, rgba(156, 156, 156, 0), rgba(247, 243, 243, 0.8), rgba(156, 156, 156, 0)) no-repeat -2em 0%;
  background-size: 2em 100%;
  transform: skewX(-50deg);
}
.kuingspel-glareladies:hover:after {
  transition: 1s linear;
  background-position: 100% 0%;
}

Блик появится при наведение курсора на знаки.

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

Второй вариант:

Во втором варианте нужно подключить для библиотеку.

HTML

Код
<div id="galopakam-nevunaps"><span class="kenexp-encevon">ZORNET.RU</span></div>

CSS

Код
#galopakam-nevunaps>span{
  color: #09243c;  
  position: relative;  
  font-size: 24pt;
  font-weight: bold;
  text-shadow: 1px 1px 1px rgba(136, 132, 132);
  }
  #galopakam-nevunaps>span:after {
  content: "";
  position: absolute;  
  top: 0;  
  left: 0em;
  width: 100%;
  height: 100%;
  background: linear-gradient(to left, rgba(187, 187, 187, 0), rgba(247, 245, 245, 0.8), rgba(187, 187, 187, 0)) no-repeat -2em 0%;
  background-size: 57px 100%;
  -moz-transform: skewX(-50deg);
  -o-transform: skewX(-50deg);
  -webkit-transform: skewX(-50deg);
  transform: skewX(-50deg);
  }
  #galopakam-nevunaps>span.kenexp-encevon:after{
  transition: 1.3s linear;
  background-position: 128% 0%;
  }

JS

Код
$(document).ready(function () {
setInterval(function(){
  $('#galopakam-nevunaps>span').addClass('kenexp-encevon');
  setTimeout(function(){$('#galopakam-nevunaps>span').removeClass('kenexp-encevon')},1500);
},6000)
});

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

Демонстрация
26 Января 2019 Загрузок: 1 Просмотров: 11184 Комментариев: (3)

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

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

Оставь свой отзыв

Комментарии: 3
PrincessArthur
PrincessArthur 22 Января 2020 18:071
0
Ерунда, если фон отличается по цвету, то все видно
Kosten
Kosten 22 Января 2020 20:372
0
Блик в любом случай заметен, но разве только вы оттенок цвета светлым на знаках не поставите.
-SAM-
-SAM- 23 Января 2020 07:523
0
Не о том речь. Если сделать фон задний цветом для блока, в котором надпись находиться (например, сделать темный задний фон для body в демонстрации), то эффект волновой смотрится не очень (поскольку блик идёт и за областью надписи, а не только ограничивается её контурами). В таком случае, что уже приходиться сразу gif-ку прописывать, да и всё.
avatar