[英]CSS3 background image color transition effect for an image or more
I'm trying to do something like a warning effect over a image, and change the image to a red color softly, every some time, but it doesn't work,this only disappear... 我正在尝试对图像执行警告效果之类的操作,然后每隔一段时间将图像柔和地更改为红色,但这是行不通的,只会消失...
Please could somebody help me with this? 请有人可以帮我吗?
HTML: HTML:
<span id="test" class="ui-icon ui-icon-info state1"></span>
CSS: 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: 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);
Is convenient do something like this?, or is most reliable do a gif image with this effect? 这样方便吗?还是最可靠的gif图像具有这种效果?
Thinking that gif image have a poor resolution and also I want put a large list of items like this [20x web page] and I have several SetInterval() functions to update some fields. 考虑到gif图像的分辨率很差,我也想放很多像[20x web page]这样的项目,并且我有几个SetInterval()函数来更新某些字段。
FIDDLE: http://jsfiddle.net/JtpxD/1/ 内容: http : //jsfiddle.net/JtpxD/1/
Thanks 谢谢
Is this what you want? 这是你想要的吗? http://jsfiddle.net/MxAX9/1/
http://jsfiddle.net/MxAX9/1/
basically your code 基本上你的代码
el.className = "state2";
replaced all class for the span to "state2", ie "ui-icon", "ui-icon-info" will be removed 将跨度的所有类替换为“ state2”,即“ ui-icon”,“ ui-icon-info”将被删除
changing the className 更改className
el.className = "state2";
resets the classes, so you lose the ui-icon ui-icon-info
classes. 重置类,因此您将丢失
ui-icon ui-icon-info
类。 you'd want 你想要
el.className = "ui-icon ui-icon-info state2";
jsfiddle: http://jsfiddle.net/SpacePineapple/ztEk5/ jsfiddle: http : //jsfiddle.net/SpacePineapple/ztEk5/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.