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

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

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

<div class="demo">
    <div class="text-effect">
        <span>B</span>
        <span>e</span>
        <span>s</span>
        <span>t</span>
        <span>J</span>
        <span>Q</span>
        <span>u</span>
        <span>e</span>
        <span>r</span>
        <span>y</span>
    </div>
</div>

.text-effect{
    color: #e74c3c;
    font-family: 'Graduate', cursive;
    font-weight: 700;
    text-align: center;
    text-transform: capitalize;
    text-shadow: 2px 2px 3px #111;
}
.text-effect span{
    font-size: 100px;
    animation: animate 2s alternate infinite;
}
.text-effect span:nth-child(2n){ animation-delay:0.5s; }
@keyframes animate{
    100%{ font-size: 60px; }
}
@media only screen and (max-width: 990px){
    .text-effect span{ font-size: 80px; }
}
@media only screen and (max-width: 767px){
    .text-effect span{ font-size: 55px; }
    @keyframes animate{
        100%{ font-size: 45px; }
    }
}
@media only screen and (max-width: 479px){
    .text-effect span{ font-size: 40px; }
    @keyframes animate{
        100%{ font-size: 33px; }
    }
}
@media only screen and (max-width: 359px){
    .text-effect span{ font-size: 33px; }
    @keyframes animate{
        100%{ font-size: 25px; }
    }
}

Теги: