Javascript-纯色文本Flash

Javascript - Solid Colored Text Flash

本文关键字：Flash 文本 纯色 Javascript-      更新时间：2023-09-26

基本上我想做的就是让文本闪烁不同的颜色。等。文本闪烁蓝色，然后是红色，然后是粉红色，然后是紫色，等等。提前感谢

您可以使用CSS3而不是Javascript。下面的示例从红色闪烁到黄色、绿色、蓝色再闪烁到红色。请记住为mozilla、webkit等添加特定的供应商前缀（例如-moz动画和-moz关键帧）

index.html

<!doctype html>
<html>
<head>
    <title>Blinking Text</title>    
    <link rel="stylesheet" href="style.css" />      
</head>
<body>   
    <div class="test">Text</div>       
   </body>
</html>

style.css

.test
{
    font-size: 48pt;
    animation: 2s blink steps(1) infinite;  
}
@keyframes blink
{
    0% { color: red; }
    25% { color: yellow; }
    50% { color: green; }
    75% { color: blue; }
    100% {color: red; }
}

看看这个jsfiddle。出于教学目的，我对JS的每一部分都进行了评论：http://jsfiddle.net/VXRpz/

function flashtext(ele,col) {
var tmpColCheck = document.getElementById( ele ).style.color;
  if (tmpColCheck === 'silver') {
    document.getElementById( ele ).style.color = col;
  } else {
    document.getElementById( ele ).style.color = 'silver';
  }
} 
setInterval(function() {
    flashtext('flashingtext','red');
    flashtext('flashingtext2','blue');
    flashtext('flashingtext3','green');
}, 500 ); //set an interval timer up to repeat the function
相关文章：