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做一个动态炫彩三角边框（结合clip-path+animation）

html标签div垂直居中的几种方法介绍

css3利用rotate设置字体翻转

借助SVG滤镜实现三角播放箭头定时变色

css3文字快闪切换动画效果代码

标签： animation, translate, 波浪效果, 滤镜

上面是“CSS3滤镜如何实现波浪效果（附代码）”的全面内容，想了解更多关于 前端知识 内容，请继续关注web建站教程。

当前网址：https://m.ipkd.cn/webs_2264.html

声明：本站提供的所有资源部分来自互联网，如果有侵犯您的版权或其他权益，请发送到邮箱：admin@ipkd.cn，我们会在看到邮件的第一时间内为您处理！