Подробное описание и демонстрация работы блока «Эффекты для текста» для сайта под номером №28 для библиотеки Bootstrap. Html и CSS код для текстовых эффектов на сайте как на изображении.
Fokit.ru
<div class="demo"> <div class="text-effect"> <span data-title="Best jQuery">Best jQuery</span> </div> </div>
.demo{ background: #eb2f06; } .text-effect { font-family: 'Audiowide', cursive; text-align: center; } .text-effect span{ color: #fff; font-size: 100px; font-weight: 700; text-transform: uppercase; display: inline-block; position: relative; } .text-effect span:before{ content: attr(data-title); background-image: linear-gradient(45deg, transparent 45%, #fff 45%, #fff 55%, transparent 0); background-size: 0.5rem 0.5rem; background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; width: 100%; position: absolute; left: 0.8rem; top: 0.8rem; animation: animate linear 20s infinite; } @keyframes animate{ 0%{ background-position: 0 0; } 100%{ background-position: -100% -100%; } } @media only screen and (max-width: 990px){ .text-effect span{ font-size: 80px; } } @media only screen and (max-width: 767px){ .text-effect span{ font-size: 55px; } .text-effect span:before{ left: 0.4rem; top: 0.4rem; } } @media only screen and (max-width: 479px){ .text-effect span{ font-size: 40px; } } @media only screen and (max-width: 359px){ .text-effect span{ font-size: 35px; } }html разметка и css стили для реализации блока «Эффекты для текста»