浅谈图片蒙版效果-webkit-mask
会用PS的童鞋一定知道“蒙版”的概念,它可以在图片上实现一定的遮罩效果,当然这里我们不介绍ps里的蒙版,而是介绍利用CSS3的新属性-webkit-mask来实现网页中的图片遮罩效果。
大家对-webkit-mask这一属性可能不太熟悉,或许有很多人都是第一次见到,没错,这一属性也是还未被众多浏览器所支持的CSS属性,目前支持这一属性的仅有-webkit-前缀的谷歌及safari浏览器,但是相信在不久的未来这一属性将被其他主流浏览器所支持,下面我们来一睹为快。
首先介绍一下它的属性值,可以有两种写法(图片蒙版、渐变蒙版):
一、图片蒙版
.demo1 {
background : url("images/logo.png") no-repeat;
-webkit-mask : url("images/mask.png");
}
它的属性值与background的语法基本一样,相关的属性有webkit-mask-clip、 webkit-mask-position 和webkit-mask-repeat等。
下面就是其实现的效果图:
这里需要注意的是第二张mask.png中黑色部分的透明度(alpha)值为1,将完全显示其下方的图片区域,而其余部分的透明度为0(alpha值),将完全覆盖其下方的图片区域。
二、渐变蒙版
.demo1 {
background : url("images/logo.png") no-repeat;
-webkit-mask : -webkit-gradient(linear, left top, right bottom, from(rgba(0,0,0,1)), to(rgba(0,0,0,0)));
}
其属性值为CSS渐变老式语法:-webkit-gradient(<type>, <point> [, <radius>]?, <point> [, <radius>]? [, <stop>]*)
而新式语法:-webkit-linear-gradient( [<point> || <angle>,]? <stop>, <stop> [, <stop>]* ) 经过我的测试发现暂不支持
效果图如下:
三、logo遮罩动态效果
利用-webkit-mask我们还可以制作炫酷的logo遮罩动画效果,用js控制让蒙版动起来。效果图如下:
实现代码如下:
$(function(){
$(".mask").mouseover(function(){
var b=0,c=$(this),
d=setInterval(function(){
if(b>parseInt(c.width()+50)){clearInterval(d);}
c.css({"-webkit-mask":"-webkit-gradient(radial, 88 53,"+b+", 88 53, "+(b+15)+", from(rgba(255, 255, 255,1)), color-stop(0.5,rgba(255, 255, 255, 0.2)), to(rgba(255, 255, 255,1)))"});
b++;
},0);
});
});
通过setInterval来对遮罩层渐变位置进行动态变化。
我们还可以改变渐变的起点和终点位置来实现不同的效果:
-webkit-gradient(radial, 0 0,"+b+", 0 0, "+(b+15)+", from(rgba(255, 255, 255,1)), color-stop(0.5,rgba(255, 255, 255, 0.2)), to(rgba(255, 255, 255,1)))
好了,是不是很炫酷?
但是除了webkit的浏览器外其他浏览器不支持哦,如果对浏览器兼容性要求很高的话慎用,但是本着渐进增强的意识,有总比没有好对吧,看不到也无所谓对吧。
over~欢迎评论。
浅谈图片蒙版效果-webkit-mask的更多相关文章
- 浅谈css蒙版效果
我们进网站浏览时经常看到当鼠标悬浮在图片上或者某一个地方时,会出现一层朦胧现象覆盖着悬浮位置,简单的理解为“蒙版效果”.下面简单列举实现过程: HTML: CSS:
- 浅谈关于QT中Webkit内核浏览器
关于QT中Webkit内核浏览器是本文要介绍的内容,主要是来学习QT中webkit中浏览器的使用.提起WebKit,大家自然而然地想到浏览器.作为浏览器内部的主要构件,WebKit的主要工作是渲染.给 ...
- 不遮挡人物弹幕是怎么实现的——图片蒙版效果-webkit-mask
这是一个实验中的功能,用于设置元素上遮罩层的图像. 一.Values none:默认值,透明的黑色图像层,也就是没有遮罩层. <mask-source>:<mask>或CSS图 ...
- 浅谈TextView Ellipsize效果与Marquee跑马灯无效果问题
说到TextView 效果,相信大家一定熟悉跑马灯. 先来看看 Ellipsize是什么,Ellipsize 从开发技术上翻译为省略效果.故名思议,就是当文本无法显示全部时,用什么效果来显示未显示的部 ...
- 浅谈DrawerLayout(抽屉效果)
DrawerLayout是V4包下提供的一种左滑右滑抽屉布局效果. 实现效果如下: 因为是官方提供的,所以使用起来也相对的比较简单. DrawerLayout 提供 1.当界面弹出的时候,主要内容区会 ...
- 浅谈实现placeholder效果的几种方案
placeholder是html5<input>的一个属性,它提供可描述输入字段预期值的提示信息(hint), 该提示会在输入字段为空时显示.高端浏览器支持此属性(ie10/11在获得焦点 ...
- 浅谈RecyclerView(完美替代ListView,GridView)
Android RecyclerView 是Android5.0推出来的,导入support-v7包即可使用. 个人体验来说,RecyclerView绝对是一款功能强大的控件. 首先总结下Recycl ...
- 浅谈FloatingActionButton(悬浮按钮)
一.介绍 这个类是继承自ImageView的,所以对于这个控件我们可以使用ImageView的所有属性 android.support.design.widget.FloatingActionButt ...
- 浅谈TabLayout(ViewPager+Tab联动)
google发布了的Android Support Design库中提供了TabLayout 通过TabLayout+ViewPager实现导航栏效果,点击Tab ,ViewPager跟随变化,滑动V ...
随机推荐
- 将asp.net webapi的运行时版本由4.0升级到4.5.1时遇到的问题及解决
更新package 更改.net运行时的版本之后,出现了错误提示,说需要改新以下组件: EntityFramework, EntityFramework.zh-Hans, Microsoft.AspN ...
- React学习笔记---项目构建
简介 ReactJs由于有FB的支持,得到了社区的极大关注,同时由于ReactJs只希望专一的做好View层次上的工作,所以本身并没有涉及很多周边工具. 今天要介绍一款工具,同时包含一个构建项目模板的 ...
- 【Win10】UAP/UWP/通用 开发之 RelativePanel
[Some information relates to pre-released product which may be substantially modified before it's co ...
- SQL SERVER 内存学习系列(一)
最近帮客户解决发布订阅的问题时,突然遇到这样一个问题发布订阅中报下面的错误,另外执行alter table 操作时也会报错 : 问题很奇怪发布订阅和CLR有什么关系?memtoleave内存是个啥?回 ...
- 扒皮下GitHub 404的图片层次轴动特效
今天要克隆的前端特效非常有意思,可以参见GitHub404页面 https://github.com/vajoy/master/index.html 记得之前华为在站酷发布EMUI设计大赛的主页也用了 ...
- JavaScript函数柯里化
函数式 JavaScript是以函数为一等公民的函数式语言.函数在JavaScript中也是一个对象(继承制Function),函数也可以作为参数传递成函数变量.最近几年函数式也因为其无副作用的特性. ...
- 【面试必备】CSS盒模型的点点滴滴
从接触CSS布局开始,就一直在听盒模型的概念了,网上的文章有很多,深浅不一.有些人会认为盒模型很简单,不就是border.margin.padding.content嘛,一个元素所占的空间就是把它们都 ...
- hash_map的简洁实现
hash_map的简洁实现 hash_map是经常被使用的一种数据结构,而其实现方式也是多种多样.如果要求我们使用尽可能简单的方式实现hash_map,具体该如何做呢? 我们知道hash_map最 ...
- [ZigBee] 9、ZigBee之AD剖析——AD采集CC2530温度串口显示
1.ADC 简介 ADC 支持多达14 位的模拟数字转换,具有多达12 位有效数字位.它包括一个模拟多路转换器,具有多达8 个各自可配置的通道:以及一个参考电压发生器.转换结果通过DMA 写入存储器. ...
- 获取IOS应用的子目录
在开发IOS应用时,我们经常需要将素材分类,并放入相应地子目录中. 在开发代码时,需要访问这些素材时,就需要获取对应的子目录路径.那么如何获取呢? 获取应用路径 首先,要找到应用所在的路径. NSSt ...