[分享]css3怎么实现遮罩切换效果

CSS3实现遮罩切换效果非常简单，只需要了解一些CSS3的基本属性就行。在此我们用一个简单的例子来进行演示。下面的HTML结构包括一个图片和三个按钮，点击不同的按钮，图片会进行遮罩切换的动画效果： ...

CSS3实现遮罩切换效果非常简单，只需要了解一些CSS3的基本属性就行。在此我们用一个简单的例子来进行演示。下面的HTML结构包括一个图片和三个按钮，点击不同的按钮，图片会进行遮罩切换的动画效果：

<div id="container">
    <img src="img1.jpg" id="pic">
    <button id="btn1">效果1</button>
    <button id="btn2">效果2</button>
    <button id="btn3">效果3</button>
</div> 

CSS样式代码：

#container {
    position: relative;
    width: 500px;
    height: 300px;
}
#pic {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    -webkit-transition: -webkit-mask-image 1s;
    transition: mask-image 1s;
}
#pic.mask1 {
    -webkit-mask-image: url(mask1.png);
    mask-image: url(mask1.png);
}
#pic.mask2 {
    -webkit-mask-image: url(mask2.png);
    mask-image: url(mask2.png);
}
#pic.mask3 {
    -webkit-mask-image: url(mask3.png);
    mask-image: url(mask3.png);
}
button {
    margin: 15px;
    padding: 10px 20px;
    font-size: 16px;
} 

解析：

1、container元素设置为相对定位，pic元素设置为绝对定位，使其覆盖整个container。

2、pic元素设置宽高100%使其自适应container大小。

3、通过使用-webkit-mask-image和mask-image属性来设置遮罩效果。

4、通过-transiton属性设置遮罩切换的动画效果。

5、通过jQuery为三个按钮添加点击事件，分别给pic元素添加类mask1、mask2和mask3从而实现遮罩切换效果。

$('#btn1').click(function() {
    $('#pic').removeClass().addClass('mask1');
});
$('#btn2').click(function() {
    $('#pic').removeClass().addClass('mask2');
});
$('#btn3').click(function() {
    $('#pic').removeClass().addClass('mask3');
}); 

如此，就可以实现遮罩切换效果了。