css 手指

/* 示例代码：使用 CSS 实现手指点击效果 */

/* 定义一个按钮样式 */
.button {
  padding: 10px 20px;
  font-size: 16px;
  background-color: #4CAF50;
  color: white;
  border: none;
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
}

/* 当鼠标悬停在按钮上时，添加手指点击效果 */
.button:hover {
  transform: scale(0.95); /* 缩小按钮模拟按下效果 */
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); /* 添加阴影效果 */
}

/* 当按钮被点击时，进一步缩小并改变背景颜色 */
.button:active {
  transform: scale(0.9); /* 进一步缩小 */
  background-color: #45a049; /* 改变背景颜色 */
}

解释说明：

• .button 类定义了一个简单的按钮样式，设置了内边距、字体大小、背景颜色、文本颜色等。
• transition 属性用于平滑过渡按钮的缩放和阴影变化。
• :hover 伪类用于当鼠标悬停在按钮上时，通过 transform: scale(0.95) 模拟按钮被按下的效果，并添加阴影以增强视觉效果。
• :active 伪类用于当按钮被点击时，进一步缩小按钮并改变背景颜色，模拟手指点击的效果。