CSS3滤镜如何实现波浪效果（附代码）

功能介绍：用CSS3滤镜实现波浪效果，下面直接附代码：

1、html代码

<div class="container">
    <div class="inner"></div>
</div>

2、CSS代码

html, body {
  width: 100%;
  height: 100%;
}

body {
  display: flex;
}

.container {
  position: relative;
  margin: auto;
  width: 380px;
  padding-top: 100px;
  filter: contrast(20);
  background-color: #fff;
  overflow: hidden;
}

.container::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  backdrop-filter: blur(10px);
  z-index: 1;
}

.inner {
  position: relative;
  width: 480px;
  height: 100px;
  transform: translate(0, 0);
  background: radial-gradient(circle at 20px 0, transparent, transparent 20px, #000 21px, #000 40px);
  background-size: 80px 100%;
  animation: move 1s infinite linear;
}

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

以上是编程学习网小编为您介绍的“CSS3滤镜如何实现波浪效果（附代码）”的全面内容，想了解更多关于 前端知识 内容，请继续关注编程基础学习网。