Подробное описание и демонстрация работы блока «Эффекты для текста» для сайта под номером №19 для библиотеки Bootstrap. Html и CSS код для текстовых эффектов на сайте как на изображении.

Fokit.ru
.demo{ background-color: #056608; }
.text-effect {
    color: #139617;
    font-family: 'Iceland', cursive;
    font-size: 120px;
    font-weight: 800;
    text-align: center;
    display: block;
    animation: effect 1.5s ease-in-out infinite alternate;
}
@keyframes effect{
    from{
        color: #fff;
        text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff,
            0 0 40px #60c463, 0 0 70px #60c463, 0 0 80px #60c463,
            0 0 100px #60c463, 0 0 150px #60c463;
    }
    to{
        color: #139617;
        text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff,
            0 0 20px #60c463, 0 0 35px #60c463, 0 0 40px #60c463,
            0 0 50px #60c463, 0 0 75px #60c463;
    }
}
@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; }
}
<div class="demo">
    <span class="text-effect">Best jQuery</span>
</div>
html разметка и css стили для реализации блока «Эффекты для текста»


Теги:
0

Оставить своё мнение

Ваш e-mail не будет опубликован. Обязательные поля помечены *