[分享]css3手机点击波特效

CSS3是前端开发者必须掌握的技能之一，其中有一种手机点击波特效是很常见的，它可以为网页添加更多的交互效果和视觉体验。.button{ : relative; display: inlineblock...

CSS3是前端开发者必须掌握的技能之一，其中有一种手机点击波特效是很常见的，它可以为网页添加更多的交互效果和视觉体验。

.button{
  position: relative;
  display: inline-block;
  padding: 10px 20px;
  border: 2px solid #fff;
  color: #fff;
  font-size: 16px;
  text-align: center;
  text-transform: uppercase;
  overflow: hidden;
  cursor: pointer;
}

.button:hover{
  background-color: #fff;
  color: #333;
}

.button:after{
  content: ';
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0);
  width: 20px;
  height: 20px;
  background-color: rgba(255, 255, 255, 0.5);
  border-radius: 50%;
  opacity: 0;
}

.button:active:after{
  animation: ripple 0.5s linear forwards;
}

@keyframes ripple{
  100%{
    transform: translate(-50%, -50%) scale(150);
    opacity: 0;
  }
} 

这个波特效可以通过设置伪元素：after和使用CSS3动画来实现。可以看出，在伪元素中设置了一些属性，如：position、top、left、transform、width、height、background-color、border-radius和opacity。这些属性将在动画中作为起始状态来进行设置。在CSS3动画中，使用了@keyframes来定义动画，设置了元素从起始状态到结束状态的改变过程。最后，在按钮的:active伪类中触发动画，这样当我们点击按钮时，就会显示出点击的波特效。