随着时间的推移来回改变颜色与css

Question

我想知道是否有人可以帮助我在两秒后将div的颜色从黑色变为白色,然后在两秒后从白色变为黑色,再次返回等等,只要div存在.换句话说,只有当用户点击并拖动表面时才显示div(就像桌面选择区域一样),我的目标是在用户仍在选择时更改边框的颜色,如上所述表面就像重新调整div一样.

Answer 1

如果您的浏览器要求允许您使用css3,则根本不需要任何javascript.

HTML:

<div class="blinkdiv">
</div>

CSS:

@-webkit-keyframes blackWhite {  
  0% { background-color: white; }
  50% { background-color: white; }
  51% { background-color: black; }
  100% { background-color: black; }
}

.blinkdiv {
    height: 100px;
    background-color: black;
    -webkit-animation-name: blackWhite;  
    -webkit-animation-iteration-count: infinite;  
    -webkit-animation-duration: 2s; 
}   

这是一个例子:http://jsfiddle.net/tommcquarrie/w3Qy9/1/

Answer 2

每 2 秒后，背景颜色就会从黑色转变为白色，然后重复。

body {
    -webkit-animation:name 2s infinite;
}

@-webkit-keyframes name {
    0% {background-color:black;}
    100% {background-color:white;}
}

jsFiddle 演示..尚未在许多浏览器中测试它..在 Chrome 中工作。