web移动开发中如何实现图标点击态的蒙层效果

webapp开发中经常需要加入点击二态，即用户点击（tap）页面某个部分时该部分的样式进行相应的变化来相应用户的点击操作，这样能够带来更好的用户体验，今天我们要讨论的是如何给图标加上点击的二态效果。

先来看下需求吧~

如果判断用户的点击操作？

这个应该不用多说，使用css的伪类选择:active即可，这儿需要注意的是不要使用:hover,有些新手往往会直接使用:hover，一方面兼容性比较差，另一方面响应用户操作表现时会有些怪异。

如果添加蒙层？

我们先用最容易想到的方法来实现这个需求。
我们可以添加一个和图标同样尺寸的dom蒙层元素，当图标被点击时我们利用JavaScript来显示这个蒙层

html

<div class="wrapper">
    <i class="icon"></i>
    <i class="mask"></i>
</div>

虽然能够实现，但是有一些问题
1、使用了额外的JavaScript来进行行为控制
2、需要添加额外的DOM结构
3、mask的尺寸样式定义需要依赖于icon的尺寸

相信大家也想到了，我们可以使用css3中的::after来规避上面提到的一些问题
html

<i class="icon"></i>

css

.icon {
    ...
    position: relative
    border-raidus: 50%;
}
.icon::after {
    ...
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    border-radius: 50%;
    display: none;
    background: rgba(0, 0, 0, .5);
}
.icon:active::after {
    display: block;
}

现在好多了，HTML已经非常简洁了，不需要定义额外的结构，而且不需要依赖JavaScript，但是css还是有一些问题：
1、需要改变.icon的position为relative
2、蒙层还是与icon的结构有依赖（比如border-radius:50%）
3、css代码偏多，不够简洁

好了，让我们快速结束吧，下面给出一种简洁的方案，相信也不用进行解释了

.icon:active {
    box-shadow: inset 0 0 1000px rgba(0, 0, 0, .5);
}