品牌互联网化服务 专注于网站建设与SEO优化的合理结合
咨询:13072437278
2021-12-09

css3简单解决图片鼠标经过毛玻璃效果

类型:定制网站
  • 阅读量:651
  • 来源:聚艺科技
    你当前位置: 首页 > 新闻动态 > 定制网站

    今天在使用icloud的时候看到苹果icloud官网的毛玻璃效果非常赞,仔细研究了一下它的实现方式,是使用js配合background-image: -webkit-canvas的形式绘制出的毛玻璃背景图片。

    不过今天又仔细研究了一下css3中的blur方法,可以实现同样的效果。且配合JS可以实现模糊缩放的效果

    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" class="blur" />


    其中blur(10px)中的大小决定了模糊后的图片大小和模糊程度

    来源声明:本文章系聚艺科技编辑原创或采编整理,如需转载请注明来自聚艺科技。以上内容部分(包含图片、文字)来源于网络,出于传递更多信息之目的。如有标注错误或侵权,请作者持权属证明与本网联系,我们将及时更正、删除,谢谢。
    标签: 网站代运营
    沈阳聚艺网络提供沈阳网站建设,沈阳网站制作,沈阳网络营销,沈阳网络推广,沈阳网站优化,沈阳小程序开发,沈阳托管运维等多种服务! Copyright © 2030 沈阳市聚艺网络科技技术有限公司. All Rights Reserved 备案号:辽ICP备19003083号-1

    在线咨询

    微信咨询

    电话咨询

    24小时电话
    13072437278

    联系我们

    返回顶部