[分享]css3手点击的效果

CSS3的手点击效果是现在常见的一种UI设计，它为用户提供了更加友好的交互方式。当用户鼠标移动到可以点击的元素上时，元素会出现手形图标，而当用户点击时，元素则会出现类似于水波纹的效果，从而提高了用户的...

CSS3的手点击效果是现在常见的一种UI设计，它为用户提供了更加友好的交互方式。当用户鼠标移动到可以点击的元素上时，元素会出现手形图标，而当用户点击时，元素则会出现类似于水波纹的效果，从而提高了用户的点击体验。

.button {
  display: inline-block;
  border: none;
  border-radius: 4px;
  padding: 12px 24px;
  font-size: 16px;
  background-color: #0b5ed7;
  color: #fff;
  text-align: center;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
  cursor: pointer;
}

.button:hover {
  background-color: #1864c2;
}

.button:active {
  position: relative;
  top: 1px;
  left: 1px;
  box-shadow: none;
}

.button:active:before {
  content: "";
  display: block;
  position: absolute;
  top: -1px;
  left: -1px;
  bottom: -1px;
  right: -1px;
  background-color: rgba(255, 255, 255, 0.4);
  border-radius: 4px;
  pointer-events: none;
  animation: ripple 0.5s linear;
}

@keyframes ripple {
  from {
    transform: scale(0);
    opacity: 1;
  }
  to {
    transform: scale(2);
    opacity: 0;
  }
} 

以上是一个简单的示例代码，可以实现当用户点击按钮时，按钮会出现类似于水波纹的效果。实现这个效果的关键是利用:active伪类和:before伪类。首先，当用户点击按钮时，:active伪类会生效，此时我们可以通过调整按钮的位置、边框或阴影等属性来达到效果。然后，利用:before伪类在按钮的外层加上一个伪元素，这个伪元素就是我们的水波纹效果所在的地方，同时通过animation属性设置动画效果来实现水波纹的效果。