html遮罩效果mask,H5案例分享:特殊形状图片之遮罩蒙版CSS3-Mask效果
特殊形状图片之遮罩蒙版CSS3-Mask效果
小五最近做的项目,需要一个小效果,就是获取用户头像以心形的形状展现在页面上,开始小五想的实现方式是canvas画图或CSS3的clip(剪切),发现都不理想,和设计稿里的图形美观度相差太大,而且实现起来太麻烦,后来,小五采用了一个CSS3的新增属性完美的解决了这个问题,今天就来和大家分享一下。
首先来解释一下遮罩、蒙版:和PS中的蒙版、Flash中的遮罩层很类似
遮罩:为了得到特殊的显示效果,可以在遮罩层上创建一个任意形状的“视窗”,遮罩层下方的对象可以通过该“视窗”显示出来,而“视窗”之外的对象将不会显示。mask便是创建这样一个遮罩层。
一、Mask 的兼容性
以下是来自 caniuse 的统计:
ie/edge 全面不支持,Android 和 iOS Safari 阵营几乎全线飘浅绿,意味着支持部分功能 。不过,Android 4.0 及以下版本的对 mask 的兼容性并不友好!多亏了近几年智能手机市场的良性竞争,给移动前端制造了一个相对良好的环境,经小五亲测,主流机型基本上都支持这个属性了。
二、Mask 的原理
蒙板可以是 CSS3 渐变或者半透明的PNG图片,蒙板元素的alpha值为0的时候会覆盖下面的元素,为1的时候会完全显示下面的内容。如下:
三、mask 的属性
-webkit-mask-image:url | gradient /*可以使用图片或渐变作为遮罩层*/
-webkit-mask-repeat:repeat | repeat-x | repeat-y | no-repeat
-webkit-mask-position:x y;
-webkit-mask-clip:border | padding | content
-webkit-mask-origin:border | padding | content
PS:mask 的语法与 background 是相仿的。
四、实战
原素材:
① 心形图片实现
HTML:
CSS:
img{
position: absolute;
width: 300px;
height: 256px;
left: 50%;
top: 50%;
margin-left: -150px;
margin-top: -128px;
-webkit-mask-image:url(images/mask1.png);
}
DEMO演示
② 渐变图片实现
HTML:
CSS:
img{
position: absolute;
width: 300px;
height: 256px;
left: 50%;
top: 50%;
margin-left: -150px;
margin-top: -128px;
-webkit-mask-image:url(images/mask2.png);
}
DEMO演示
或者是将渐变以代码的形式进行设置
img{
position: absolute;
width: 300px;
height: 256px;
left: 50%;
top: 50%;
margin-left: -150px;
margin-top: -128px;
-webkit-mask-image:-webkit-gradient(linear,left top,left bottom,from(rgba(0,0,0,1)),to(rgba(0,0,0,0)));
}
效果呈现:
DEMO演示
好啦,至此CSS3遮罩蒙版效果讲完了,想生成多姿多彩图案的小伙伴快快试试吧~~~
html遮罩效果mask,H5案例分享:特殊形状图片之遮罩蒙版CSS3-Mask效果相关推荐
- 特殊形状图片之遮罩蒙版CSS3-Mask效果
前不久做了一个项目,需要一个小效果,就是获取用户头像以心形的形状展现在页面上,开始小五想的实现方式是canvas画图或CSS3的clip(剪切),发现都不理想,和设计稿里的图形美观度相差太大,而且实现 ...
- H5案例分享—你的数学是语文老师教的吗?
教育类H5游戏已经被广泛应用,很多教育软件都采用H5游戏形式向玩家传递知识,金豆微游戏为大家倾情奉献H5数学游戏,测一测你的数学能力有多高,众多的数学算术题,你能答对几题呢,赶紧来挑战一下吧! 游戏需 ...
- html5源码 母亲节,母亲节H5:非常有创意的5款母亲节H5案例分享
节日类 有些事情是无法用言语表达的,就比如对母亲的爱,我相信很少有人会经常对母亲说:我爱你,这也是因为国人太过于腼腆的原因.既然没办法用言语来表示对母亲的爱,或许下面这些母亲节H5案例是一个不错的表达 ...
- h5在线制作平台h5案例分享
随着各行各业恢复生产,以餐饮,影视,电商为首的行业,依然有着迫切的推广营销需求. TOM游戏定制平台为大家罗列了本年度为各行各业的代表型H5小游戏案例! [如何减少等位流失] 有些商家,特别是餐饮行业 ...
- H5案例分享-H5游戏跳跃类玩法分享
又到了每周一次的精品游戏分享时间!这是一款TOM游戏出品的html5实现的跳跃过关类小游戏.小编发现最近朋友圈很多人都在玩儿跳跃类h5游戏,天空熊猫.粽子哪里跑.跳跳犬等小游戏,为什么跳跃类游戏如此受 ...
- H5案例分享:移动端滑屏 touch事件
移动端滑屏 touch事件 移动端触屏滑动的效果的效果在电子设备上已经被应用的越来越广泛,类似于PC端的图片轮播,但是在移动设备上,要实现这种轮播的效果,就需要用到核心的touch事件.处理touch ...
- H5案例分享:微信视频播放全屏问题
2019独角兽企业重金招聘Python工程师标准>>> 微信视频播放全屏问题 在ios和安卓手机里的微信下播放视频时,会遇到不少问题,例如需要手动点击,视频才会播放,并且视频会跳出微 ...
- H5案例分享:jquery.qrcode.js生成简易二维码
近期做项目需要生成二维码,并且解码获取信息,jquery.qrcode.js生成二维码比较的方便,写个教程分享给大家.欢迎大家测试留言,我会改进代码. 现在二维码越来越流行啦,支付扫二维码,关注扫二维 ...
- H5案例分享:html5移动开发细微之美
html5移动开发细微之美 1.H5页面窗口自动调整到设备宽度,并禁止用户缩放页面 <meta name="viewport" content="width=dev ...
最新文章
- 时隔16年,Science再次发布“全世界最前沿的125个科学问题”!
- 【如何利用idea提交本地代码到git远程仓库,史上最详细教程,建议收藏!】
- java文本区显示在右边_怎么让文本区从右边开始显示文本
- JSP页面中使用超链接进行传输参数(参数是一个本地磁盘链接)问题
- pythonjson构建二维数组_python后台获取ajax传递的二维数组,保持原有数据结构不变...
- 计算机网络技术期末考试复习总结
- php中未定义的变量使用技巧
- Android Studio(9)--添加应用资源
- Myeclipse学习总结(16)——MyEclipse CI 2018.8.0首次更新,全新来袭!(内附破解激活文件,亲测破解100%)
- IBM Machine Learning学习笔记(二)——Supervised Learning: Regression
- python处理中文编码问题总结
- Python 建模步骤
- 把我的漫画浏览器后台程序迁移到GAE上了
- 即刻搜索消失中:产品跳转关停 总部迁址
- 富士通打印机调整位置_针式打印机怎么设置打印的位置?
- php guzzle并发,使用Guzzle并发请求接口
- Git在同一台电脑上连接多个仓库
- python 批量处理图片
- SCSI子系统基础学习笔记 (之UFS子系统) - 1.2 概述(软件部分)
- [DAY003]考研数学极限的计算知识点与题目总结(三)
热门文章
- amx-104 r-java_AMX-104 R·贾贾
- android 设备指纹,浅谈Android 指纹解锁技术
- 如何在windows下运用dd来下修复坏块?
- 火影手游 所有忍者 奥义 台词
- 牛逼哄哄的数据库连接池,底层原理是个啥?
- Bluetooth core 5.0 ---------- BR/EDR 安全简单配对(BR/EDR secure simple pairing)
- 第八章JRT/0197-2020金融数据安全数据安全分级指南解读
- unity获取android内存大小,使用SystemInfo类获取Unity3D运行设备的各类信息(CPU类型,显卡类型等)...
- 2022CCPC网络预选赛c题Problem C. Guess
- 2021ICPC网络预选赛 M题