随着时间的推移来回改变颜色与css [英] Change color with css over time back and forth

问题描述

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

I was wondering if someone could help me change the color of a div from black to white after two seconds, then from white to black after two seconds, back again and so on as long as the div exists. Putting it other way, the div is only shown whenever a user clicks and drags a surface (just like the desktop selection area) and my objective is to change the color of the borders as described above while the user is still making his selection on the surface just as resizing the div.

推荐答案

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

If your browser requirements allow you to use css3 you don't need any javascript at all.

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/

这篇关于随着时间的推移来回改变颜色与css的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！