css实现水流动的效果

CSS 可以实现许多效果，例如，水流动的效果。如果您想要给您的网站添加一些生动的有趣的效果，那么这篇文章将为您提供一个很好的开始。下面将介绍如何使用 CSS 实现水流动的效果。

.wave {
  position: relative;
  height: 60px; /* 水面高度，根据需求自行调整 */
  width: 100%;
  background-color: #0077be; /* 水的颜色 */
  transform-origin: center bottom;
  transform: skewY(-8deg);
}
.wave:before,.wave:after {
  content: "";
  position: absolute;
  z-index: -1;
  width: 2500px; /* 非常宽的波长 */
  height: 60px; /* 水面高度，根据需求自行调整 */
  bottom: -60px; 
  background-repeat: repeat-x;
}
.wave:before {
  background-image: linear-gradient(to right,transparent 30%,rgba(255,255,.2) 40%,.4) 50%,.2) 60%,transparent 70%);
  animation: wave 7s linear infinite;
}
.wave:after {
  background-image: linear-gradient(to right,transparent 10%,.5) 20%,.2) 30%,.5) 40%,transparent 50%);
  animation: wave2 10s linear infinite;
}
@keyframes wave {
  0% {
    background-position-x: 0;
  }
  100% {
    background-position-x: -1250px; /* 取中间一半的宽度的位置，这样可以实现两个波之间的错位效果 */
  }
}
@keyframes wave2 {
  0% {
    background-position-x: 0;
  }
  100% {
    background-position-x: -2500px; /* 整个波长的位置 */
  }
}

css实现水流动的效果

在上面的代码片段中，我们定义了一个 .wave 类，用于设置水的样式。我们还定义了 :before 和 :after 伪元素，用于创建两个波。我们使用背景图像和渐变来创建波形。通过动画，我们不断移动这些波形的背景位置来模拟水波流动的效果。

在我们的 HTML 中，我们只需要将水的容器放在适当的位置即可：

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

启用此代码后，您将会看到一个漂亮的水波效果在您的网页上流动。如果您愿意，您可以根据需要进行修改和调整。好运！

css实现水流动的效果

相关文章