Подробное описание и демонстрация работы блока «Эффекты для текста» для сайта под номером №20 для библиотеки Bootstrap. Html и CSS код для текстовых эффектов на сайте как на изображении.
Fokit.ru
html разметка и css стили для реализации блока «Эффекты для текста»
<div class="demo">
<span class="text-effect">Best jQuery</span>
</div>
.text-effect {
color: #C4E538;
font-family: 'Spicy Rice', cursive;
font-size: 120px;
font-weight: 800;
text-align: center;
text-shadow: 0 0 5px #555;
display: block;
animation: effect 1.5s ease-in-out infinite;
}
@keyframes effect{
50%{
text-shadow: 0 0 5px #555, -3px 20px 0 rgba(231,3,82,0.5), 3px -20px 0 rgba(110,21,193,0.5),
-15px -2px 0 rgba(24,173,29,0.5), 20px 0px 0 rgba(255,127,81,0.5);
}
100%{
text-shadow: 0 0 5px #555, 0 0 0 transparent, 0 0 0 transparent,
0 0 0 transparent, 0 0 0 transparent;
}
}
@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; }
}