β

Web端遮罩效果实现探究

JDC | 京东设计中心 210 阅读

遮罩在以前Flash盛行的年代随处可见,以前的动画也经常有类似的过场,类似下图:

刚好最近有个项目需要用到这样的遮罩过场效果,研究了下Web端该如何实现,尝试了几种方法,今天我们就来探讨下如何来实现这个效果

纯图片实现

图片实现是最简单的一个方法,只需要制作一张圆形挖空的png图片,然后盖在你需要遮罩的元素上面,类似这样:

这个方法最简单暴力,兼容性最好,当然,你的图片必须做的足够大才能盖住整个页面,否则就会露馅了,当然你也参考下面这个改进方法。

图片+table

很遗憾,目前IE用户的比例还无法让我们忽视他们的存在,所以我们前提依然是兼容IE,所以我们想出了这个方法,参考上面图片实现,配合table元素来达到移动遮罩的目的。

实现原理如下:

<table>
  <tr>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td>遮罩图片位置</td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
  </tr>
</table>

就是利用table做出一个九宫格,通过控制外围的td的宽高来控制遮罩的移动和缩放。

border-radius + border-color

上面的方法是兼容IE的方法,慢慢的我们开始要无视IE了,其实实现原理和table方法差不多,就是用超大的border来实现外部的填充,然后调整border的透明度达到需要的透明度,然后利用border-radius来实现圆形。

<style>
.wrap {width: 1000px; height: 500px; position: relative; overflow: hidden;}
.mask {width: 100px; height: 100px; border: 20000px solid rgba(0,0,0,0.6); border-radius: 50%; position: absolute; left: 50%; top: 50%; margin-left: -20000px; margin-top: -20000px;}
</style>
<div class="wrap">
  <div class="mask">
    
  </div>
</div>

实际效果参考,点击打开:
larthas

CSS3 Mash

很庆幸,CSS3为我们带来了希望,我们可以借助它来实现以往需要大费周折的效果。

CSS3提供了mask-img来提供遮罩,使用方法如下:

.box{
background: url(img/image.jpg) repeat;
-webkit-mask: url(img/mask.png);
}

mask的原理是使用一张遮罩用图片,遮罩图片中的黑色代表显示,白色代表隐藏,直接看例子吧,点击打开:

larthas

具体参数可以 参考文档

clip裁切

这个方法是这次项目需要实现的效果,虽然用css3可以做到,但是如果要做遮罩动画,仍然需要用到图片,后来发现clip是支持css3动画的,立刻用起来!示例如下,点击打开:

larthas

当然clip也是支持圆形的,clip的具体使用方法可以gg一下啦,而且clip IE也是支持的哦。
如果结合SVG你还可以clip出各种奇奇怪怪的形状,比如:

<svg>
<clipPath id="clip">
       <path d="M 14.8492 10.0868 L 80.6102 35.5426 L 125.865 6.55125 L 152.028 36.9568 L 199.404 8.67257 L 255.973 41.9066 L 305.47 3.72283 L 362.039 36.2497 L 386.787 8.67257 L 454.67 44.0279 L 477.297 9.37968 L 502.753 27.7645 L 555.079 7.96547 L 565.685 32.0071 L 530.33 98.4751 L 567.1 153.629 L 523.259 190.399 L 563.564 254.039 L 528.916 280.909 L 567.1 352.326 L 543.058 418.087 L 501.339 388.389 L 441.235 423.037 L 414.365 391.217 L 325.976 420.916 L 272.236 393.339 L 248.902 420.916 L 178.898 389.803 L 108.894 420.209 L 65.7609 392.632 L 35.3553 420.916 L 0.707107 391.217 L 24.7487 318.385 L 2.82843 266.767 L 29.6985 245.553 L 1.41421 191.813 L 29.6985 123.224 L 3.53553 82.2117 L 26.8701 46.8563 Z"></path>
</clipPath>
</svg>
<svg>
<image xlink:href="http://img30.360buyimg.com/mobilecms/jfs/t2617/152/3709209519/31953/885c6240/57974f77N04e730e4.jpg" width="640" height="260" clip-path="url(#clip)"></image>
</svg>

效果预览:

larthas

文档参考

作者:JDC | 京东设计中心
京东设计中心
原文地址:Web端遮罩效果实现探究, 感谢原作者分享。

发表评论