0

我需要一张有时会淡出时尚模糊的图片，我可以只使用 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>

谢谢

4

3 回答 3

4

使用 CSSanimation

如果你想使用 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}
}

演示

使用 CSStransition

transition如果您只想要一个简单的淡出，您也可以使用

#something {
    transition: opacity 0.5s;
}

#something:hover {
    opacity: 0;
}

演示

使用 jQuery

$('img#something').delay(1000).fadeOut(1000);

演示

编辑

CSS 使用filter属性

一段时间后，您还可以使用 CSS3filter属性。它目前仅支持-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*/
}

演示

查看 CSS3 的更多精彩用途filter

在这里查看 IE 过滤器

于 2013-05-27T18:43:43.677 回答
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>
于 2013-05-27T18:44:09.330 回答
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）

于 2013-05-27T19:16:05.463 回答