[分享]css3手机点击效果

CSS3手机点击效果是一个非常有用的效果，对于手机网站、APP等移动端界面的设计非常实用。下面将为大家介绍如何使用CSS3实现手机点击效果。.touch { webkittaphighlightcol...

CSS3手机点击效果是一个非常有用的效果，对于手机网站、APP等移动端界面的设计非常实用。下面将为大家介绍如何使用CSS3实现手机点击效果。

.touch {
  -webkit-tap-highlight-color: rgba(0,0,0,0);
  -webkit-touch-callout:none;
  -webkit-user-select:none;
  -moz-user-select:none;
  -o-user-select:none;
  user-select:none;
}

.touch:active {
  background-color: rgba(0,0,0,0.2);
} 

首先，我们需要添加一个class名为.touch的样式，这个样式将屏蔽掉默认的手机浏览器点击效果并禁止拖拽。同时，我们还需要为这个样式添加一个:active伪类来设置点击时的背景颜色。

<div class="touch">
  <button>我是按钮</button>
  <a href="#">我是链接</a>
</div> 

在HTML代码中，我们可以将.touch样式添加到button和a标签中，这样点击这些元素的时候将会出现我们设置的点击效果。

值得注意的是，如果在Android平台的手机上使用这个点击效果，则需要加上“-webkit-tap-highlight-color:rgba(0, 0, 0, 0);”这个代码，否则仍然会出现默认的点击效果。

总之，使用CSS3实现移动端的点击效果非常方便和实用，可以为我们的网站和APP增添很多细节和可操作性，也能提升用户的体验感。