CSS滤镜让图片模糊(毛玻璃效果)实例页面

.blur {
    filter: url(blur.svg#blur); /* FireFox, Chrome, Opera */

    -webkit-filter: blur(10px); /* Chrome, Opera */
       -moz-filter: blur(10px);
        -ms-filter: blur(10px);
            filter: blur(10px);

    filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius=10, MakeShadow=false); /* IE6~IE9 */
}
HTML代码:
<img src="mm1.jpg" />
<img src="mm1.jpg" class="blur" />
时间: 2024-08-06 19:45:12

CSS滤镜让图片模糊(毛玻璃效果)实例页面的相关文章

CSS鼠标悬浮图片模糊切换效果

分享一段代码实例,它实现了图片的模糊效果. 默认状态下,图片是模糊的,当鼠标悬浮那么图片会恢复正常状态. 代码实例如下: <!doctype html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>web前端开发学习q群

css滤镜让图片模糊

.mhblur { filter: url(blur.svg#blur); /* FireFox, Chrome, Opera */ -webkit-filter: blur(53px); /* Chrome, Opera */ -moz-filter: blur(53px); -ms-filter: blur(53px); filter: blur(53px); filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius=53, Mak

javascript 图片淡入淡出效果 实例源代码

? 1 代码说明:把代码粘贴好之后,需要更改html代码中的图片路径,即可执行成功.<br>后面还有对js代码的详细说明,希望大家好好消化,好好理解.<br><br>html源代码: 1 <head> 2 <title>图片切换</title> 3 <script type="text/javascript" src="图片切换.js"></script> 4 <l

[转] 小tip: 使用CSS将图片转换成模糊(毛玻璃)效果 ---张鑫旭

by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=3804 去年盛夏之时,曾写过“小tip: 使用CSS将图片转换成黑白”一文,本文的模式以及内容其实走得是类似路线.CSS3 → SVG → IE filter → canvas. 前段时间,iOS7不是瓜未熟就落地了嘛,然后捡瓜的人很多,然后国内外开始了各种探讨,从界面到动画,从兼容到实现等.其中,“毛玻璃”一次梆梆出世

用css使图片产生毛玻璃效果

毛玻璃的图片效果,使得其显示更加唯美,用户体验更佳,所以在手机端电脑端应用甚广 比如ios系统: 所以现在我们就来看看毛玻璃效果的实现方法吧: 首先这是html的主要内容: <div class="container"> <div class="mat_class"></div> <p class="word">SHOW TIME</p> </div> 这里container

CSS鼠标悬停图片加边框效果,不位移的方法

<!DOCTYPE HTML> <html lang="en-US"> <head> <title>css实现鼠标悬停时图片加边框效果</title> <style type="text/css"> body{background:#222;color:#06c;} em{ font-style:inherit;} img{background:white;margin:0 5px;width:

css3简单实现图片模糊过滤效果

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head>     <meta http-equiv="Cont

使用强大的 CSS 滤镜实现安卓充电动画效果

用安卓手机的同学肯定不陌生,这个是安卓手机在充电的时候的效果.看到这个我就很好奇,使用 CSS 能做到吗? 经过一番尝试,发现使用 CSS 也是可以很好的模拟这种动画效果: 知识点 拆解一下知识点,最主要的其实是用到了 filter: contrast() 以及 filter: blur() 这两个滤镜,可以很好的实现这种融合效果. 单独将两个滤镜拿出来,它们的作用分别是: filter: blur(): 给图像设置高斯模糊效果. filter: contrast(): 调整图像的对比度. 但是

CSS3新vw, vh单位与纯CSS定位的弹框屏幕居中效果实例页面

在css中vw和vh分别代表所占的百分比,可以设置最外部的容器的宽高,但是都要结合百分比一起使用. 展示 回到相关文章 ? 图片宽度(目前1024像素): 128  1024 点击我出现图片弹框 代码CSS代码:.dialog_container {    display: none;    width: 100%;    width: 100vw;    height: 100%;    height: 100vh;    background-color: rgba(0,0,0,.35);