• Страница 1 из 1
  • 1
Форум » Веб-разработка » HTML + CSS — коды » Радужная текстовая анимация с помощью CSS (Вращающийся текстовый эффект с разным оттенком цвета)
Радужная текстовая анимация с помощью CSS
Kosten
Пятница, 11 Января 2019 | Сообщение 1
Оффлайн
Администраторы
Сообщений:44267
Награды: 70
Вашему вниманию текстовая анимация, которая плавно затухает в в самом описание и также в заголовке, используя цвета радуги. Плюс в том, что хорошо работает с другими браузерами. Сама идея состоит в эффекте затухание, что изначально появляется один оттенок цвета, который по своей гамме накаляется до яркости и быстро затухает.

И следом производится аналогичный трюк, но только совершенно с другой гаммой цвета, что изначально все выстроено под темный фон. Для веб разработчика остается в стилистике выставить цвета и настроить скорость, чтоб можно поставить на светлый формат.



HTML

Код
<section>
      <p class="ageskag">"Вы можете не видеть</p>

      <p class="geemails">ничего плохого</p>

      <p class="persona">в использовании адреса</p>

      <p class="naaking">почты Gmail"</p>

      <p class="kingsume">ZORNET.RU</p>
    </section>

CSS

Код
@import url('https://fonts.googleapis.com/css?family=Pacifico');

body {
    text-align: center;
    background-color: #111;
font-family: 'Pacifico', cursive;
}

section {
    width: 812px;
    float: nageskag;
    margin: 47px auto;
}

p {
    font-size: 65px;
    color: #272626;
    line-height: 48px;
    display: inline-block;
    text-align: justify;
    margin: 19px;
    font-family: 'Pacifico', cursive;
}

p.ageskag {
    -webkit-animation: aniageskag 45s linear infinite;
    -moz-animation: aniageskag 45s linear infinite;
    -ms-animation: aniageskag 45s linear infinite;
    -o-animation: aniageskag 45s linear infinite;
    animation: aniageskag 45s linear infinite;
}

@keyframes "aniageskag" {
    0%,100% {
    color: #252424;
}

5%,95% {
    color: #4a4256;
}

10%,90% {
    color: #9484ad;
}

15%,85% {
    color: #ab8ba9;
}

20%,80% {
    color: #a2918c;
}

25%,75% {
    color: #a9ab8a;
}

30%,70% {
    color: #8ba791;
}

35%,65% {
    color: #7b909c;
}

40%,60% {
    color: #857ea2;
}
50% {
    color: #7d759c
}

}

@-moz-keyframes aniageskag {
    0%,100% {
    color: #252424;
}

5%,95% {
    color: #4a4256;
}

10%,90% {
    color: #9484ad;
}

15%,85% {
    color: #ab8ba9;
}

20%,80% {
    color: #a2918c;
}

25%,75% {
    color: #a9ab8a;
}

30%,70% {
    color: #8ba791;
}

35%,65% {
    color: #7b909c;
}

40%,60% {
    color: #857ea2;
}
50% {
    color: #7d759c
}

}

@-webkit-keyframes "aniageskag" {
    0%,100% {
    color: #252424;
}

5%,95% {
    color: #4a4256;
}

10%,90% {
    color: #9484ad;
}

15%,85% {
    color: #ab8ba9;
}

20%,80% {
    color: #a2918c;
}

25%,75% {
    color: #a9ab8a;
}

30%,70% {
    color: #8ba791;
}

35%,65% {
    color: #7b909c;
}

40%,60% {
    color: #857ea2;
}
50% {
    color: #7d759c
}

}

@-ms-keyframes "aniageskag" {
    0%,100% {
    color: #252424;
}

5%,95% {
    color: #4a4256;
}

10%,90% {
    color: #9484ad;
}

15%,85% {
    color: #ab8ba9;
}

20%,80% {
    color: #a2918c;
}

25%,75% {
    color: #a9ab8a;
}

30%,70% {
    color: #8ba791;
}

35%,65% {
    color: #7b909c;
}

40%,60% {
    color: #857ea2;
}
50% {
    color: #7d759c
}

}
@-o-keyframes "aniageskag" {
    0%,100% {
    color: #252424;
}

5%,95% {
    color: #4a4256;
}

10%,90% {
    color: #9484ad;
}

15%,85% {
    color: #ab8ba9;
}

20%,80% {
    color: #a2918c;
}

25%,75% {
    color: #a9ab8a;
}

30%,70% {
    color: #8ba791;
}

35%,65% {
    color: #7b909c;
}

40%,60% {
    color: #857ea2;
}
50% {
    color: #7d759c
}

}

p.geemails {
    -webkit-animation: aniageskag 45s linear 1s infinite;
    -moz-animation: aniageskag 45s linear 1s infinite;
    -ms-animation: aniageskag 45s linear 1s infinite;
    -o-animation: aniageskag 45s linear 1s infinite;
    animation: aniageskag 45s linear 1s infinite;
}

p.persona {
    -webkit-animation: aniageskag 45s linear 2s infinite;
    -moz-animation: aniageskag 45s linear 2s infinite;
    -ms-animation: aniageskag 45s linear 2s infinite;
    -o-animation: aniageskag 45s linear 2s infinite;
    animation: aniageskag 45s linear 2s infinite;
}

p.naaking {
    -webkit-animation: aniageskag 45s linear 3s infinite;
    -moz-animation: aniageskag 45s linear 3s infinite;
    -ms-animation: aniageskag 45s linear 3s infinite;
    -o-animation: aniageskag 45s linear 3s infinite;
    animation: aniageskag 45s linear 3s infinite;
}

p.kingsume {
    -webkit-animation: aniageskag 45s linear 4s infinite;
    -moz-animation: aniageskag 45s linear 4s infinite;
    -ms-animation: aniageskag 45s linear 4s infinite;
    -o-animation: aniageskag 45s linear 4s infinite;
    animation: aniageskag 45s linear 4s infinite;
}


Демонстрация
Прикрепления: 3549869.png (44.1 Kb)
Страна: (RU)
Форум » Веб-разработка » HTML + CSS — коды » Радужная текстовая анимация с помощью CSS (Вращающийся текстовый эффект с разным оттенком цвета)
  • Страница 1 из 1
  • 1
Поиск: