您当前的位置:主页 > 资源下载 > Html5模版网站首页Html5模版

CSS3毛玻璃实现微信发红包看照片

发布时间:2016-03-06编辑:余斗文件大小:201KB阅读:(0)字号:
      前面讲了《利用CSS3实现图片的毛玻璃效果》,接下来我们可以结合CSS3毛玻璃实现微信版的发红包看完整照片效果。可以完美的兼容移动端与PC端。   代码   HTML代码:

    <div id="content">
    <!--模糊图片-->
    <img id="blur" src="picture/blur.jpg">
    <!--使用canvas绘制图片-->
    <canvas id="canvas"></canvas>
    <a href="http://lailaikeji.com/spa" style="color:#91268F">"javascript:reset()" rel="external nofollow" class="button" id="button-reset">提示</a>
    <a href="http://lailaikeji.com/spa" style="color:#91268F">"javascript:show()" rel="external nofollow" class="button" id="button-show">原图</a>
    </div>
     
      CSS代码:

    body,html{margin:0;padding:0;overflow:hidden}
    #content{position:relative;margin:0 auto;overflow:hidden}
    #blur{position:absolute;margin:0 auto;left:0;top:0;filter:blur(10px);-webkit-filter:blur(18px);-moz-filter:blur(18px);-ms-filter:blur(18px);-o-filter:blur(18px);z-index:0;display:block}
    #canvas{position:absolute;margin:0 auto;left:0;top:0;z-index:1;display:block}
    .button{padding:5px 10px;color:#fff;position:absolute;display:block;text-align:center;border-radius:4px;text-decoration:none;z-index:3}
    #button-reset{left:10%;bottom:5%;background-color:red}
    #button-show{right:10%;bottom:5%;background-color:green}
     
      JS代码:

    <script>
    var canWidth = 600;
    var canHeight = 400;

    var canvas=document.getElementById("canvas");
    var ctx = canvas.getContext("2d");
    canvas.width = canWidth;
    canvas.height = canHeight;
    var img = new Image();
    img.src = "picture/blur.jpg";
    var radius = 50;
    var leftMargin = 0,topMargin = 0;
    img.onload = function(){
    //初始化父容器的宽高使窗口与canvas宽高相同
    $("#content").css({"width":canvas.width + "px","height":canvas.height + "px"});

    //模糊图片与canva中绘制的图片(隐藏的清楚图片)宽高相同,别忘加px,否则计算出来的只是个值,不带px
    $("#blur").css("width",img.width + "px");
    $("#blur").css("height",img.height + "px");

    //左边距:(图片宽高 - canvas宽高) / 2;等于一边的边距宽高
    leftMargin = (img.width - canvas.width)/2;
    topMargin = (img.height - canvas.height)/2;

    //模糊图片的上边距与左边距
    $("#blur").css("top", String(-topMargin) + "px");
    $("#blur").css("left", String(-leftMargin) + "px");
    initCanvas();
    }
    function initCanvas(){
    var theleft = leftMargin < 0 ? -leftMargin : 0;
    var thetop = topMargin < 0 ? -topMargin : 0;
    //创建圆
    region = {x:Math.random() * (canvas.width-2 * radius - 2 * theleft) + radius + theleft,
    y:Math.random() * (canvas.height-2 * radius - 2 * thetop) + radius + thetop, r : radius};
    draw(img,region);
    }
    function draw(img){
    ctx.clearRect(0,0,canvas.width,canvas.height);
    ctx.save();
    setRegion(region);
    /*绘制清楚图片,如leftMargin<0那么取0,
    图片宽度与canvas宽度哪个最小取哪个值*/

    ctx.drawImage(img, Math.max(leftMargin,0), Math.max(topMargin,0),
    Math.min(canvas.width,img.width), Math.min(canvas.height,img.height),
    leftMargin < 0 ? -leftMargin : 0, topMargin < 0 ? -topMargin : 0,
    Math.min(canvas.width,img.width),Math.min(canvas.height,img.height));

    ctx.restore();
    }
    function setRegion(region){
    ctx.beginPath();
    ctx.arc(region.x,region.y,region.r,0,Math.PI * 2,false);
    //进行裁减圆
    ctx.clip();
    }
    function reset(){
    initCanvas();
    }
    function show(){
    var animation = setInterval(function(){
    region.r += 20;
    if(region.r > Math.max(canvas.width,canvas.height)){
    clearInterval(animation);
    }
    draw(img,region);
    },30);
    }
    </script>
     
      实现的效果如图: CSS3毛玻璃实现微信发红包看照片   应用此代码需要注意的要点有:   1.h5头部别忘引入viewport

    <meta name=”viewport” content=”init-scale=1,user-scalable=0,minimum-scale=1.0,maximum-scale=1.0,width=device-width”>
     
      2.实现此效果还需要引入jquery.min.js文件。   3.filter : blur CSS3默认的滤镜模糊效果。   4.canvas绘制图片,drawImage();   5.canvas arc(); 用canvas绘制圆形;   6.canvas clip(); 剪切区域;   7.setinterval(); clearInterval();

  1. 预 览
  2. 下 载
下载说明: 1、解压密码:yudouyudou 2、只有部分模板会提供多页面下载,未加说明都是只有一个首页index.html模板。 3、如果您发现模板或软件有错,或者您有其他更好的意见、建议请给我留言,我会及时处理! 4、如果您遇到什么问题,也可加余斗QQ 548474762 咨询! * 受百度影响,部分网盘资源可能失效,如果您发现资源失效了,请及时留言或联系余斗 * * 下载本站模板以及软件仅供学习研究之用,若发现任何组织机构及个人有用于商业目的者,必追究其法律责任 *
关键字词css3 毛玻璃特效
余斗余斗
  1. 转载请注明: CSS3毛玻璃实现微信发红包看照片_余斗余斗_鸿运国际手机登录首页
  2. 版权声明: 本站原创文章,由 发表在 Html5模版 分类下,于2016-03-06最后更新
推荐一个网页加载后图片翻转效果的CSS3代码
一款HTML5/CSS3悬浮菜单源码推荐(可自定义小图标)
手机扫一扫 随身带着看
鸿运国际手机登录首页