css3 移动端touch

CSS3 移动端 touch 已经成为了网站开发中必不可少的技术，它能够为移动设备带来更加出色的用户体验。

首先，在 CSS3 中，我们可以使用 touch-action 属性来控制元素在移动设备上的触摸响应行为，可以设置成 auto,none,pan-x,pan-y,manipulate 等值。

.touch {
  touch-action: pan-y;
  -webkit-touch-callout: none;
}

上面的代码设置了元素只能在 y 方向上进行拖动，同时禁止了在选中时弹出 iOS 上的菜单。当然，在实际开发中应根据需求灵活运用这些属性。

此外，CSS3 中还新增了一些与 touch 相关的伪类，常用的有 :active 和 :hover。只要点击或手指触摸时，:active 便会为元素添加样式；而当长按一个元素时，:hover 会生效。以下是一个示例：

.touch:hover,.touch:active {
  background-color: #ccc;
}

最后，CSS3 中还新增了一些与动画效果相关的属性，如 transition、transform、animation 等等。这些属性不仅可以通过鼠标触发，通过 JS 触发，还可以通过 touch 事件触发。以下是一个使用 touch 触发动画效果的例子：

.touch {
  transition: all 0.3s ease-in-out;
  transform-origin: center;
}

.touch:active {
  transform: scale(0.9);
}

CSS3 的移动端 touch 技术可以让我们更加灵活地控制元素在移动设备上的交互行为，使用户在使用网站时有更加舒适的体验。开发者们在实际项目中需要灵活运用这些技术，才能达到更加出色的效果。