css3实现冲击波效果的示例代码

要实现CSS3冲击波效果，我们可以使用伪元素来实现。下面是实现冲击波效果的完整攻略：

1. HTML代码

首先，我们需要一个HTML元素，在这个元素中添加伪元素来实现冲击波效果。我们可以用div元素来代表这个元素。

<div class="wave"></div>

2. CSS代码

接下来，我们需要用CSS样式来定义这个div元素和伪元素的样式：

.wave {
   position: relative;
   width: 200px;
   height: 100px;
   background: #0078ff;
   margin: 50px auto;
}

.wave:before {
   content: "";
   position: absolute;
   top: -20px;
   left: 0;
   right: 0;
   height: 40px; 
   background-color: #fff;
   border-radius: 50% 50% 0 0;
   animation: wave 1.5s linear infinite;
}

.wave:after {
   content: "";
   position: absolute;
   bottom: -20px;
   left: 0;
   right: 0;
   height: 40px; 
   background-color: #fff;
   border-radius: 0 0 50% 50%;
   animation: wave 1.5s linear infinite;
}

@keyframes wave {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

我们来详细解释一下这段CSS代码：

• 首先，我们给这个元素设置了一个相对定位，宽度为200px，高度为100px，背景颜色为#0078ff，并且上下居中（margin:50px auto）。
• 然后，我们定义了两个伪元素 :before和:after，分别代表上方和下方的波浪线。
• 伪元素使用了绝对定位，top为-20px和bottom为-20px，height为40px，border-radius为实现半圆形效果。
• 然后我们使用了一个CSS动画函数@keyframes来定义动画的过程。在这个例子中，我们使用了一个名为“wave”的动画，它将波浪线旋转360度，每次旋转需要1.5秒，运动速度为线性。

接下来我们来通过两个示例说明一下这个冲击波效果的具体应用：

示例一：登录界面

我们可以用这个冲击波效果来美化登录界面。例如，我们可以定义一个登录框，然后在登录框的背景中添加这个冲击波效果。

<div class="login-box">
  <form>
    <h2>登录</h2>
    <input type="text" name="username" placeholder="用户名">
    <input type="password" name="password" placeholder="密码">
    <button type="submit">登录</button>
  </form>
  <div class="wave-box">
    <div class="wave"></div>
  </div>
</div>

这里我们定义了一个.login-box来包含登录表单和冲击波效果。我们在.login-box中加入了一个额外的div元素.wave-box用来包含冲击波效果的wave元素。这是因为我们需要将冲击波效果放置在表单的背景中。

我们可以使用下面的CSS代码来定义这个示例的样式：

.login-box {
  position: relative;
  width: 400px;
  margin: 50px auto;
  padding: 50px;
  background: #fff;
  box-shadow: 0 0 20px rgba(0,0,0,0.3);
}

.login-box h2 {
  margin-bottom: 30px;
}

.login-box form input {
  display: block;
  width: 100%;
  padding: 10px;
  margin-bottom: 20px;
  border-radius: 20px;
  border: 1px solid #ccc;
}

.login-box form button {
  display: block;
  width: 100%;
  padding: 10px;
  margin-bottom: 20px;
  border-radius: 20px;
  border: 1px solid #ccc;
  background: #0078ff;
  color: #fff;
  cursor: pointer;
}

.wave-box {
  position: absolute;
  bottom: -1px;
  left: 0;
  right: 0;
  height: 100px;
  overflow: hidden;
}

.wave {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #0078ff;
  animation: wave 1.5s linear infinite;
}

这里我们设置了一个.login-box用来定义登录框的样式，其中包含一个背景为白色、上下左右居中的登录框，还有一个.form元素来包含表单元素。

示例二：纯CSS3实现登录按钮动态效果

另一个例子是动态登录按钮。我们可以通过动态效果来提高用户体验，提示用户成功地登录到了网站。

HTML代码：

<button class="wave-btn">
  <span>Login</span>
  <svg viewBox="0 0 285 42" class="wave-svg">
    <path d="M-35,6 C-35,6 -15,36 14,15 39,-5 78,41 125,13 187,-22 228,33 286,2 L286 42 L-34 42 Z" />
  </svg>
</button>

CSS代码：

.wave-btn {
  position: relative;
  display: block;
  margin: 0 auto;
  padding: 15px 30px;
  font-size: 2em;
  text-transform: uppercase;
  text-align: center;
  color: #fff;
  background: linear-gradient(to bottom, #0078ff, #0078ff 50%, #0078ff);
  border: 0;
  cursor: pointer;
  overflow: hidden;
  z-index: 1;
}

.wave-btn .wave-svg {
  position: absolute;
  top: 0;
  left: -50%;
  width: 200%;
  height: 100%;
  fill: #fff;
  transform-origin: center center;
}

.wave-btn span {
  position: relative;
  z-index: 2;
}

.wave-btn:hover .wave-svg {
  animation: wave 2s ease-out infinite;
}

@keyframes wave {
  0% {
    transform: rotate(-30deg);
  }
  25% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(30deg);
  }
  75% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(-30deg);
  }
}

这里我们定义了一个.wave-btn，它在hover时会使波浪线动起来。我们用了一个SVG元素来定义波浪线，将其放置在按钮上方。我们用了一个CSS动画函数@keyframes来定义波浪线的动画过程，当hover时启动。

这就是CSS3实现冲击波效果的过程和实例。通过这两个示例，我们可以看到这个特效在实际开发中的应用。