[分享]css3手机划动水波纹效果

CSS3手机划动水波纹效果

 /* HTML结构 */
  <div class="ripple-container">
      <div class="ripple"></div>
  </div>

  /* CSS样式 */
  .ripple-container{
      position: relative;
      width: 200px;
      height: 200px;
      overflow: hidden;
  }

  .ripple{
      position: absolute;
      width: 0px;
      height: 0px;
      border-radius: 50%;
      background-color: rgba(255,255,255, 0.5);
      transform: translate(-50%, -50%);
      animation: ripple 1s linear infinite;
  }

  @keyframes ripple {
      0% {
          width: 0px;
          height: 0px;
          opacity: 0.5;
      }
      100% {
          width: 500px;
          height: 500px;
          opacity: 0;
      }
  } 

使用CSS3的动画实现了一种手机划动时水波纹扩散的效果，代码十分简单易懂。我们通过设置 ripple-container 为相对定位，为其内部的 ripple 元素设置绝对定位，并通过 CSS3 的 transform 属性使其水平和竖直方向上分别向左和向上偏移50%的值。我们使用 background-color 设置其背景颜色，并设置其 opacity 为 0.5，使其半透明。通过设置动画的关键帧，实现了水波纹从划动位置开始向外扩散的效果。通过调整动画的时间和元素大小实现不同的效果和体验。