Подробное описание и демонстрация работы блока «Эффекты для текста» для сайта под номером №26 для библиотеки Bootstrap. Html и CSS код для текстовых эффектов на сайте как на изображении.
Fokit.ru
<div class="demo"> <div class="text-effect"> <span data-content="Best jQuery">Best jQuery</span> </div> </div>
.demo{ background: linear-gradient(to right, #16BFFD, #CB3066); } .text-effect{ font-size: 100px; line-height: 124px; font-family: 'Righteous', cursive; text-align: center; } .text-effect span{ color: #fff; font-weight: 600; position: relative; overflow: hidden; } .text-effect span:before, .text-effect span:after{ content: attr(data-content); color: #0498ce; text-shadow: 0 0 7px #fff; width: 100%; overflow: hidden; white-space: nowrap; position: absolute; left: 0; top: 0; animation: animate1 3s infinite; } .text-effect span:after{ color: #c90046; width: 100%; height: 0; animation: animate2 3s infinite; } @keyframes animate1{ 0%{ width: 0; } 50%{ width: 100%; } 100%{ width: 0; } } @keyframes animate2{ 0%{ height: 0; } 50%{ height: 100%; } 100%{ height: 0; } } @media only screen and (max-width: 990px){ .text-effect{ font-size: 80px; line-height: 100px; } } @media only screen and (max-width: 767px){ .text-effect{ font-size: 55px; line-height: 67px; } } @media only screen and (max-width: 479px){ .text-effect{ font-size: 40px; line-height: 48px; } } @media only screen and (max-width: 359px){ .text-effect{ font-size: 35px; line-height: 42px; } }