css3实现波纹特效、H5实现动态波浪效果

CSS3实现波纹特效攻略：

常用技术

• CSS3 transform
• CSS3 animation
• CSS3 transition
• box-shadow

实现步骤

1. 首先我们需要创建一个HTML元素，为了方便，我们可以选用button元素。
2. 然后在CSS中设置该元素的基本样式，包括大小、颜色和位置等。
3. 接下来，我们需要设置hover伪类，当该元素被hover时，将会出现波纹特效。
4. 在hover状态下，我们可以使用CSS3 transform将该元素的尺寸放大，并且通过box-shadow添加实现波纹的效果。

示例一：CSS3实现波纹特效

<button class="ripple">Click me</button>

.ripple {
  display: inline-block;
  padding: 1em 2em;
  color: #fff;
  background-color: #2196f3;
  border-radius: 3px;
  text-transform: uppercase;
  font-weight: bold;
  text-decoration: none;
  letter-spacing: 1px;
  position: relative;
  overflow: hidden;
}
.ripple:hover {
  transform: scale(1.2);
  transition: transform 0.2s ease-out;
}
.ripple::after {
  content: '';
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  background-color: rgba(255,255,255,0.3);
  transform: translate(-50%, -50%);
  border-radius: 100%;
  transition: width 0.3s ease-out, height 0.3s ease-out;
}
.ripple:hover::after {
  width: 200%;
  padding-bottom: 200%;
  transition: width 0.3s ease-out, height 0.3s ease-out;
}

H5实现动态波浪效果攻略：

常用技术

• SVG（Scalable Vector Graphics）可缩放矢量图形
• Path
• JS 动画库

实现步骤

1. 首先，我们需要在HTML中使用SVG元素，包括viewBox、path和circle等标签元素。
2. 在path标签中，我们需要定义一个路径，通过“L”、“M”、“C”等字母描述该路径的形态，具体可以参考路径规则（MDN Path）。
3. 接下来我们需要在SVG中添加circle元素，并使用动画库实现其在SVG元素中实现动态波浪效果。

示例二：H5实现动态波浪效果

<svg viewBox="0 0 800 600">
  <path id="wave" fill="#4C604C" d="M0 300 Q150 270 300 300 T600 300 V600 H0 Z" />
  <circle id="circle" cx="150" cy="300" r="12" fill="#4C604C">
    <animateTransform attributeName="transform" attributeType="XML" type="translate" from="0 0" to="500 0" dur="8s" repeatCount="indefinite" />
  </circle>
</svg>

svg {
  width: 100%;
  height: 100%;
}

#circle {
  animation: move-circle 8s linear infinite;
}

@keyframes move-circle {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(700px, 0);
  }
}

以上两个示例仅供参考，具体实现方式可以根据实际项目需求进行调整。