CSS3动画文本颜色变化

我是新来的CSS3，并试图学习，但也可以将其应用到我正在处理的项目。我想我不远处，但它只是我坚持的最后一点。CSS3动画文本颜色变化

我想要实现的是字母更改为备选颜色，然后再回到那里原来的颜色，但它遍历字母逐个

即字母A变为深蓝色=>指示灯蓝色=>黑暗蓝字母B变为浅蓝色=>深蓝色=>浅蓝色

这是代码我有到目前为止

body 
 
{ 
 
\t margin: 0px; 
 
\t padding: 0px; 
 
\t background: #FFFFFF; 
 
} 
 

 
ul 
 
{ 
 
position: absolute; 
 
top: 50%; 
 
left: 50% 
 
transform: translate(-50%,-50%); 
 
margin: 0; 
 
padding: 0; 
 
display: flex; 
 
} 
 

 
ul li 
 
{ 
 
\t list-style:none; 
 
\t 
 
\t font-size: 5em; 
 
\t letter-spacing: 15px; 
 
\t 
 
} 
 

 
ul li.A 
 
{ 
 
    color: #3D57A7; 
 
    animation: aniA 1.4s linear infinite; 
 
} 
 

 
ul li.B 
 
{ 
 
\t color: #95D1D7; 
 
\t animation: aniB 3s linear infinite; 
 
\t animation-delay: 1.6s; 
 
} 
 

 
@keyframes aniA 
 
{ 
 
\t 0%, 90% 
 
\t { 
 
\t color: #3D57A7; 
 
\t } 
 

 
\t 100% 
 
\t { 
 
\t color: #95D1D7; 
 
\t } 
 
} 
 

 
@keyframes aniB 
 
{ 
 
\t 0%, 90% 
 
\t { 
 
\t \t color: #95D1D7; 
 
\t } 
 
\t 100% 
 
\t { 
 
\t \t color: #3D57A7; 
 
\t } 
 
} 
 

 
ul li:nth-child(1), ul li:nth-child(10) 
 
{ 
 
\t animation-delay: .2s; 
 
} 
 

 
ul li:nth-child(2), ul li:nth-child(11) 
 
{ 
 
\t animation-delay: .4s; 
 
} 
 

 
ul li:nth-child(3), ul li:nth-child(12) 
 
{ 
 
\t animation-delay: .6s; 
 
} 
 

 
ul li:nth-child(4), ul li:nth-child(13) 
 
{ 
 
\t animation-delay: .8s; 
 
} 
 

 
ul li:nth-child(5), ul li:nth-child(14) 
 
{ 
 
\t animation-delay: 1s; 
 
} 
 

 
ul li:nth-child(6), ul li:nth-child(15) 
 
{ 
 
\t animation-delay: 1.2s; 
 
} 
 

 
ul li:nth-child(7) 
 
{ 
 
\t animation-delay: 1.4s; 
 
} 
 

 
ul li:nth-child(8) 
 
{ 
 
\t animation-delay: 1.6s; 
 
} 
 

 
ul li:nth-child(9) 
 
{ 
 
\t animation-delay: 3s; 
 
}

<ul> 
 
<li class="A">A</li> 
 
<li class="A">A</li> 
 
<li class="A">A</li> 
 
<li class="A">A</li> 
 
<li class="A">A</li> 
 
<li class="A">A</li> 
 
<li class="A">A</li> 
 
<li class="A">A</li> 
 
<li> </li> 
 
<li class="B">B</li> 
 
<li class="B">B</li> 
 
<li class="B">B</li> 
 
<li class="B">B</li> 
 
<li class="B">B</li> 
 
<li class="B">B</li> 
 
</ul>

来源

2017-05-06 ccStars

这里是另一种方式，你可以做到这一点，并保存（一些规则：）

html, body { 
 
    margin: 0; 
 
} 
 
ul { 
 
    position: relative; 
 
    margin: 0; 
 
    padding: 0; 
 
    display: inline-flex; 
 
} 
 
ul::after, 
 
ul li { 
 
    list-style: none; 
 
    font-size: 4em; 
 
    width: 50px; 
 
    text-align: center; 
 
} 
 
ul li.A { 
 
    color: #3D57A7; 
 
} 
 
ul li.B { 
 
    color: #95D1D7; 
 
} 
 
ul::after { 
 
    content: ''; 
 
    position: absolute; 
 
    left: 0; 
 
    top: 0; 
 
    height: 100%; 
 
    width: 50px; 
 
    animation: ani 4s steps(10, end) infinite; 
 
} 
 

 
@keyframes ani { 
 
    0%  { left: 0; content: 'A'; color: #95D1D7; } 
 
    49.9999% { content: 'A'; color: #95D1D7; } 
 
    50%  { color: #95D1D7; } 
 
    50.0001% { content: 'B'; color: #3D57A7; } 
 
    60%  { content: 'B'; color: #3D57A7; } 
 
    100%  { left: 100%; content: 'B'; color: #3D57A7; } 
 
}

<ul> 
 
    <li class="A">A</li> 
 
    <li class="A">A</li> 
 
    <li class="A">A</li> 
 
    <li class="A">A</li> 
 
    <li class="A">A</li> 
 
    
 
    <li class="B">B</li> 
 
    <li class="B">B</li> 
 
    <li class="B">B</li> 
 
    <li class="B">B</li> 
 
    <li class="B">B</li> 
 
    </ul>

来源

2017-05-06 15:01:58 LGSon

我设法解决我的问题，这是我如何实现它

body 
 
{ 
 
\t margin: 0px; 
 
\t padding: 0px; 
 
\t background: #FFFFFF; 
 
} 
 

 
ul 
 
{ 
 
position: absolute; 
 
top: 50%; 
 
left: 50% 
 
transform: translate(-50%,-50%); 
 
margin: 0; 
 
padding: 0; 
 
display: flex; 
 
} 
 

 
ul li 
 
{ 
 
\t list-style:none; 
 
\t 
 
\t font-size: 5em; 
 
\t letter-spacing: 15px; 
 
\t 
 
} 
 

 
ul li.A 
 
{ 
 
    color: #3D57A7; 
 
    animation: aniA 2.8s linear infinite; 
 
} 
 

 
ul li.B 
 
{ 
 
\t color: #95D1D7; 
 
\t animation: aniB 2.8s linear infinite; 
 
} 
 

 
@keyframes aniA 
 
{ 
 
\t 0%, 90% 
 
\t { 
 
\t color: #3D57A7; 
 
\t } 
 

 
\t 100% 
 
\t { 
 
\t color: #95D1D7; 
 
\t } 
 
} 
 

 
@keyframes aniB 
 
{ 
 
\t 0%, 90% 
 
\t { 
 
\t \t color: #95D1D7; 
 
\t } 
 
\t 100% 
 
\t { 
 
\t \t color: #3D57A7; 
 
\t } 
 
} 
 

 
ul li:nth-child(1) 
 
{ 
 
\t animation-delay: .2s; 
 
} 
 

 
ul li:nth-child(2) 
 
{ 
 
\t animation-delay: .4s; 
 
} 
 

 
ul li:nth-child(3) 
 
{ 
 
\t animation-delay: .6s; 
 
} 
 

 
ul li:nth-child(4) 
 
{ 
 
\t animation-delay: .8s; 
 
} 
 

 
ul li:nth-child(5) 
 
{ 
 
\t animation-delay: 1s; 
 
} 
 

 
ul li:nth-child(6) 
 
{ 
 
\t animation-delay: 1.2s; 
 
} 
 

 
ul li:nth-child(7) 
 
{ 
 
\t animation-delay: 1.4s; 
 
} 
 

 
ul li:nth-child(8) 
 
{ 
 
\t animation-delay: 1.6s; 
 
} 
 

 
ul li:nth-child(9) 
 
{ 
 
\t animation-delay: 2.8s; 
 
} 
 

 
ul li:nth-child(10) 
 
{ 
 
\t animation-delay: 1.8s; 
 
} 
 

 
ul li:nth-child(11) 
 
{ 
 
\t animation-delay: 2s; 
 
} 
 

 
ul li:nth-child(12) 
 
{ 
 
\t animation-delay: 2.2s; 
 
} 
 

 
ul li:nth-child(13) 
 
{ 
 
\t animation-delay: 2.4s; 
 
} 
 

 
ul li:nth-child(14) 
 
{ 
 
\t animation-delay: 2.6s; 
 
} 
 

 
ul li:nth-child(15) 
 
{ 
 
\t animation-delay: 2.8s; 
 
}

<ul> 
 
<li class="A">A</li> 
 
<li class="A">A</li> 
 
<li class="A">A</li> 
 
<li class="A">A</li> 
 
<li class="A">A</li> 
 
<li class="A">A</li> 
 
<li class="A">A</li> 
 
<li class="A">A</li> 
 
<li> </li> 
 
<li class="B">B</li> 
 
<li class="B">B</li> 
 
<li class="B">B</li> 
 
<li class="B">B</li> 
 
<li class="B">B</li> 
 
<li class="B">B</li> 
 
</ul>

来源

2017-05-06 09:53:47 ccStars

CSS3动画文本颜色变化

回答

相关问题