我需要一张时间淡出时尚模糊的照片，我可以用html，javascript和css吗？
我有这个简单的代码，但我想要风格：
<head>
<script type="text/javascript">
window.setTimeout("document.getElementById('something').style.display='none';", 1000);
</script>
<img id="something" src="error.png" width="100" height="100" border="0" alt="" />
</head>
由于
答案 0 :(得分：4)
animation 如果您想使用CSS，可以使用animation属性。将所有前缀添加到CSS
#something:hover {
-webkit-animation: disappear 0.5s ease-in-out;
-webkit-animation-iteration-count: 1;
-webkit-animation-fill-mode: both;
}
@-webkit-keyframes disappear{
0% {opacity: 1}
100% { opacity: 0}
}
transition 如果您只想要一个简单的淡出
，也可以使用transition
#something {
transition: opacity 0.5s;
}
#something:hover {
opacity: 0;
}
$('img#something').delay(1000).fadeOut(1000);
filter属性一段时间后，您还可以使用CSS3 filter属性。它目前仅由-webkit支持，但其他人很快就会实施。
#something {
transition: all 1s;
}
#something:hover {
-webkit-filter: opacity(0%);
filter: opacity(0%); /* Official version - without prefixes */
/* -moz (gecko) -o -ms dont support it, for now. IE does have an */
/* unofficial version of filter from IE4 to IE9*/
}
答案 1 :(得分：3)
你可以使用更简单的jQuery。
但这里是纯粹的javascript：
<img id="something" src="error.png" width="100" height="100" border="0" alt="" onclick="fade(document.getElementById('something')"/>
<script>
function fade(element) {
var op = 1; // initial opacity
var timer = setInterval(function () {
if (op <= 0.1){
clearInterval(timer);
element.style.display = 'none';
}
element.style.opacity = op;
element.style.filter = 'alpha(opacity=' + op * 100 + ")";
op -= op * 0.1;
}, 50);
}
或使用jQuery（首先包括jQuery然后......）
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script>
function fade(element) {
$("#something").fadeOut(1000);
}
</script>
答案 2 :(得分：0)
正如Sourabh所说，使用纯css你可以用动画来做，如果你真的想要模糊效果，我会这样做：
#something:hover {
-webkit-animation: disappear 0.5s 1 ease-in-out;
}
@-webkit-keyframes disappear{
0% {opacity: 1; -webkit-filter: blur(0px);}
100% { opacity: 0; -webkit-filter: blur(10px);}
}
我认为过滤器仅适用于webkit浏览器（safari - chrome）