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動畫文本顏色變化

回答

相關問題