Подробное описание и демонстрация работы блока «Эффекты для текста» для сайта под номером №11 для библиотеки Bootstrap. Html и CSS код для реализации блока forms на сайте как на изображении.
Fokit.ru html разметка и css стили для реализации блока «Эффекты для текста»<span class="text-effect">Best jQuery</span>
.text-effect{
display: block;
font-size: 100px;
font-family: fontello, "Arial Black", sans-serif;
color: #202020;
text-align: center;
text-transform: uppercase;
animation: animate 0.3s steps(50) infinite;
}
@keyframes animate{
0%{ text-shadow: 3px 0 0 red,-3px 0 0 blue; filter:blur(0); }
5%{ text-shadow: 3px 0 0 red,-3px 0 0 blue; filter:blur(0); }
11%{ text-shadow: -3px 0 0 red,3px 0 0 blue; filter:blur(0.5); }
15%{ text-shadow: -3px 0 0 red,3px 0 0 blue; filter:blur(0); }
21%{ text-shadow: 3px 0 0 red,-3px 0 0 green; filter:blur(0); }
25%{ text-shadow: 3px 0 0 red,-3px 0 0 green; filter:blur(0); }
31%{ text-shadow: -3px 0 0 red,3px 0 0 green; filter:blur(0); }
35%{ text-shadow: -3px 0 0 red,3px 0 0 green; filter:blur(0); }
41%{ text-shadow: 4px 0 0 red,-4px 0 0 green; filter:blur(0); }
45%{ text-shadow: 4px 0 0 red,-4px 0 0 green; filter:blur(0); }
51%{ text-shadow: -10px 0 0 red,10px 0 0 green; filter:blur(0); }
55%{ text-shadow: -10px 0 0 red,10px 0 0 green; filter:blur(0); }
61%{ text-shadow: 10px 0 0 red,-10px 0 0 blue; filter:blur(0); }
65%{ text-shadow: 10px 0 0 red,-10px 0 0 blue; filter:blur(0); }
71%{ text-shadow: -3px 0 0 red,3px 0 0 blue; filter:blur(0.5); }
75%{ text-shadow: -3px 0 0 red,3px 0 0 blue; filter:blur(0); }
81%{ text-shadow: 3px 0 0 red,-3px 0 0 green; filter:blur(0); }
85%{ text-shadow: 3px 0 0 red,-3px 0 0 green; filter:blur(0); }
91%{ text-shadow: -3px 0 0 red,3px 0 0 green; filter:blur(0); }
95%{ text-shadow: -3px 0 0 red,3px 0 0 green; filter:blur(0); }
100%{ text-shadow: 4px 0 0 red,-4px 0 0 green; filter:blur(0); }
}
@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; }
}