Подробное описание и демонстрация работы блока «Эффекты для текста» для сайта под номером №27 для библиотеки Bootstrap. Html и CSS код для текстовых эффектов на сайте как на изображении.
Fokit.ru
<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; } }