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

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

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

<div class="demo">
    <div class="text-effect" data-tip="best jquery">
        <span>Best jQuery</span>
    </div>
</div>

.text-effect {
    color: transparent;
    font-family: 'Exo 2', sans-serif;
    font-size: 100px;
    font-weight: 900;
    text-align: center;
    text-transform: uppercase;
    margin: 0 auto 0;
    position: relative;
}
.text-effect:before,
.text-effect:after{
    content: attr(data-tip);
    color: cyan;
    position: absolute;
    top:0;
    left: 20%;
    -webkit-clip-path: polygon(0% 100%, 100% 100%, 100% 40%, 0 60%);
    clip-path: polygon(0% 100%, 100% 100%, 100% 40%, 0 60%);
    animation: slide1 1.5s infinite linear;
    animation-delay: 0.5s;
}
.text-effect:after{
    color: white;
    -webkit-clip-path: polygon(0 0, 100% 0%, 100% 36%, 0 56%);
    clip-path: polygon(0 0, 190% 0%, 100% 36%, 0 56%);
    animation: slide2 1.5s infinite linear;
    animation-delay: 0.5s;
}
@keyframes slide1 {
    0%{ transform: translateX(0); }
    50%{ transform: translate(5px, -2%); }
}
@keyframes slide2 {
    0%{ transform: translateX(0); }
    50%{ transform: translate(-5px, 2%); }
}
@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; }
}

Теги: