Эффекты для текста на Bootstrap — стиль 13

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

html разметка и css стили для реализации блока «Эффекты для текста»

<div class="demo">
    <span class="text-effect">Best jQuery</span>
</div>

.demo{ background-color: #E7E5E4; }
.text-effect{
    color: #131313;
    font-family: 'Roboto', sans-serif;
    font-size: 100px;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: .1em;
    display: block;
    animation: animate 1.5s infinite linear;
}
@keyframes animate{
    30%{
        text-shadow:1px -1px 0 #767676, -1px 2px 1px #737272, -2px 4px 1px #767474, -3px 6px 1px #787777,
                    -4px 8px 1px #7b7a7a, -5px 10px 1px #7f7d7d, -6px 12px 1px #828181, -7px 14px 1px #868585,
                    -8px 16px 1px #8b8a89, -9px 18px 1px #8f8e8d, -10px 20px 1px #949392, -11px 22px 1px #999897,
                    -12px 24px 1px #9e9c9c, -13px 26px 1px #a3a1a1,;
    }
    60%{
        text-shadow:1px -1px 0 #767676, -1px 2px 1px #737272, -2px 4px 1px #767474, -3px 6px 1px #787777,
                    -4px 8px 1px #7b7a7a, -5px 10px 1px #7f7d7d, -6px 12px 1px #828181, -7px 14px 1px #868585,
                    -8px 16px 1px #8b8a89, -9px 18px 1px #8f8e8d, -10px 20px 1px #949392, -11px 22px 1px #999897,
                    -12px 24px 1px #9e9c9c, -13px 26px 1px #a3a1a1, -14px 28px 1px #a8a6a6, -15px 30px 1px #adabab,
                    -16px 32px 1px #b2b1b0, -17px 34px 1px #b7b6b5, -18px 36px 1px #bcbbba, -19px 38px 1px #c1bfbf,
                    -20px 40px 1px #c6c4c4, -21px 42px 1px #cbc9c8, -22px 44px 1px #cfcdcd, -23px 46px 1px #d4d2d1,
                    -24px 48px 1px #d8d6d5, -25px 50px 1px #dbdad9, -26px 52px 1px #dfdddc, -27px 54px 1px #e2e0df,
                    -28px 56px 1px #e4e3e2;
    }
    75%{
        text-shadow:1px -1px 0 #767676, -1px 2px 1px #737272, -2px 4px 1px #767474, -3px 6px 1px #787777,
                    -4px 8px 1px #7b7a7a, -5px 10px 1px #7f7d7d, -6px 12px 1px #828181, -7px 14px 1px #868585,
                    -8px 16px 1px #8b8a89, -9px 18px 1px #8f8e8d, -10px 20px 1px #949392, -11px 22px 1px #999897,
                    -12px 24px 1px #9e9c9c, -13px 26px 1px #a3a1a1, ;
    }
    100%{ text-shadow: 0 0 0 transparent; }
}
@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; }
}

Теги: