[分享]css3按扭动画

CSS3的出现使前端设计的效果更加出色，现在让我们一起来探讨一下CSS3按扭动画。

.button {
  background-color: #4CAF50;
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
  border-radius: 50px;
  transition-duration: 0.4s;
}

.button:hover {
  background-color: #45a049;
  box-shadow: 0 5px 15px rgba(0,0,0,.15);
  transform: translateY(-3px);
}

.button:active {
  background-color: #4CAF50;
  transform: translateY(2px);
  box-shadow: 0 2px 5px rgba(0,0,0,.4);
} 

针对以上这段代码，我们可以看到"."用于标识类名，类名为"button"，是用于调用样式的标识。在样式中我们设定了按扭的背景色、边框、颜色、内边距、字体大小和对齐方式等。以及添加了"border-radius"来实现按扭的圆角效果，同时使用"transition-duration"用于设定变化持续时间。

在".button:hover"中，我们添加了鼠标指针悬停时的变化过渡，包括背景颜色的改变，阴影的添加，以及按扭向上移动3个像素的"transform: translateY(-3px)"动作。

在".button:active"中，我们添加了按扭被按下时的变化过渡，包括背景颜色的变化，按扭向下移动2个像素"transform: translateY(2px)"、以及添加阴影"box-shadow"的效果。

以上这些样式的使用可以轻松实现一个适配不同场景的按扭UI效果，同时对于页面交互的效果和体验也有很好的提升。欢迎大家尝试使用CSS3按扭动画来增强自己的网站UI效果。