JS CSS3做出酷炫的弹出效果

时间：2021-09-12 来源：互联网编辑：宝哥软件园浏览：次

昨天在家看电视的时候，发现一个退出时弹出的效果。整个背景很模糊。我觉得这种效果太刺眼了，比纯色和透明度都要高很多。我连续尝试了几个界面，最终确定效果是靠css实现的。所以今天一大早就来公司了，很快就搜到了。虽然兼容性很差，但是css属性是可以修复的。瞬间觉得自己知道的太少了~ ~

首先回忆一下弹窗的实现。一般我们分为两层，分别是弹出层和蒙版层。通常我习惯把这两个要素都设置为固定定位，可以和绝对区分。对于蒙版层，我们不需要太多，所以我们把它的属性设置如下，让它覆盖整个屏幕。mask { position:fixedtop:0pxbottom:0pxleft:0pxright:0px背景色： # 000；opacity:0.6滤镜： alpha(不透明度=60)} Popus图层有点麻烦，这里我们有两种实现方法

1.已知大小的弹出窗口主要通过上、左、负边距实现，如下。popus { width:300px高度：200 px；位置：固定；左侧：50%；top :50%；边距-left :-150 px；边距-top :-100px；背景-颜色：#000} 2。如果弹出窗口大小未知，通过js获取弹出窗口图层的宽度和高度，然后进行上述设置，这里不再赘述。

3.当支持css3时，我们可以在不知道弹出窗口的宽度和高度的情况下设置以下设置。popus { position:fixed左侧：50%；top :50%；Transform:translate (-50%，-50%)}主要是通过translate属性设置的，偏移量的取值百分比是相对于自身的宽度和高度的，所以原理上和第一种写法类似，但是使用起来更方便。

言归正传，回到正题，就是让元素在ps中达到高斯模糊的效果。

这里有一个css属性：过滤器。注意这里的过滤器不是ie中的过滤器。filter的值有很多，感兴趣的可以点击这里。作者非常详细。我们今天只谈一个侠影，先看看下面的预告

目前ps:只支持webkit浏览器，所以我们直接使用css3属性，效果需要在webkit浏览器中查看。

是不是很神奇？起作用的代码就是这一行-webkit-filter:blur(8px)，其后面的像素值代表模糊程度。当然，在日常项目中，我们也可以添加一些动画，让页面更加生动。此案例的完整代码如下：

div class=' BG ' img src=' BG . jpg '/div class=' popus '效果比纯色加透明度好吗？div div class='left btn '真的很好div div class=' rightbtn '就是这样/div /div/divcss:

* { padding:0px余量：0 px } img {宽度：100%；margin:0px汽车；display : block } . BG . blur {-web kit-filter : blur(8px)}。popus { width:400pxcolor: # 000；位置：固定；top :50%；左侧：50%；-web kit-transform : translate(-50%，-50%)；Font-family: '微软雅黑'；padding:20px 0pxfont-weight : bold；背景-color:rgba(255，255，255，0.6)；border-radius :18 px；文本对齐：居中；padding:30px 0pxbox-shadow :0 px 0px 10px rgba(0，0，0，0.4)；display:none}。popus div { width:220pxmargin:10px auto }。popus div . BTN { width :80 px；padding:5px 10pxcolor:#000}。左{ float:leftborder:1px固体#000}。popus div . BTN . right { float : right；color:#666}js:

$('.BG’)。on('click '，function(){ console . log(98)$(this)。add CLaSS(' blur ')；$('.popus’)。show()；})$('.BTN’)。on('click '，function(){ $(')。BG’)。removeClass('模糊')；$('.popus’)。hide()；})这样就完了吗？显然不是。看控制台