纯CSS3怎么实现波浪效果？「代码示例」

1.概述

CSS（层叠样式表）是一种用于描述网站文件外观和格式的语言。通过CSS，我们可以创建一些有趣的效果，如波浪效果。

2.实现方法

2.1 使用SVG

SVG是可缩放矢量图形的缩写，它可以创建在不失真的情况下无限放大的图像。可以使用SVG元素创建波浪形，具体实现方法如下：

/* SVG */
.wave {
  position: relative;
  height: 60px;
  width: 100%;
  background-color: #fff;
}
.wave::before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-repeat: repeat-x;
  background-position: 0 bottom;
  background-size: 20% 20%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 320'%3E%3Cpath fill='%23fff' d='M0,160L48,176C96,192,192,224,288,218.7C384,213,480,171,576,160C672,149,768,171,864,149.3C960,128,1056,64,1152,53.3C1248,43,1344,85,1392,106.7L1440,128L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z'/%3E%3C/svg%3E");
}

这段代码使用:before伪元素实现SVG背景波浪效果，并使用data URL代替外部SVG文件。

为了调整波浪线的高度，可以使用height属性对元素.wave进行设置。

2.2使用纯CSS

使用CSS和伪元素，可以在元素的背景上创建波浪线，方法如下所示:

/* CSS3 */
.wave {
  position: relative;
  width: 100%;
  height: 60px;
  background: #fff;
}
.wave::before {
  content: "";
  display: block;
  position: absolute;
  top: -20px;
  left: 0;
  right: 0;
  height: 40px;
  background:
    /* 兼容性代码 */
    linear-gradient(135deg, transparent 15px, #fff 0),
    linear-gradient(225deg, transparent 15px, #fff 0),
    linear-gradient(315deg, transparent 15px, #fff 0),
    linear-gradient(45deg, transparent 15px, #fff 0);
  background-repeat: repeat-x;
  background-size: 40px 40px;
  animation: wave 2s linear infinite;
}
@keyframes wave {
  0% {
    background-position: 0 -16px;
  }
  100% {
    background-position: 0 16px;
  }
}

使用::before伪元素，我们可以创建从顶部到底部的波浪线，并通过重复使用linear-gradient()制作了四个45度角的波浪线。

通过使用Keyframes，我们还可以创建动画来使波浪线移动并创建平稳流动的效果。

要调整波浪线的高度，请调整.wave ::before的top和height属性。

3.总结

通过SVG、纯CSS和伪元素，我们可以轻松地创建漂亮的波浪效果。

无论您正在创建一个单页网站还是企业网站，这些技术都可以用来使您的网站更具吸引力和专业性。