css实现缕空遮罩层
2019-05-13 14:18
1956 查看
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/wanshaobo888/article/details/90172651
最新更新时间:2019年05月13日13:41:01
《猛戳-查看我的博客地图-总有你意想不到的惊喜》
本文内容:页面镂空遮罩层、页面镂空遮罩引导层、图片镂空遮罩
常规遮罩层
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"> <title>Title</title> <style> .mask{ position: absolute; width: 100%; height: 100%; top: 0; left: 0; background: rgba(0,0,0,0.4); display: flex; justify-content: center; align-items: center; z-index: 3; } .mask{ position:fixed; top : 0; left : 0; bottom : 0; right : 0; background:rgba(0,0,0,.5); /*background:hsla(0,100%,80%,0.5)*/ /*background:#000; opacity:0.5; */ } //模糊效果 毛玻璃效果 .blur{ -webkit-filter: blur(5px); /* Chrome, Opera */ -moz-filter: blur(5px); -ms-filter: blur(5px); filter: blur(5px); } </style> </head> <style> </style> <body> <div class='mask'></div> </body> </html>
镂空遮罩层效果如图
使用box-shadow实现镂空遮罩引导层效果
优点:
- 圆角轻松实现;
- box-shadow 不会影响元素位置,定位只需要根据 content 的位置写。
缺点:阴影可视区域无法触发click事件,因此,当点击蒙层任意区域,无法隐藏。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"> <title>Title</title> <style> .guide{ position: absolute; z-index: 2; top: 0px; left: 50%; transform: translateX(-50%); width: 50px; height: 50px; border-radius: 50px; border: 3px solid #2353FA; box-shadow: 0px 0px 0px 1000px rgba(0,0,0,.75); box-sizing: border-box; } </style> </head> <style> </style> <body> <div class='guide'></div> </body> </html>
使用border实现镂空遮罩引导层效果
缺点:代码量大
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"> <title>Title</title> <style> .guide{ position: absolute; z-index: 2; .opacityEle{ border: 700px solid rgba(0,0,0,0.75); width: 50px; height: 50px; position: relative; top: -700px; left: -538px; border-radius: 50%; .ele{ width: 50px; height: 50px; border: 3px solid #0B6EFF; border-radius: 25px; box-sizing: border-box; } } } </style> </head> <style> </style> <body> <div class='guide'> <div class='opacityEle'> <div class='ele'></div> </div> </div> </body> </html>
参考资料
- 无
感谢阅读,欢迎评论^-^
打赏我吧^-^
相关文章推荐
- div非弹出框半透明遮罩实现全屏幕遮盖css实现
- CSS实现 全屏 遮罩
- JS+CSS简单实现DIV遮罩层显示隐藏
- JS+CSS简单实现DIV遮罩层显示隐藏
- html+css源码之实现登录弹出框遮罩层效果
- 微信小程序 利用css实现遮罩效果实例详解
- jQuery,CSS实现的遮罩层消息显示
- 兼容主流浏览器的jQuery+CSS 实现遮罩层的简单代码
- JS+CSS简单实现DIV遮罩层显示隐藏
- html+css源码之实现登录弹出框遮罩层效果
- 纯CSS和Javascript实现的遮罩层
- css实现鼠标移上图片遮罩效果
- 兼容主流浏览器的jQuery+CSS 实现遮罩层的简单代码
- JS+CSS简单实现DIV遮罩层显示隐藏
- css实现遮罩层(解决透明背景上的文字不透明)
- DIV遮罩层如何实现_Div+CSS教程_CSS_网页制作
- div+css实现图片底部透明遮罩文字标题
- Jquery+CSS实现遮罩效果
- 用CSS遮罩实现过渡效果
- css+js实现一个弹出层,完成注册功能 带有遮罩层,比较简单