应用CSS3滤镜的filter:blur特性制做毛玻璃模糊不清

日期:2020-12-12 类型:科技新闻 

关键词:如何制作微信小程序,微信小程序源码,小程序码生成,凡科网微信小程序,微信公众号小程序

今日在应用icloud的情况下看到iPhoneicloud官方网站的毛玻璃实际效果十分赞,细心科学研究了1下它的完成方法,是应用js相互配合background-image: -webkit-canvas的方式绘图出的毛玻璃情况照片。
但是今日又细心科学研究了1下css3中的blur方式,能够完成一样的实际效果。且相互配合JS能够完成模糊不清放缩的实际效果

基本
先看来1下blur特性的表述式:

CSS Code拷贝內容到剪贴板
  1. filter:blur(add=add,direction,strength=strength)  

大家看到blur特性有3个主要参数:add、direction、strength。
Add主要参数有两个主要参数值:true和false。意思是特定照片是不是被更改成模糊不清实际效果。    

Direction主要参数用来设定模糊不清的方位。模糊不清实际效果是依照顺时针方位开展的。在其中0度意味着竖直向上,每45度1个企业,默认设置值是向左的270度。角度方位的对应关联见下表:

案例
CSS编码

CSS Code拷贝內容到剪贴板
  1. .blur {    
  2.     filter: url(blur.svg#blur); /* FireFox, Chrome, Opera */  
  3.        
  4.     -webkit-filter: blur(10px); /* Chrome, Opera */  
  5.        -moz-filter: blur(10px);   
  6.         -ms-filter: blur(10px);       
  7.             filter: blur(10px);   
  8.        
  9.     filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius=10, MakeShadow=false); /* IE6~IE9 */  
  10. }  

HTML一部分

XML/HTML Code拷贝內容到剪贴板
  1. <img src="mm1.jpg" class="blur" />  

在其中blur(10px)中的尺寸决策了模糊不清后的照片尺寸和模糊不清水平