Два эффекта пробегающего блика на 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, где можно самому выставлять оттенок цвета, но есть и небольшие минусы, которые заключаются в том, что блик должны соответствовать и быть аналогично фону на сайте. Демонстрация | |
Поделиться в социальных сетях
Материал разместил
| Комментарии: 3 | |
|
| |
