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

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

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

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

.demo{ background: linear-gradient(to right,#1e130c,#9a8478); }
.text-effect{
    color: #fff;
    font-family: 'Acme', sans-serif;
    font-size: 100px;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    text-shadow: 0 0 0.15em #7a040c;
    margin: 50px auto 0;
    white-space: nowrap;
    filter: blur(0.007em);
    position: relative;
    z-index: 1;
    animation: shake 2.5s linear infinite;
}
.text-effect:before,
.text-effect:after{
    content: attr(data-tip);
    transform: translateX(-50%) translateY(-50%);
    position: absolute;
    top: 50%;
    left: 50%;
    animation: animate1 2.5s linear infinite;
    -webkit-clip-path: polygon(0% 0%, 10% 0%, 55% 100%, 0% 100%);
    clip-path: polygon(0% 0%, 10% 0%, 55% 100%, 0% 100%);
}
.text-effect:after{
    animation: animate2 2.5s linear infinite;
    -webkit-clip-path: polygon(44% 0%, 100% 0%, 100% 100%, 70% 100%);
    clip-path: polygon(44% 0%, 100% 0%, 100% 100%, 70% 100%);
}
.text-effect span{
    transform: translateX(-50%) translateY(-50%);
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-clip-path: polygon(10% 0%, 44% 0%, 70% 100%, 55% 100%);
    clip-path: polygon(10% 0%, 44% 0%, 70% 100%, 55% 100%);
}
@keyframes shake{
    5%, 15%, 25%, 35%, 55%, 65%, 75%, 95%{
        transform: translateY(0.018em) rotate(0deg);
        filter: blur(0.018em);
    }
    10%, 30%, 40%, 50%, 70%, 80%, 90%{
        transform: translateY(-0.018em) rotate(0deg);
        filter: blur(0.01em);
    }
    20%, 60%{
        transform: translate(-0.018em, 0.018em) rotate(0deg);
        filter: blur(0.03em);
    }
    45%, 85%{
        transform: translate(0.018em, -0.018em) rotate(0deg);
        filter: blur(0.03em);
    }
    100%{
        transform: translate(0) rotate(-0.5deg);
        filter: blur(0.007em);
    }
}
@keyframes animate1{
     0%, 95%{ transform: translate(-50%, -50%); }
    100%{ transform: translate(-51%, -45%); }
}
@keyframes animate2{
      0%, 95%{ transform: translate(-50%, -50%); }
    100%{ transform: translate(-49%, -55%); }
}
@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; }
}

Теги: