css实现水波纹动效

CSS实现水波纹动效
水波纹动效是Web界面设计中非常常见的动效之一，可以为Web界面增添一丝生动感和活力。下面是一份CSS实现水波纹动效的代码。

HTML结构：

  <div class="water">
    <a href="#">Button</a>
    <span></span>
  </div>

CSS样式：

  .water {
    position: relative;
    display: inline-block;
    margin: 20px 0;
    overflow: hidden;
    border-radius: 5px;
  }

  .water a {
    display: block;
    width: 100%;
    height: 100%;
    padding: 20px;
    Box-sizing: border-Box;
    text-align: center;
    color: #fff;
    font-size: 24px;
    font-weight: bold;
    text-shadow: 0 0 5px rgba(0,.5);
    background-color: #03a9f4;
    transition: all .5s ease-in-out;
  }

  .water a:hover {
    transform: scale(1.1);
    Box-shadow: 0 5px 20px rgba(0,.7);
  }

  .water span {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background-image: radial-gradient(circle,transparent 20%,rgba(255,255,.2) 20%,.2) 30%,transparent 30%);
    background-position: 0 0;
    background-repeat: no-repeat;
    opacity: .5;
    transform: scale(1);
    animation: wave 1.5s linear infinite;
  }

  @keyframes wave {
    0% {
      background-position: 0 0;
    }
    100% {
      background-position: 0 40px;
    }
  }

解析：

1. .water元素用于包裹水波纹按钮，使用position: relative;和border-radius: 5px;设置圆角。

2. .water a用于设置水波纹按钮的样式，包括颜色、字体、大小等。

3. .water a:hover用于设置按钮的hover状态，实现按钮的放大和阴影效果。

4. .water span用于实现水波纹效果，包括背景渐变、位置、透明度和动画等。其中，background-image使用radial-gradient创建一个圆形渐变，设置从transparent到rgba(255,.2)的渐变，并按照22%、28%时刻出现一个透明的白色圆圈，从而形成水波纹的效果。

5. @keyframes wave用于实现水波纹的动画效果，同时将.pulse span的background-position移动到40像素，形成一个水波向外散发的效果。

通过以上CSS样式的实现，我们可以轻松地实现一个生动活泼的水波纹动效按钮。
css实现水波纹动效

相关推荐
