使用CSS3文字顏色變化的循環動畫

我有我想要動畫的文字。例如，不是懸停，而是不斷地從白色變爲紅色，然後再變回白色。使用CSS3文字顏色變化的循環動畫

這是到目前爲止我的CSS代碼：

#countText{ 
    color: #eeeeee; 
    font-family: "League Gothic", Impact, sans-serif; 
    line-height: 0.9em; 
    letter-spacing: 0.02em; 
    text-transform: uppercase; 
    text-shadow: 0px 0px 6px ; 
    font-size: 210px; 
}

來源

2013-05-28 Alex Jj

看看https：//開頭開發er.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_animations – Musa

非常感謝。這麼好的來源。 –

@Alex Jj當值爲'0'時，您可以擺脫'px'或任何單位。你總結了一些大的CSS文件值得它的字節。當數字值爲0時導致'0'。 –

使用keyframes和animation財產

HTML

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui ad quos autem beatae nulla in.</p>

CSS

p{ 
    -webkit-animation: color-change 1s infinite; 
    -moz-animation: color-change 1s infinite; 
    -o-animation: color-change 1s infinite; 
    -ms-animation: color-change 1s infinite; 
    animation: color-change 1s infinite; 
} 

@-webkit-keyframes color-change { 
    0% { color: red; } 
    50% { color: blue; } 
    100% { color: red; } 
} 
@-moz-keyframes color-change { 
    0% { color: red; } 
    50% { color: blue; } 
    100% { color: red; } 
} 
@-ms-keyframes color-change { 
    0% { color: red; } 
    50% { color: blue; } 
    100% { color: red; } 
} 
@-o-keyframes color-change { 
    0% { color: red; } 
    50% { color: blue; } 
    100% { color: red; } 
} 
@keyframes color-change { 
    0% { color: red; } 
    50% { color: blue; } 
    100% { color: red; } 
}

DEMO

來源

2013-05-28 01:28:25 Sourabh

不客氣:)你可以用'動畫'做很多很酷的事情。閱讀[this]（http://css-tricks.com/almanac/properties/a/animation/）。 – Sourabh

另一個樣品1

HTML：

<div class='center'> 

    <p class="awesome">ISN'T THIS AWESOME!</p> 

</div>

CSS：

.center { 

margin: 0 auto; 

} 

.awesome { 

    font-family: futura; 
    font-style: italic; 

    width:100%; 

    margin: 0 auto; 
    text-align: center; 

    color:#313131; 
    font-size:45px; 
    font-weight: bold; 
    position: absolute; 
    -webkit-animation:colorchange 20s infinite alternate; 


} 

@-webkit-keyframes colorchange { 
    0% { 

    color: blue; 
    } 

    10% { 

    color: #8e44ad; 
    } 

    20% { 

    color: #1abc9c; 
    } 

    30% { 

    color: #d35400; 
    } 

    40% { 

    color: blue; 
    } 

    50% { 

    color: #34495e; 
    } 

    60% { 

    color: blue; 
    } 

    70% { 

    color: #2980b9; 
    } 
    80% { 

    color: #f1c40f; 
    } 

    90% { 

    color: #2980b9; 
    } 

    100% { 

    color: pink; 
    } 
}

裁判：https://codepen.io/raaasin/pen/quvHr

來源

2017-06-14 08:20:26

雖然此代碼鏈接可能回答問題，但最好在此處包含答案的基本部分，並提供供參考的鏈接。如果鏈接頁面更改，則僅鏈接答案可能會失效。 – thewaywewere

使用CSS3文字顏色變化的循環動畫

回答

相關問題