程序员经验分享-hwhale

在 CSS 中创建多层 SVG 波浪

2024-01-09

我正在尝试在网站上创建波浪效果像这样 https://dribbble.com/shots/5115653-Augmented-reality-web-concept-work/attachments其中有一个主要颜色的波浪（深紫色），然后沿着边缘有浅色的波浪。我尝试使用 CSS 位置和顶部定位多个路径，但无法让它们工作。

这是我的基本波浪：

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320">
    <path class="green" fill="#0b5b41" fill-opacity="1" d="M0,224L60,213.3C120,203,240,181,360,186.7C480,192,600,224,720,245.3C840,267,960,277,1080,250.7C1200,224,1320,160,1380,128L1440,96L1440,320L1380,320C1320,320,1200,320,1080,320C960,320,840,320,720,320C600,320,480,320,360,320C240,320,120,320,60,320L0,320Z"></path>
</svg>

或许如此

三个独立的波浪。每个波浪的颜色可以根据您的喜好进行选择。

该应用程序反应灵敏，并且在所有现代浏览器中看起来都相同

.w1 {
fill:#0E7452;
opacity:0.4;
}
.w2 {
fill:#0E7452;
opacity:0.7;
}
.w3 {
fill:#0B5B41;
}
<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 1440 320" version="1.1">
  <path class="w1"  d="m-1.2 155.9c0 0 45.8-1.8 68.7-0.8 96.9 4.3 213.1 15.7 289.6 28.9 120 19 241.7 41.5 361.7 62.8 120 21.7 269.8 29.2 389.8 2.9C1228.6 222.9 1320 108 1380 76l60-32v224l-60 52-293-1.1H734L363.5 317.2 75.8 322.4 0 268c0 0-1.2-81.2-1.2-112.1z"/>
  
  <path class="w2"   d="m-1.2 186.8c0 0 45-1.1 67.5-2 190.8-7.9 184.4-4 297.5 2 120 5.3 241.2 42.3 361.2 63.6 120 21.7 245 23 365-3.3 120-26.7 194-95.4 290.1-145.1 20.1-10.4 60-32 60-32V294H1380 1080 720 360 60 0Z" />

  <path class="w3" d="M0 224 60 213.3C120 203 228.9 182.5 348.9 188.2 468.9 193.5 600 224 720 245.3 840 267 960 277 1080 250.7 1200 224 1320 160 1380 128l60-32V320H1380 1080 720 360 60 0Z" />
</svg>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

css

SVG

在 CSS 中创建多层 SVG 波浪 的相关文章

  • jquery 文本旋转

    我在 div 中有一个简单的文本 如下所示 div div This is an example text div div 我希望 div 内的文本旋转 20 30 度 我已经找到了this https stackoverflow com

  • 基本 CSS 问题 - 父 DIV 与未知子 DIV、居中父 DIV

    当我将 DIV 居中时 我会给它一个宽度并放置margin auto然而 我对这种情况有两个问题 该父 DIV 内将有 2 或 3 个带有 float left 的 DIV 子 DIVS 的宽度不会改变 但数量可能会改变 2 或 3 因此

  • Twitter 的 Bootstrap 是否像 Skeleton 一样适合移动设备？

    骨架经过缩放以适应移动浏览器 遵循以下原则响应式网页设计 http www abookapart com products responsive web design Bootstrap 提供同样的功能吗 还没有 http groups g

  • onclick 函数上的 CSS 选择器

    有没有办法让CSS选择器onclick function 您可以在onclick https stackoverflow com questions 24365416 select element which have specific a

  • 如何仅突出显示嵌套表的最里面的表行？

    我有几个嵌套表 我想突出显示鼠标指针下方的最里面的行 我怎样才能做到这一点 一些提示 我使用嵌套表来显示递归表格数据 表可以嵌套 10 层 嵌套正如您所期望的那样 table tr td table tr td table tr td 可能

  • 背景大小：封面在视网膜显示屏上看起来像素化

    可以看到我正在开发的网站here http ourcityourstory com dev 如果你查看 iPad 3 或 iPhone 4 上的 关于 或 联系 部分 背景看起来全都是疯狂的像素化 我有background size set

  • 控制缓存过期

    通过 Google 网站管理员工具的 PageSpeed 分析器运行我的网页后 它向我报告我的资源没有被缓存 下面是我的 htaccess 文件中直接取自 H5BP 的代码 我是否正确地假设以下过期时间设置正确 但我的实现中出现了问题 或者

  • 如何从iframe访问文档中的？

    I have an iframe 我在检查器元素中发现 img 标签位于具有 body 标签的 document 中 img src Images landingpage jpg 我需要访问此图像 landing page jpg 以便更改

  • 引用 url() 的值真的有必要吗？

    我应该在样式表中使用以下哪一项 Example 1 background image url image png Example 2 background image url image png Example 3 background i

  • 外部 css 文件在 Flask 框架中不起作用

    我正在尝试在我的 html 文件中使用外部 css 文件 起初我使用 bootstrap 框架 效果很好 然而 当我尝试通过添加自定义的css文件来自定义网页时 它根本不起作用 这是我的代码

  • 在具有不同边框的 div 上调用函数

    我有一个div对于一个名为 ball 的类 div 的每个边缘都有一个边框 顶部边框 左侧边框等 当用户单击每个边框上的边框时 我想用 JavaScript 触发不同的事件 例如 用户点击边框顶部console log top 等等 HMT

  • 如何防止桌面浏览器（Chrome、Safari）缩放网页

    我尝试使用以下元视图端口标记来防止浏览器缩放 但这不起作用 我知道这是可能的 因为我的缩放在此网站上被阻止 未来主义 xyz http futurism xyz 该网站的视口标签是这样的

  • 将图例标签设置为块

    我已经在以下网址设置了我的问题的演示 http jsfiddle net YHHg7 4 http jsfiddle net YHHg7 4 我正在尝试执行以下操作 legend display block border bottom 1p

  • 在Android中将半径边框绘制到imageview或textview的一个角落

    我需要在我的应用程序中为图像视图或文本视图绘制边框 但我只需要在一个角落绘制它 就像图像一样 我做了一个形状 但我在所有 4 个边上都有边框

  • 如何计算单击的甜甜圈元素的中点与负 y 轴之间的角度

    Consider the following codesample donut chart using jquery flot http jsfiddle net c5zsg6y3 26 now as i have added the im

  • CSS 选择器：Active 不适用于 IE8 中的子元素单击

    我有以下 HTML 结构 div class wrapper div class control clickable img src logo png div div 以及以下 CSS control border 1px solid 00

  • SVG 文本无法在 Chrome 或 Safari 中呈现

    我有一些 SVG 文本在 Firefox 上运行良好 但在 Chrome 和 Safari 中却没有出现 我努力了 向 svg 容器添加填充 以防文本被隔断 从文本中删除 xml space preserve 添加内联填充颜色

  • 文本的彩虹色

    rainbowtext background image webkit gradient linear left top right top color stop 0 f22 color stop 0 15 f2f color stop 0

  • 嵌套 DIV 的类似斑马的 CSS 样式

    我嵌套了 DIV 元素 但我不知道嵌套的级别 我需要每个都有与其父级不同的背景 创建类似斑马的颜色 我只使用两种背景 深色和白色 效果需要类似于在容器中设置奇数和偶数子级的样式 但在我的例子中 子级是嵌套的 我可以使用每个嵌套元素的规则来做

  • CSS 标签“object-fit:cover”不会在 Chrome 中裁剪/剪辑视频

    CSS tag object fit cover无法按预期在 Chrome 中剪辑 裁剪视频 这种情况仅适用于视频且仅在 Chrome 中发生 图像在 Chrome 中正常 在所有其他经过测试的浏览器中 图像和视频都工作正常 The beh

随机推荐

热门标签