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);
}