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

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

先来看下需求吧~

若是判断用户的点击操做？

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

若是添加蒙层？

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

html

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

虽然可以实现，可是有一些问题
一、使用了额外的JavaScript来进行行为控制
二、须要添加额外的DOM结构
三、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仍是有一些问题：
一、须要改变.icon的position为relative
二、蒙层仍是与icon的结构有依赖（好比border-radius:50%）
三、css代码偏多，不够简洁

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

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