css 遮照镂空效果
2024-08-26 21:54:38
实现这个效果有以下几种方式。(欢迎指出不足之处!!!)
一:最简单最粗暴的方法!截图!
实现原理:先截一张图片,然后写一个遮罩层,再把图片放上去就可以了!
过程过于简单,就别写代码跟截图效果了!
优点:简单方便,适合各种页面。并且兼容性极好。
缺点:图片浪费项目空间。并且需要每次都压缩一下,有些麻烦。
二:利用css3的阴影效果。
效果:
代码如下:
<div class="mask"></div>
.mask {
position: absolute;
top: 350px;
right: 244px;
width: 155px;
height: 80px;
filter: blur(15px);
border-radius: 60px;
box-shadow: 0 0 0 2000px rgba(0,0,0,.6);
}
实现原理:利用阴影覆盖,就可以实现其镂空效果
优点:不受页面限制,实现方便。在不考虑IE9以下的情况下完美的选择
缺点:由于 是使用了css3的阴影特效。所以只兼容IE9以及以上的浏览器,而且,在其阴影部分。可以点击到下面的元素,也就是无法屏蔽其他点击效果。
解决方法:可以考虑将其写在一个遮照层上面。
三:利用css的边框属性
实现效果同阴影
<div class="class3"></div> .class3{
position: absolute;width:170px;height:190px;top: ;left: ;
border-left-width:208px;border-left-style: solid;border-left-color:rgba(,,,.);
border-right-width:970px;border-right-style: solid;border-right-color:rgba(,,,.);
border-top-width:260px;border-top-style: solid;border-top-color:rgba(,,,.);
border-bottom-width:253px;border-bottom-style: solid;border-bottom-color:rgba(,,,.);
}
实现原理:利用边框属性铺满整个屏幕
优点:实现方便,兼容性好,可以兼容到IE6、IE7;适合任何页面,不会受页面的限制。
缺点:需要做兼容,并且实现过程比较复杂,要考虑到的元素也多
四:最麻烦的一个,利用canvas的绘图功能
效果一:
具体多种实现效果参考 : https://juejin.im/post/5c1da8bc6fb9a049c2326a55
优点:可以同时镂空很多个。
缺点:实现过程复杂。兼容性也不好
五:遮罩层加box
效果:
<div class="box1" style="background: #333;"></div>
<div class="hole"></div> .hole {
width: 160px;
height: 160px;
position: relative;
background: blue;
border-radius: 100px;
top: 100px;
left: 100px;
opacity: .;
} .box1{
height:%;width:%;
border: 1px solid green;
position:fixed;
opacity: .;
}
原理:在一层蒙板上面加一个盒子就可以了,最经常使用的应该就是这个了
优点:兼容性完美。实现简单,
缺点:暂无
PS:以上代码只是为了实例。一些没完全修改成需要效果,请自行修改!
最新文章
- ASP.NET Identity 简介
- NOI 题库 7084
- 第三章Git使用入门--读书笔记
- 1036. Crypto Columns 2016 11 02
- 十分钟搞定CSS选择器
- PL/SQL连接配置
- Python开发程序:FTP程序
- Fast and Robust Hand Tracking Using Detection-Guided Optimization
- android学习日记03--常用控件ListView
- 3.3. 轻量级的迁移方式(Core Data 应用程序实践指南)
- css3动画transition详解2
- CMCC验证绕过POC
- python常用脚本以及问题跟踪
- ROS中打开单目摄像头
- px em rem 区别
- 如何将字符串转化为Jsoup的Document 对象
- RavenDb学习(三)静态索引
- Bugly最简单的配置方法
- CentOS7 Could not retrieve mirrorlist http://mirrorlist.centos.org/?...
- Jackson实现Object对象与Json字符串的互转
热门文章
- 教你用3ds max制作多边形小狗建模
- leetcode525. 连续数组 python
- Codeforces Round #468 (Div. 2 )D. Peculiar apple-tree_BFS
- loging模块
- 12、Camel: Content-Aware and Meta-path Augmented Metric Learning for Author Identification----作者识别
- linux文件与用户和群组
- Android ToolBar 的简单封装
- 确保 Xcode 每次 Build 时都自己主动更新资源
- hdu5033 Building 单调队列
- Creating new web parts kentico 10