Kosten |
Пятница, 11 Января 2019, 22:44 | Сообщение 1 |
|
Вашему вниманию текстовая анимация, которая плавно затухает в в самом описание и также в заголовке, используя цвета радуги. Плюс в том, что хорошо работает с другими браузерами. Сама идея состоит в эффекте затухание, что изначально появляется один оттенок цвета, который по своей гамме накаляется до яркости и быстро затухает.
И следом производится аналогичный трюк, но только совершенно с другой гаммой цвета, что изначально все выстроено под темный фон. Для веб разработчика остается в стилистике выставить цвета и настроить скорость, чтоб можно поставить на светлый формат.
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;
}
Демонстрация
|
| [ RU ] |
|
|
