CSS3实现毛玻璃(图片模糊)效果
**首先看效果**
**引入下题**
HTML:
<img id="blur" src="img/back.jpg">
CSS3:
#blur{ filter:blur(10px); -webkit-filter:blur(10px); -moz-filter:blur(10px); -ms-filter:blur(10px); -o-filter:blur(10px); }
**看个复杂点的例子**
查看演示
结合CSS3毛玻璃实现微信版的发红包看完整照片效果。可以完美的兼容移动端与PC端。代码如下:
html:
<div id="content"> <!--模糊图片--> <img id="blur" src="img/4.jpg"> <!--使用canvas绘制图片--> <canvas id="canvas"></canvas> <a href="javascript:reset()" rel="external nofollow" class="button" id="button-reset">reset</a> <a href="javascript:show()" rel="external nofollow" class="button" id="button-show">show</a> </div>
css3:
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}
javascript:
var canWidth = window.innerWidth-20; var canHeight = window.innerHeight-20;var canvas=document.getElementById("canvas"); var ctx = canvas.getContext("2d"); canvas.width = canWidth; canvas.height = canHeight; var img = new Image(); img.src = "img/4.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); }
查看演示
知识点:
- h5头部别忘引入viewport:
<meta name=”viewport” content=”init-scale=1,user-scalable=0,minimum-scale=1.0,maximum-scale=1.0,width=device-width”> - filter : blur CSS3默认的滤镜模糊效果。
- canvas绘制图片,drawImage();
- canvas arc(); 用canvas绘制圆形;
- canvas clip(); 剪切区域;
- setinterval(); 与 clearInterval();
CSS3实现毛玻璃(图片模糊)效果相关推荐
- html中怎样制作图片滚动,CSS3 制作的图片滚动效果
实现效果 实现代码 html CSS3 @keyframes slidy { 0% { left: 0%; } 20% { left: 0%; } 25% { left: -100%; } 45% { ...
- CSS3配合JavaScript图片爆炸效果
CSS3配合JavaScript实现图片爆炸效果 先看看效果图: 代码如下: boom.html <!DOCTYPE html> <html lang="en"& ...
- 使用 CSS3 实现 3D 图片滑块效果
Slicebox – A fresh 3D image slider with graceful fallback 英文原文地址:http://tympanus.NET/codrops/2011/09 ...
- html图片爆炸效果,利用CSS3制作3D图片爆炸效果
利用css3 transform和transition样式制作点击图片时 图片爆炸开并切换到下一张图片依次循环 首先先看一下效果图 Paste_Image.png 先描述一下大概思路: 布局时外面有一 ...
- 纯CSS3实现GIF图片动画效果
在线演示 本地下载
- css3加载图片淡入效果
代码如下: <!DOCTYPE html> <html> <head><title></title><meta charset=&qu ...
- css3鼠标悬停图片抖动效果
提供一个参考的链接 http://demo.lanrenzhijia.com/2015/pic0113/ 转载于:https://www.cnblogs.com/w1991/p/7054131.htm ...
- CSS3 实现六边形图片展示效果
代码片 下面展示一些 内联代码片. // html <div class="boxF"><div class="boxS"><di ...
- php 毛玻璃,CSS3实现毛玻璃(图片模糊)效果
摘要:CSS3实现毛玻璃(图片模糊)效果.. **首先看效果** **引入下题** HTML: CSS3:#blur{ filter:blur(10px); -webkit-filter:blur(1 ...
- github unity 图片切换效果_CSS3图片模糊切换效果
今天我们来分享一款利用CSS3技术让图片模糊的效果,我们只需要将鼠标滑过图片,就可以让图片产生模糊的特效,利用CSS3实现图片模糊效果也非常简单,用CSS3中的filter属性即可,针对不同浏览器用- ...
最新文章
- 【Android 逆向】Android 进程注入工具开发 ( 远程进程注入动态库文件操作 | 注入动态库 加载 业务动态库 | 业务动态库启动 | pthread_create 线程开发 )
- 《linux就该这么学》第六节,计划任务和用户身份管理!
- 淘宝弹性布局方案lib-flexible实践
- 诗与远方:无题(七十三)
- bootloader功能介绍/时钟初始化设置/串口工作原理/内存工作原理/NandFlash工作原理...
- tablesorter,jquery
- 北京网信金服PHP薪资_【企航金服工资|企航金服待遇怎么样】-看准网
- 备忘:BLOCK CORRUPTION IN SYSTEM DATAFILE
- 解决 微信小程序 滚动 事件穿透 问题
- springboot实现支付宝支付功能
- 修改阿拉伯语等语言下的数字显示
- python画图分析问卷(含多选题)
- Bresenham快速画直线算法
- android google 登录登出接入
- DXP_protel2004_原理图设计基础_集成运放原理图设计学习
- OPPO 全球首发 Android 13 正式版,适配率超 96%!
- poj 3728 The merchant// lca(倍增实现) + dp || tarjan+并查集路径上dp
- 使用python对tushare中证500的数据进行股票评价。
- Java+Selenium爬取JavaScript返回的网页数据
- 3D数字化与3D打印:用“虚拟”再造“现实”