消失的图像与样式模糊HTML

Disappear image with style blur HTML

本文关键字：模糊 HTML 样式 图像 消失      更新时间：2023-09-26

我需要一个图片，一些时间淡出时尚模糊，我可以做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>

谢谢

使用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}
}

CSS使用transition

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

#something {
    transition: opacity 0.5s;
}
#something:hover {
    opacity: 0;
}

使用jQuery 

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

编辑

CSS使用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*/
}

查看CSS3 filter的更多精彩用法

查看IE过滤器

你可以使用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>

正如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)

相关文章：