Красивый эффект блеска или блика всегда привлекает внимание, и в этой статье мы сделаем его на ключевом слове. Также зададим здесь время, так чтоб они не быстро бегал, а по заданному времени, где если фон у вас будет светлым, то на знаком его отлично видно.
Основная идея состоит в надобности, это безусловно всегда актуально. Так, что кому-то нужно, чтоб на какой-то материал как можно было больше просмотров, то как раз в название прописываем блик и вы получаете то, что вам нужно, плюс оригинальный вид анимации.
Подключаем библиотеку, если ранее не подключили.
Код
<script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
HTML
Код
<div id="satukop-vamdkud"><span class="blink_on">Бегающий БЛИК!!!</span></div>
CSS
Код
#satukop-vamdkud>span {
color: #ff0050;
position: relative;
font-size: 25pt;
font-weight: bold;
text-shadow: 1px 1px 1px rgb(123, 121, 121);
}
#satukop-vamdkud>span:after {
content: "";
position: absolute;
top: 0;
left: 0em;
width: 100%;
height: 100%;
background: linear-gradient(to left, rgba(232, 232, 232, 0), rgba(247, 244, 244, 0.8), rgba(232, 232, 232, 0)) no-repeat -2em 0%;
background-size: 2em 100%;
-moz-transform: skewX(-50deg);
-o-transform: skewX(-50deg);
-webkit-transform: skewX(-50deg);
transform: skewX(-50deg);
}
#satukop-vamdkud>span.blink_on:after{
transition: 1.5s linear;
background-position: 130% 0%;
}
JS
Код
$(document).ready(function () {
setInterval(function(){
$('#satukop-vamdkud>span').addClass('blink_on');
setTimeout(function(){$('#satukop-vamdkud>span').removeClass('blink_on')},1500);
},6000)
});
Установка завершена.
Демонстрация
