New course! Every coder should learn Generative AI!
Try a free lesson0
Переливающийся текст, как его сделать? (Css)
Здравствуйте, я русский, можно спросить: кто-нибудь знает как сделать такую вещь, (css) чтобы например было написано слово "Привет" и оно по одной букве переливалось, типо "П" - красная буква, потом через секунду "р" - красная, "П" - оранжевая, ну и т.д., и чтобы это было одно слово! (Я пытаюсь это сделать, но у меня не получается сделать из одного слова)
17 Answers
+ 5
Работает?
+ 3
Очень круто получилось, мне нравится, хочешь побольше цветов, попробуй добавить к анимации 10% { color: green}.
+ 2
У меня есть идея)а если задать цвет текста градиентом а потом анимацию, один градиент меняет другой градиет. На первом все цвета красные р- красная, п-красная на втором первый цвет красный, второй оранжвый и получится р-красная, п-оранжевая и т.д
+ 1
Вот смотри: (css)
body{
background: #2b2b2b;
margin: 0;
padding: 0;
}
.loader{
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
}
.loader span{
font-family: arial;
font-size: 35px;
color: gray;
display: inline-block;
transition: all .5s;
animation: animate 2s infinite;
}
.loader span:nth-child(1)
{
animation-delay: .1s;
}
.loader span:nth-child(2)
{
animation-delay: .2s;
}
.loader span:nth-child(3)
{
animation-delay: .3s;
}
.loader span:nth-child(4)
{
animation-delay: .4s;
}
.loader span:nth-child(5)
{
animation-delay: .5s;
}
.loader span:nth-child(6)
{
animation-delay: .6s;
}
.loader span:nth-child(7)
{
animation-delay: .7s;
}
@keyframes animate{
0%{
color: red;
transform: translateY(0);
margin: 0;
}
25%{
color: white;
transform: translateY(-15px);
margin-le
+ 1
(html)
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Loading page</title>
<link rel="stylesheet" href="../css/style1.css">
</head>
<body>
<div class="container loader">
<span>L</span>
<span>O</span>
<span>A</span>
<span>D</span>
<span>I</span>
<span>N</span>
<span>G</span>
</div>
</body>
</html>
+ 1
У меня получилось!) Смотри:
/*сделал Семён!) (Created Семён)*/
body{
background: #2b2b2b;
margin: 0;
padding: 0;
}
.loader{
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
}
.loader span{
font-family: arial;
font-size: 35px;
color: gray;
display: inline-block;
transition: all .5s;
animation: animate 2s infinite;
}
.loader span:nth-child(1)
{
animation-delay: .1s;
}
.loader span:nth-child(2)
{
animation-delay: .2s;
}
.loader span:nth-child(3)
{
animation-delay: .3s;
}
.loader span:nth-child(4)
{
animation-delay: .4s;
}
.loader span:nth-child(5)
{
animation-delay: .5s;
}
.loader span:nth-child(6)
{
animation-delay: .6s;
}
.loader span:nth-child(7)
{
animation-delay: .7s;
}
@keyframes animate{
0%{
color: white;
transform: translateY(0);
margin: 0;
}
10%{
color:purple;
+ 1
Это код в css мне нравится!)))
+ 1
Не догадался) (а это как?) Я не знаю как это сделать!)))
0
Можно по подробнее
0
Посмотри что будет, и как сделать
0
Я вот как раз по пробовал, а он работать перестал
0
А что исходник в виде ссылки не бывает выложить?????
0
)))
0
Ха, скопируй текст кода и создай код
0
Выбери код web. Там css, php html js
0
Типа того
Often have questions like this?
Learn more efficiently, for free:
Hot today
Help me plss
0 Votes
Hello
0 Votes
Android studio emulator
0 Votes
[SOLVED] About split() Function
1 Votes
help me
0 Votes
Return function
0 Votes
From code challenges
0 Votes