zoukankan      html  css  js  c++  java
  • 【前端】模糊图片

    1.使用svg和css来模糊图片

    [代码 http://bin.amazeui.org/lixedacuje/1/edit?html,css,output)

    <!DOCTYPE html>
    <html>
    <head>
      <meta charset="utf-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport"
            content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
      <title> </title>
     
    </head>
    <body>
    <img id="css-filter-blur" src="http://css-plus.com/examples/2012/03/gaussian-blur/i/fence.jpg" alt="Blur" height="200" width="300" />
    
    <svg id="svg-image-blur">
        <filter id="blur-effect-1">
            <feGaussianBlur stdDeviation="2" />
        </filter>
    </svg>
     
    </body>
    </html>
    
    #css-filter-blur { margin: 20px; }
    #css-filter-blur:hover { 
        -webkit-filter: blur(1px); 
        filter: url(#blur-effect-1);
    }
    
    .lt-ie9 #css-filter-blur:hover {
        filter:         progid:DXImageTransform.Microsoft.Blur(Strength=2);
        position: relative;
        left: -2px;
        top: -2px;
        }
    

    鼠标移动到图片上既可以看到效果。

    2.使用第三方动画库来模糊,比如animo-js

    [示例](http://labs.bigroomstudios.com/libraries/animo-js)

    
    // Blurring of the image
    $('#blur_img').animo('blur');
    
    // Focus
    $('#blur_img').animo('focus');
    
    
    // Blurring of the text (slowly and heavily)
    $('#blur_text').animo('blur', {duration: 3, amount: 15});
    
    // Focus
    $('#blur_text').animo('focus');
    
    
  • 相关阅读:
    springboot模板
    springboot入门
    java自定义注解
    git集成idea
    git的搭建和使用
    Shiro授权
    shiro认证
    shiro入门
    springmvc文件上传
    springmvc入门
  • 原文地址:https://www.cnblogs.com/ae6623/p/4501521.html
Copyright © 2011-2022 走看看