Подробное описание и демонстрация работы блока «Эффекты для текста» для сайта под номером №12 для библиотеки Bootstrap. Html и CSS код для реализации блока forms на сайте как на изображении.
Fokit.ru
html разметка и css стили для реализации блока «Эффекты для текста»
<div class="demo">
<span class="text-effect">Best jQuery</span>
</div>
.demo{
background-color: #000;
padding-bottom: 60px;
}
.text-effect{
color: #fff;
font-size: 100px;
font-family: fontello, "Arial Black", sans-serif;
text-align: center;
text-transform: uppercase;
margin-top: 25px;
display: block;
animation: schwing 8s infinite;
}
@keyframes schwing {
0% {text-shadow: 0 0 0 black, 0 0 10px #217a67, 0 0 0 black, 0 0 10px #217a67, 0 0 0 black, 0 0 10px #217a67;}
5% {text-shadow: 0.2em 0.2em 0 black, 0.2em 0.2em 10px #217a67, 0.4em 0.4em 0 black, 0.4em 0.4em 10px #217a67, 0.6em 0.6em 0 black, 0.6em 0.6em 10px #217a67;}
10% {text-shadow: -0.2em 0.2em 0 black, -0.2em 0.2em 10px #43936a, -0.4em 0.4em 0 black, -0.4em 0.4em 10px #43936a, -0.6em 0.6em 0 black, -0.6em 0.6em 10px #43936a;}
15% {text-shadow: -0.2em -0.2em 0 black, -0.2em -0.2em 10px #a6b039, -0.4em -0.4em 0 black, -0.4em -0.4em 10px #a6b039, -0.6em -0.6em 0 black, -0.6em -0.6em 10px #a6b039;}
20% {text-shadow: 0.2em -0.2em 0 black, 0.2em -0.2em 10px #d7a715, 0.4em -0.4em 0 black, 0.4em -0.4em 10px #d7a715, 0.6em -0.6em 0 black, 0.6em -0.6em 10px #d7a715;}
25% {text-shadow: 0.2em 0.2em 0 black, 0.2em 0.2em 10px #de6505, 0.4em 0.4em 0 black, 0.4em 0.4em 10px #de6505, 0.6em 0.6em 0 black, 0.6em 0.6em 10px #de6505;}
30% {text-shadow: -0.2em 0.2em 0 black, -0.2em 0.2em 10px #ea252d, -0.4em 0.4em 0 black, -0.4em 0.4em 10px #ea252d, -0.6em 0.6em 0 black, -0.6em 0.6em 10px #ea252d;}
35% {text-shadow: -0.2em -0.2em 0 black, -0.2em -0.2em 10px #e623a5, -0.4em -0.4em 0 black, -0.4em -0.4em 10px #e623a5, -0.6em -0.6em 0 black, -0.6em -0.6em 10px #e623a5;}
40% {text-shadow: 0.2em -0.2em 0 black, 0.2em -0.2em 10px #781ba9, 0.4em -0.4em 0 black, 0.4em -0.4em 10px #781ba9, 0.6em -0.6em 0 black, 0.6em -0.6em 10px #781ba9;}
45% {text-shadow: 0.2em 0.2em 0 black, 0.2em 0.2em 10px #2c77c9, 0.4em 0.4em 0 black, 0.4em 0.4em 10px #2c77c9, 0.6em 0.6em 0 black, 0.6em 0.6em 10px #2c77c9;}
50% {text-shadow: -0.2em 0.2em 0 black, -0.2em 0.2em 10px #2e7683, -0.4em 0.4em 0 black, -0.4em 0.4em 10px #2e7683, -0.6em 0.6em 0 black, -0.6em 0.6em 10px #2e7683;}
55% {text-shadow: -0.2em -0.2em 0 black, -0.2em -0.2em 10px #29825f, -0.4em -0.4em 0 black, -0.4em -0.4em 10px #29825f, -0.6em -0.6em 0 black, -0.6em -0.6em 10px #29825f;}
60% {text-shadow: 0.2em -0.2em 0 black, 0.2em -0.2em 10px #98b16b, 0.4em -0.4em 0 black, 0.4em -0.4em 10px #98b16b, 0.6em -0.6em 0 black, 0.6em -0.6em 10px #98b16b;}
65% {text-shadow: 0.2em 0.2em 0 black, 0.2em 0.2em 10px #a1ad1c, 0.4em 0.4em 0 black, 0.4em 0.4em 10px #a1ad1c, 0.6em 0.6em 0 black, 0.6em 0.6em 10px #a1ad1c;}
70% {text-shadow: -0.2em 0.2em 0 black, -0.2em 0.2em 10px #ef9017, -0.4em 0.4em 0 black, -0.4em 0.4em 10px #ef9017, -0.6em 0.6em 0 black, -0.6em 0.6em 10px #ef9017;}
75% {text-shadow: -0.2em -0.2em 0 black, -0.2em -0.2em 10px #df2117, -0.4em -0.4em 0 black, -0.4em -0.4em 10px #df2117, -0.6em -0.6em 0 black, -0.6em -0.6em 10px #df2117;}
80% {text-shadow: 0.2em -0.2em 0 black, 0.2em -0.2em 10px #f22d82, 0.4em -0.4em 0 black, 0.4em -0.4em 10px #f22d82, 0.6em -0.6em 0 black, 0.6em -0.6em 10px #f22d82;}
85% {text-shadow: 0.2em 0.2em 0 black, 0.2em 0.2em 10px #f22d82, 0.4em 0.4em 0 black, 0.4em 0.4em 10px #f22d82, 0.6em 0.6em 0 black, 0.6em 0.6em 10px #f22d82;}
90% {text-shadow: 0 0 0 black, 0 0 10px #f22d82, 0 0 0 black, 0 0 10px #f22d82, 0 0 0 black, 0 0 10px #f22d82;}
91% {text-shadow: none;}
100% {text-shadow: none;}
}
@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; }
}