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)
上面是“CSS3滤镜如何实现波浪效果(附代码)”的全面内容,想了解更多关于 前端知识 内容,请继续关注web建站教程。
当前网址:https://ipkd.cn/webs_2264.html
workflows工作流
图生图工作流:一键转换成高清动漫照片
去掉背景(抠图)comfyui工作流
一群蜜蜂和一个六边形蜂巢ComfyUI工作流
一套可爱的动漫生物蓬松贴纸图标
一群可爱的小老鼠ComfyUI工作流
一个女人站在海边的岩石上,飞来一只鸟
大黄蜂空中决战ComfyUI工作流
汉堡里的一只毛茸茸的小猫ComfyUI工作流
猜你喜欢
声明:本站提供的所有资源部分来自互联网,如果有侵犯您的版权或其他权益,请发送到邮箱:admin@ipkd.cn,我们会在看到邮件的第一时间内为您处理!