css安卓触摸效果 |css3水平旋转动画

.btn{
background-color: #4CAF50;
border:none;
padding:15px 32px;
text-align:center;
text-decoration:none;
display:inline-block;
font-size:16px;
margin:8px 4px;
cursor:pointer;
color:#ffffff;
transition: background-color 0.3s;
}
.btn:active{
background-color: #3e8e41;
transform: translateY(2px);
}

如上所示，大家首先定义了一个样式类.btn作为按钮的样式基础。然后，利用:active伪类来定义当按钮被按下时的样式变化，将按钮的背景颜色由绿色变为深绿色，在用户按下按钮的同时向下移动2px，以提升触摸反馈的真实感受。

最后，大家利用transition属性定义了背景颜色变化的过渡时间。当用户按下按钮时，背景颜色将在0.3秒内从初始值渐变到结束值。这样的效果让用户感到按钮呈现平滑过渡，大大提升了用户体验。

总的来说，在移动设备上添加触摸效果是非常重要的。简单的CSS代码就可以实现这样的效果，并且能够具有非常好的兼容性和可维护性，在web开发中广泛应用。