Подробное описание и демонстрация работы блока «Эффекты для текста» для сайта под номером №18 для библиотеки Bootstrap. Html и CSS код для реализации текстовых эффектов на сайте как на изображении.

Fokit.ru
html разметка и css стили для реализации блока «Эффекты для текста»
<div class="demo">
    <span class="text-effect">Best jQuery</span>
</div>
.text-effect{
    color: hsla(0, 0%, 0%, .9);
    font-size: 100px;
    font-family: 'Fugaz One', cursive;
    text-align: center;
    display: block;
    animation: effect linear 2000ms infinite;
}
@keyframes effect {
   0%{
        text-shadow:
            4px -4px 0 hsla(0, 100%, 50%, 1), 3px -3px 0 hsla(0, 100%, 50%, 1),
            2px -2px 0 hsla(0, 100%, 50%, 1), 1px -1px 0 hsla(0, 100%, 50%, 1),
            -4px 4px 0 hsla(180, 100%, 50%, 1), -3px 3px 0 hsla(180, 100%, 50%, 1),
            -2px 2px 0 hsla(180, 100%, 50%, 1), -1px 1px 0 hsla(180, 100%, 50%, 1);
    }
    25%{
        text-shadow:
            -4px -4px 0 hsla(180, 100%, 50%, 1), -3px -3px 0 hsla(180, 100%, 50%, 1),
            -2px -2px 0 hsla(180, 100%, 50%, 1), -1px -1px 0 hsla(180, 100%, 50%, 1),
            4px 4px 0 hsla(0, 100%, 50%, 1), 3px 3px 0 hsla(0, 100%, 50%, 1),
            2px 2px 0 hsla(0, 100%, 50%, 1), 1px 1px 0 hsla(0, 100%, 50%, 1);
    }
    50%{
        text-shadow:
            -4px 4px 0 hsla(0, 100%, 50%, 1), -3px 3px 0 hsla(0, 100%, 50%, 1),
            -2px 2px 0 hsla(0, 100%, 50%, 1), -1px 1px 0 hsla(0, 100%, 50%, 1),
            4px -4px 0 hsla(180, 100%, 50%, 1), 3px -3px 0 hsla(180, 100%, 50%, 1),
            2px -2px 0 hsla(180, 100%, 50%, 1), 1px -1px 0 hsla(180, 100%, 50%, 1);
    }
    75%{
        text-shadow:
            4px 4px 0 hsla(180, 100%, 50%, 1), 3px 3px 0 hsla(180, 100%, 50%, 1),
            2px 2px 0 hsla(180, 100%, 50%, 1), 1px 1px 0 hsla(180, 100%, 50%, 1),
            -4px -4px 0 hsla(0, 100%, 50%, 1), -3px -3px 0 hsla(0, 100%, 50%, 1),
            -2px -2px 0 hsla(0, 100%, 50%, 1), -1px -1px 0 hsla(0, 100%, 50%, 1);
    }
    100% {
        text-shadow:
            4px -4px 0 hsla(0, 100%, 50%, 1), 3px -3px 0 hsla(0, 100%, 50%, 1),
            2px -2px 0 hsla(0, 100%, 50%, 1), 1px -1px 0 hsla(0, 100%, 50%, 1),
            -4px 4px 0 hsla(180, 100%, 50%, 1), -3px 3px 0 hsla(180, 100%, 50%, 1),
            -2px 2px 0 hsla(180, 100%, 50%, 1), -1px 1px 0 hsla(180, 100%, 50%, 1);
    }
}
@media only screen and (max-width: 990px){
    .text-effect{ font-size: 80px; }
}
@media only screen and (max-width: 767px){
    .text-effect{ font-size: 55px; }
}
@media only screen and (max-width: 479px){
    .text-effect{ font-size: 40px; }
}
@media only screen and (max-width: 359px){
    .text-effect{ font-size: 35px; }
}


Теги:
0

Оставить своё мнение

Ваш e-mail не будет опубликован. Обязательные поля помечены *