[分享]css3实现波浪效果微信小程序

在微信小程序开发中，有时候需要使用一些动态的效果来吸引用户的注意力。其中，波浪效果是非常常见的一种效果。在CSS3中，我们可以使用一些属性来实现波浪效果。// HTML结构 / CSS样式 / .w...

在微信小程序开发中，有时候需要使用一些动态的效果来吸引用户的注意力。其中，波浪效果是非常常见的一种效果。在CSS3中，我们可以使用一些属性来实现波浪效果。

// HTML结构
<view class="wave"></view>

/* CSS样式 */
.wave {
  position: relative;
  height: 200px;
  width: 100%;
  background-color: #3c1d8f;
}

.wave:before,
.wave:after {
  content: "";
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 35px;
}

.wave:before {
  background-image: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0.5) 55%, rgba(255, 255, 255, 0.5) 75%, rgba(255, 255, 255, 0.5) 75%, rgba(255, 255, 255, 0) 100%);
  animation: wave 15s linear infinite forwards;
}

.wave:after {
  background-image: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0.5) 55%, rgba(255, 255, 255, 0.5) 75%, rgba(255, 255, 255, 0.5) 75%, rgba(255, 255, 255, 0) 100%);
  animation: wave 12s linear infinite forwards;
  animation-delay: -7s;
}

@keyframes wave {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-35px);
  }
} 

在上述代码中，我们使用了伪元素:before和:after来实现两个波浪图案。我们设置它们的位置为底部，高度为35px。在它们的背景中，我们使用了一个渐变，并设置了一些不同的透明度，来实现波浪效果。在我们的.wave元素中，我们设置了一个背景颜色和一个相对位置，使它可以作为伪元素的容器。最后我们使用了动画来创建波浪效果，以及在第二个波浪图案中使用了一个animation-delay属性来使它的动作延迟了7秒开始。

通过上述代码，我们可以实现一个漂亮的波浪效果来提升微信小程序页面的用户体验。