CSS3 波纹循环

在网站页面设计过程中，给用户提供反馈是非常重要的。其中一种方式是添加交互特效，如按钮按下时的波纹效果。本文将介绍如何使用CSS3实现波纹循环效果。

实现方法

CSS3的animation属性可以实现动画效果，我们可以结合使用::before伪元素和animation属性来实现波纹循环效果。

以下是CSS3波纹循环实现的代码片段：

.button {
  position: relative;
  overflow: hidden;
  background-color: #4CAF50;
  border: none;
  border-radius: 2px;
  color: #FFF;
  font-size: 24px;
  padding: 16px;
}
.button::before {
  content: '';
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  background-color: rgba(255, 255, 255, 0.3);
  opacity: 1;
  border-radius: 100%;
  transform: translate(-50%, -50%);
  animation: ripple 1s linear infinite;
}
@keyframes ripple {
  0% {
    width: 0;
    height: 0;
    opacity: 1;
  }
  100% {
    width: 100%;
    height: 100%;
    opacity: 0;
  }
}

代码解释：

• position: relative: 使父元素成为::before伪元素的参考位置。
• overflow: hidden: 隐藏子元素溢出的部分。
• background-color: #4CAF50: 设定背景颜色。
• border: none: 取消边框。
• border-radius: 2px: 设定边框的四个角的半径。
• color: #FFF: 设定文字颜色。
• font-size: 24px: 设定文字大小。
• padding: 16px: 设定内边距。
• ::before: 创建一个与按钮同样大小的带有动画效果的圆形。
• content: '';: 在::before伪元素中设定内容为空。
• display: block: 将::before伪元素设为块级元素。
• position: absolute: 将::before伪元素绝对定位。
• top: 50%: 向上偏移50%。
• left: 50%: 向左偏移50%。
• width: 0: 初始宽度为0。
• height: 0: 初始高度为0。
• background-color: rgba(255, 255, 255, 0.3): 设定背景颜色，此处使用RGBA格式，有助于设置透明度。
• opacity: 1: 设置透明度为1。
• border-radius: 100%: 设定边框的四个角的半径为100%。
• transform: translate(-50%, -50%): 将::before伪元素向左和向上偏移自身宽度和高度的50%。
• animation: ripple 1s linear infinite;: 指定动画名称，时长，运动曲线和动画次数。
• @keyframes ripple: 定义动画过程。
• 0%: 开始状态。
• width: 0;: 宽度为0。
• height: 0;: 高度为0。
• opacity: 1;: 不透明。
• 100%: 结束状态。
• width: 100%;: 宽度为100%。
• height: 100%;: 高度为100%。
• opacity: 0;: 透明。

使用方法

将以上代码片段添加到按钮的类选择器中即可实现波纹循环效果。

<button class="button">按钮</button>

结论

本文介绍了如何使用animation属性和::before伪元素实现CSS3波纹循环效果，为网站页面设计提供了交互特效。