Подробное описание и демонстрация работы блока «Эффекты для текста» для сайта под номером №21 для библиотеки Bootstrap. Html и CSS код для текстовых эффектов на сайте как на изображении.
Fokit.ru
html разметка и css стили для реализации блока «Эффекты для текста»
<div class="demo">
<span class="text-effect">Best jQuery</span>
</div>
.text-effect {
color: #fff;
font-size: 100px;
font-style: italic;
font-weight: 800;
font-family: 'Chela One';
text-align: center;
text-transform: capitalize;
display: block;
text-shadow: 0 0 5px #fff, 0 0 6px #fff;
animation: 2s effect infinite alternate;
}
@keyframes effect {
0%{ text-shadow: 0 0 5px #fff, 0 0 6px #fff; }
10%{
color: #8e44ad;
text-shadow: 0 0 5px #fff, 0 0 6px #fff;
}
20%{
color: #ff9000;
text-shadow: 0 0 5px #fff, 0 0 0px #fff;
}
30%{
color: #fed330;
text-shadow: 0 0 20px #fff, 0 0 10px #fff;
}
40%{
color: #26de81;
text-shadow: 0 0 5px #fff, 0 0 6px #fff;
}
50%{
color: #00ffae;
text-shadow: 0 0 10px #fff, 0 0 6px #fff;
}
60%{
color: #00a9ff;
text-shadow: 0 0 5px #fff, 0 0 6px #fff;
}
70%{
color: #2200ff;
text-shadow: 0 0 10px #fff, 0 0 6px #fff;
}
80%{
color: #dc00ff;
text-shadow: 0 0 5px #fff, 0 0 6px #fff;
}
90%{
color: #ff00d4;
text-shadow: 0 0 5px #fff, 0 0 6px #fff;
}
100%{
color: #8e44ad;
text-shadow: 0 0 5px #fff, 0 0 6px #fff;
}
}
@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; }
}