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

Fokit.ru
html разметка и css стили для реализации блока «Эффекты для текста»
<div class="demo">
    <div class="text-effect">
        <span data-content="Best jQuery">Best jQuery</span>
    </div>
</div>
.text-effect span{
    color: #cc00af;
    font-family: 'Fredoka One', cursive;
    font-size: 100px;
    font-weight: 700;
    text-align: center;
    text-transform: uppercase;
    margin: 0 auto;
    display: block;
    position: relative;
    animation: animate 1s alternate linear infinite;
}
.text-effect span:before,
.text-effect span:after{
    content: attr(data-content);
    color: #fbf7f4;
    width: 100%;
    height: 50%;
    overflow: hidden;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
}
.text-effect span:after{
    height: 100%;
    -webkit-clip-path: polygon(0 49%, 100% 49%, 100% 100%, 0% 100%);
    clip-path: polygon(0 49%, 100% 49%, 100% 100%, 0% 100%);
    animation: animate_1 1s alternate linear infinite;
}
@keyframes animate{
    0%{ filter: hue-rotate(0); }
    100%{ filter: hue-rotate(360deg); }
}
@keyframes animate_1{
    0%{
        color: #fbf7f4;
        transform: skew(0) scale(1, 1);
    }
    100%{
        color: #d3cfcc;
        transform: skew(-20deg) scale(1, 0.5);
    }
}
@media only screen and (max-width: 990px){
    .text-effect span{
        font-size: 80px;
        line-height: 100px;
    }
}
@media only screen and (max-width: 767px){
    .text-effect span{
        font-size: 55px;
        line-height: 67px;
    }
}
@media only screen and (max-width: 479px){
    .text-effect span{
        font-size: 40px;
        line-height: 48px;
    }
}
@media only screen and (max-width: 359px){
    .text-effect span{
        font-size: 35px;
        line-height: 42px;
    }
}


Теги:
0

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

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