• Страница 1 из 1
  • 1
Форум » Web-Раздел » Начинающему вебмастеру » Создаем эффект проходящего блика на CSS3 (Эффект блеска автоматически с помощью HTML И CSS)
Создаем эффект проходящего блика на CSS3
Kosten
Среда, 20 Февраля 2019 | Сообщение 1
Оффлайн
Администраторы
Сообщений:44267
Награды: 70
Красивый эффект блеска или блика всегда привлекает внимание, и в этой статье мы сделаем его на ключевом слове. Также зададим здесь время, так чтоб они не быстро бегал, а по заданному времени, где если фон у вас будет светлым, то на знаком его отлично видно.

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



Подключаем библиотеку, если ранее не подключили.

Код
<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)
});

Установка завершена.

Демонстрация
Прикрепления: 7108065.png (11.8 Kb) · xadsreb.zip (1.9 Kb)
Страна: (RU)
Форум » Web-Раздел » Начинающему вебмастеру » Создаем эффект проходящего блика на CSS3 (Эффект блеска автоматически с помощью HTML И CSS)
  • Страница 1 из 1
  • 1
Поиск: