Question

我正在尝试对图像执行类似警告效果的操作，并且每隔一段时间轻轻地将图像更改为红色，但它不起作用，这只会消失...
请有人帮我这个吗？

HTML：

<span id="test" class="ui-icon ui-icon-info state1"></span>

CSS：

.state1 {
    background-color: red;
    position: absolute;
    -webkit-transition-property: background-color;
    -webkit-transition-duration: 2s;
    -webkit-transition-timing-function: ease;
    transition-property: background-color;
    transition-duration: 2s;
    transition-timing-function: ease;
}

.state2 {
    background-color: white;
    position: absolute;
    -webkit-transition-property: background-color;
    -webkit-transition-duration: 2s;
    -webkit-transition-timing-function: ease;
    transition-property: background-color;
    transition-duration: 2s;
    transition-timing-function: ease;
}

JS：

var f = document.getElementById('test');
f.addEventListener("transitionend", updateTransition, true);

 function updateTransition() {
  var el = document.querySelector("span.state1");

  if (el) {
    el.className = "state2";
  } else {
    el = document.querySelector("span.state2");
    el.className = "state1";
  }

  return el;
}

var intervalID = window.setInterval(updateTransition, 7000);

方便做这样的事吗？或者最可靠的做一个具有这种效果的gif图像？

认为gif图像的分辨率很差，而且我想要放一个大的项目列表[20x网页]，我有几个SetInterval（）函数来更新某些字段。

FIDDLE：http://jsfiddle.net/JtpxD/1/

由于

Answer 1

这是你想要的吗？ http://jsfiddle.net/MxAX9/1/

基本上是你的代码

el.className = "state2";

将跨度的所有类替换为“state2”，即“ui-icon”，“ui-icon-info”将被删除

Answer 2

更改className

el.className = "state2";

重置类，因此丢失了ui-icon ui-icon-info类。你想要

el.className = "ui-icon ui-icon-info state2";

的jsfiddle： http://jsfiddle.net/SpacePineapple/ztEk5/

CSS3背景图像颜色转换效果适用于图像或更多

2 个答案: