Question

我正在尝试在我的项目中添加正常模糊以及运动模糊效果。由于我们使用的是Html 4.01，是否有任何解决方案可以在不使用Html 5的情况下添加模糊效果？试过Css过滤器，但它不支持firefox和IE。可能是一个简单的插件，可以解决跨浏览器问题？

Answer 1

我希望 Demo 帮助您

HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
<html>
    <!--[if lt IE 9 ]>

        <body class="oldie">
        <![endif]-->
        <!--[if IE 9 ]>

            <body class="ie9">
            <![endif]-->
            <!--[if (gt IE 9)|!(IE)]>
                <!-->

                <body class="modern">
                <!--<![endif]-->
                <div id="plane">
                    <header><span id="etbr">reflection<span id="refl">reflection</span></span>
                    </header>
                </div>
                </body>

</html>

CSS

html {
    height: 100%;
}
body {
    text-align: center;
    line-height: 1;
    margin: 0;
    padding: 0;
    background-color: #000;
    height: 100%;
}
p {
    line-height: 1.2;
}
#plane {
    padding-top: 5%;
    left: 0;
    top: 10%;
    width: 100%;
    bottom: 0;
    min-width: 1080px;
    min-height: 600px;
    position: absolute;
    overflow: hidden;
    overflow-x: visible;
}
#etbr, #refl {
    color: #F0F;
    font-family: Impact, 'Arial Black', Helvetica, Arial, sans-serif;
    text-transform: uppercase;
    font-size: 200px;
    background-color: #FFE;
    font-weight: bold;
    padding: 30px;
    display: inline-block;
    box-shadow: rgba(255, 255, 240, .2) 0 0 200px 100px, rgba(255, 255, 240, .3) 0 0 40px, inset rgba(0, 0, 0, .8) 0 0 20px;
    border-radius: 30px;
    position: relative;
}
#refl {
    position: absolute;
    z-index: -1;
    top: 100%;
    left: 0;
    -moz-transform: scaleY(-1);
    -webkit-transform: scaleY(-1);
    -ms-transform: scaleY(-1);
    /*filter: url(filter.svg#blur); /* FF, Opera + IE10*/
    -webkit-filter: blur(2px);
    /* webkit */
    box-shadow: inset rgba(0, 0, 0, .8) 0 0 20px, inset #000 0 50px 100px;
}
.modern #refl {
    opacity: .25;
}
.ie9 #refl {
    margin-top: 20px;
    margin-left: -10px;
    -ms-filter:"progid:DXImageTransform.Microsoft.BasicImage(opacity=.25) progid:DXImageTransform.Microsoft.Blur(PixelRadius='3', MakeShadow='false') progid:DXImageTransform.Microsoft.MotionBlur(strength=15, direction=0) progid:DXImageTransform.Microsoft.Blur(PixelRadius='3', MakeShadow='false');"
}
.oldie #refl {
    margin-top: -20px;
    margin-left: -7px;
    filter: progid:DXImageTransform.Microsoft.Gradient(startColorstr=#99000000, endColorstr=#00000000) progid:DXImageTransform.Microsoft.BasicImage(mirror=1, rotation=2, opacity=.35) progid:DXImageTransform.Microsoft.Blur(PixelRadius='3', MakeShadow='false') progid:DXImageTransform.Microsoft.MotionBlur(strength=15, direction=0) progid:DXImageTransform.Microsoft.Blur(PixelRadius='3', MakeShadow='false');
}

source

Answer 2

Dint找到合适的解决方案。所以现在将继续使用SVG。并非所有浏览器都支持Svg。但它在大多数浏览器中都受到支持。我甚至遇到过EaslJs http://www.createjs.com/#!/EaselJS。相当不错!!

是否有可能在不使用html5的情况下在IE8和其他主流浏览器中获得模糊效果和运动模糊效果？

2 个答案: