[分享]css3手机点击特效

CSS3技术带来了许多新的特效，其中手机点击特效非常实用。通过运用CSS3中的伪类选取器和动画属性，我们可以为手机网页增加更生动、更有趣的用户交互效果。/首先，我们需要为需要添加效果的标签（如按钮）指...

CSS3技术带来了许多新的特效，其中手机点击特效非常实用。通过运用CSS3中的伪类选取器和动画属性，我们可以为手机网页增加更生动、更有趣的用户交互效果。

/*首先，我们需要为需要添加效果的标签（如按钮）指定样式：*/
.button{
  display: inline-block;
  padding: 10px 15px;
  margin: 10px;
  background-color: #f00;
  color: #fff;
  border-radius: 5px;
  transition: all 0.3s;
}

/*当用户点击按钮时，我们为其添加hover效果（即鼠标悬停效果），此时按钮会由红色变为淡红色：*/
.button:hover{
  background-color: #f66;
}

/* 接下来，我们为按钮添加“按下去”的效果，当用户点击按钮时，它会略微凹陷：*/
.button:active{
  transform: translateY(2px);
}

/*最后，为按钮添加“松开”的效果，如果用户在点击按钮时不慎松手，按钮会通过transition属性慢慢回到原位：*/
.button:active, .button:focus{
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.2);
  outline: none;
  transform: translateY(2px);
} 

我们可以把以上样式应用到手机上的web页面中，让用户在点击按钮时感受到更为真实的交互体验。这种基于CSS3的动画效果简单易用，能够有效提升整个网站的用户体验。在今后的手机网页设计中，我们可以考虑为页面添加更多类似的特效。