css mask, WebKit Image Wipes
2013-09-30 00:01
525 查看
http://css-tricks.com/webkit-image-wipes/
It's not "spec," but WebKit browsers support image masks. If you are familiar with Photoshop, they work like that. You declare an image to use as as mask. The black parts of that image hide what it is over, white parts of that image show
what is underneath, gray is partially transparent. So if you had this image:
And you had this image you created as a mask:
You'd apply it to the image in CSS like:
And this would be the result:
The first trick we're going to utilize here is that the image we delcare for the
need to be an actual graphic image. Instead we can use -
make an image that is a gradient as well, but creating the gradient mask programmatically means that it's far easier to adjust on the fly and requires one less HTTP request.
In the above CSS, we've created a 200px by 200px image which fades from fully opaque in the top left and fading and about half-way point at a 45deg angle, fades to fully transparent. That would look a little something like this:
Notice we set the position of the mask with -
position, we can move the position. We could move it on a
Or we could use a
I'm sure all you smarties have already put all this together. The idea is that we have one image on top of another image. The image on top gets the mask, and then we move the mask as needed.
In the download, there is another example where the wipe goes horizontally instead of at an angle, and happens using -webkit-transition rather than animation on a hover event.
View
Demo Download
Files
I spent more time than I probably should have trying to see if I could get the animation to wipe three images in succession. It's kind of possible but I wasn't able to get it smooth and consistent as I would have liked, so I scrapped it. I'm still fairly sure
it's possible, probably using two different animations with different delays or the like. If you try it and get it worked, do show!
Check out the announcement from 2008 for more information about the masks themselves. There are useful bits to know in there, like the mask
images can stretch (like full page backgrounds) and repeat. It actually works a lot like border-image,
with the nine-box system for stretching/repeating.
I stole this idea from Doug Neiner who showed me a little demo of the idea. Posted with permission.
It's not "spec," but WebKit browsers support image masks. If you are familiar with Photoshop, they work like that. You declare an image to use as as mask. The black parts of that image hide what it is over, white parts of that image show
what is underneath, gray is partially transparent. So if you had this image:
<img src="orig.jpg" alt="trees" class="circle-mask">
And you had this image you created as a mask:
You'd apply it to the image in CSS like:
.circle-mask { -webkit-mask-box-image: url(mask.png); }
And this would be the result:
You Don't Need Actual Images
The first trick we're going to utilize here is that the image we delcare for the -webkit-mask-box-imagedoesn't
need to be an actual graphic image. Instead we can use -
webkit-gradientto create that image. Yes, we could just
make an image that is a gradient as well, but creating the gradient mask programmatically means that it's far easier to adjust on the fly and requires one less HTTP request.
-webkit-mask-position: 0 0; -webkit-mask-size: 200px 200px; -webkit-mask-image: -webkit-gradient(linear, left top, right bottom, color-stop(0.00, rgba(0,0,0,1)), color-stop(0.45, rgba(0,0,0,1)), color-stop(0.50, rgba(0,0,0,0)), color-stop(0.55, rgba(0,0,0,0)), color-stop(1.00, rgba(0,0,0,0)));
In the above CSS, we've created a 200px by 200px image which fades from fully opaque in the top left and fading and about half-way point at a 45deg angle, fades to fully transparent. That would look a little something like this:
Moving The Mask
Notice we set the position of the mask with -webkit-mask-position. Because we can set the
position, we can move the position. We could move it on a
:hover-
.circle-mask { -webkit-mask-position: 0 0; } .circle-mask:hover { -webkit-mask-position: -300px -300px; }
Or we could use a
-webkit-animationto automatically move that mask.
@-webkit-keyframes wipe { 0% { -webkit-mask-position: 0 0; } 100% { -webkit-mask-position: -300px -300px; } } .circle-mask { -webkit-animation: wipe 6s infinite; -webkit-animation-delay: 3s; -webkit-animation-direction: alternate; }
Creating The Wipe
I'm sure all you smarties have already put all this together. The idea is that we have one image on top of another image. The image on top gets the mask, and then we move the mask as needed.
<div id="banner"> <div><img src="images/banner-1.jpg" alt="Skyline 1"></div> <div><img src="images/banner-2.jpg" alt="Skyline 2"></div> </div>
#banner { width: 800px; /* Size of images, will collapse without */ height: 300px; position: relative; /* For abs. positioning inside */ border: 8px solid #eee; -webkit-box-shadow: 1px 1px 3px rgba(0,0,0,0.75); } #banner div { position: absolute; /* Top and left zero are implied */ } /* Second one is on top */ #banner div:nth-child(2) { -webkit-animation: wipe 6s infinite; -webkit-animation-delay: 3s; -webkit-animation-direction: alternate; -webkit-mask-size: 2000px 2000px; -webkit-mask-image: -webkit-gradient(linear, left top, right bottom, color-stop(0.00, rgba(0,0,0,1)), color-stop(0.45, rgba(0,0,0,1)), color-stop(0.50, rgba(0,0,0,0)), color-stop(0.55, rgba(0,0,0,0)), color-stop(1.00, rgba(0,0,0,0))); }
Demo and Download
In the download, there is another example where the wipe goes horizontally instead of at an angle, and happens using -webkit-transition rather than animation on a hover event.View
Demo Download
Files
More Than Two?
I spent more time than I probably should have trying to see if I could get the animation to wipe three images in succession. It's kind of possible but I wasn't able to get it smooth and consistent as I would have liked, so I scrapped it. I'm still fairly sureit's possible, probably using two different animations with different delays or the like. If you try it and get it worked, do show!
More
Check out the announcement from 2008 for more information about the masks themselves. There are useful bits to know in there, like the maskimages can stretch (like full page backgrounds) and repeat. It actually works a lot like border-image,
with the nine-box system for stretching/repeating.
Credit
I stole this idea from Doug Neiner who showed me a little demo of the idea. Posted with permission.
相关文章推荐
- Android webkit image的加载过程解析(三)
- css3 -webkit-image-set 设置不同分辨率 背景图片
- 针对上篇关于 WebKit 内核浏览器的Image.loading 问题的补充。我的问题完美解决!
- webkit中image的下载
- Android webkit image的加载过程解析 (一)
- Android webkit image的加载过程解析(二)
- 用 -webkit-mask-image 解决 border-radius 元素对应用了 transform 的子元素 overflow:hidden 失败的 BUG (WebKit下).
- -webkit-mask-box-image给框架加个同样大小的遮罩
- -webkit-border-image和border-image效果差异
- background-image中的-webkit-gradient属性
- IOS 开发 Cache文件夹缓存的清理封装(包括WebKit缓存/SDImageCache缓存),都提供了相应的接口.
- 在绘图时把image保存为PNG格式时出理的gdi+ general error
- Image、BufferImage和ImageIcon关系及用法
- opencv track image linux
- Glide显示在自定义圆形ImageView上的小问题
- 一个支持圆角的快速ImageView:RoundedImageView
- webpack加载image
- 从零开始基于ARM 交叉编译开源浏览器webkit
- imageview 设置背景图片解析
- JDK9 的image模块化上线