svg实现上下波浪效果

news/2025/2/27 6:22:56
htmledit_views">

效果图:

源码:

html"><svg class="elementor-shape-- Y" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 100" preserveAspectRatio="none">
	<path class="elementor-shape-fill--" opacity="0.33" d="M473,67.3c-203.9,88.3-263.1-34-320.3,0C66,119.1,0,59.7,0,59.7V0h1000v59.7 c0,0-62.1,26.1-94.9,29.3c-32.8,3.3-62.8-12.3-75.8-22.1C806,49.6,745.3,8.7,694.9,4.7S492.4,59,473,67.3z"></path>
	<path class="elementor-shape-fill--" opacity="0.66" d="M734,67.3c-45.5,0-77.2-23.2-129.1-39.1c-28.6-8.7-150.3-10.1-254,39.1 s-91.7-34.4-149.2,0C115.7,118.3,0,39.8,0,39.8V0h1000v36.5c0,0-28.2-18.5-92.1-18.5C810.2,18.1,775.7,67.3,734,67.3z"></path>
	<path class="elementor-shape-fill--" d="M766.1,28.9c-200-57.5-266,65.5-395.1,19.5C242,1.8,242,5.4,184.8,20.6C128,35.8,132.3,44.9,89.9,52.5C28.6,63.7,0,0,0,0 h1000c0,0-9.9,40.9-83.6,48.1S829.6,47,766.1,28.9z"></path>
</svg>


<div style="height: 300px;background-color: pink;"></div>

<svg class="elementor-shape-- X" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 100" preserveAspectRatio="none">
	<path class="elementor-shape-fill--" opacity="0.33" d="M473,67.3c-203.9,88.3-263.1-34-320.3,0C66,119.1,0,59.7,0,59.7V0h1000v59.7 c0,0-62.1,26.1-94.9,29.3c-32.8,3.3-62.8-12.3-75.8-22.1C806,49.6,745.3,8.7,694.9,4.7S492.4,59,473,67.3z"></path>
	<path class="elementor-shape-fill--" opacity="0.66" d="M734,67.3c-45.5,0-77.2-23.2-129.1-39.1c-28.6-8.7-150.3-10.1-254,39.1 s-91.7-34.4-149.2,0C115.7,118.3,0,39.8,0,39.8V0h1000v36.5c0,0-28.2-18.5-92.1-18.5C810.2,18.1,775.7,67.3,734,67.3z"></path>
	<path class="elementor-shape-fill--" d="M766.1,28.9c-200-57.5-266,65.5-395.1,19.5C242,1.8,242,5.4,184.8,20.6C128,35.8,132.3,44.9,89.9,52.5C28.6,63.7,0,0,0,0 h1000c0,0-9.9,40.9-83.6,48.1S829.6,47,766.1,28.9z"></path>
</svg>



<style>
    /* 头 */
    .Y {
        transform: rotateY(180deg);
    }
    /* 尾 */
    .X {
        transform: rotateX(180deg);
    }


.elementor-shape-fill-- {
    fill: #fff;
    transform-origin: center;
}
.elementor-shape-- {
    height: 90px;
    display: block;
    width: 100%;
    position: relative;
    background: pink;
}

</style>


http://www.niftyadmin.cn/n/5869637.html

相关文章

前端实现rsa加密功能

本文将从web和小程序两个端来实现rsa的加密功能。 一般项目的登录密码、身份证号以及一些用户敏感信息等在传输的时候需要使用加密传输&#xff0c;一般来说&#xff0c;前端只会得到后端给的公钥&#xff0c;而rsa加密&#xff0c;可以用公钥加密&#xff0c;也可以用私钥加密…

【Linux】gdb/cgdb调试工具

目录 前言&#xff1a; 一、安装gdb/cgdb 二、调试可执行程序 1.release版本和debug版本的区别 2.调试程序(命令讲解) 2.1 l n(罗列第n行代码) 2.2 r(运行代码) 2.3 b n(在第n行设置断点) 2.4 info b(查看断点信息) 2.5 d n(删除ID为n断点) 2.6 disable n/enable n…

【Project】基于Prometheus监控docker平台

一、设计背景 1.1项目简介 本项目旨在创建一个全面的容器化应用程序监控解决方案&#xff0c;基于Prometheus监控Docker平台上的各种服务。在当今的软件开发环境中&#xff0c;容器化技术已成为一种关键的工具&#xff0c;使应用程序能够更快速、可靠地交付和扩展。然而&…

谷歌推出PaliGemma 2 mix:用于多任务的视觉语言模型,开箱即用。

去年 12 月&#xff0c;谷歌推出了 PaliGemma 2 &#xff0c;这是Gemma系列中的升级版视觉语言模型。该版本包含不同大小&#xff08;3B、10B 和 28B 参数&#xff09;的预训练检查点&#xff0c;可轻松针对各种视觉语言任务和领域进行微调&#xff0c;例如图像分割、短视频字幕…

智能合约安全 | 合约无效化攻击

目录&#xff1a; 智能合约安全 合约无效化攻击 合约自毁函数 selfdestruct 攻击实现 漏洞防御 总结 智能合约安全 合约无效化攻击 合约无效化攻击类同于web安全中的逻辑漏洞中的一种 我们这里拿一个典型的例子来讲解 有这样一份智能合约, 每个人可以向其中发送1 eth 第七个…

vue测试:单元测试、组件测试、端到端测试

1、单元测试&#xff1a;单元测试通常适用于独立的业务逻辑、组件、类、模块或函数&#xff0c;不涉及 UI 渲染、网络请求或其他环境问题。 describe(increment, () > {// 测试用例 }) toBe()&#xff1a;用于严格相等比较&#xff08;&#xff09;&#xff0c;适用于原始类…

win11本地部署deepseek大模型(安装ollama+docker+open-webui)最终实现自己的项目可通过API调用投喂数据后的模型

硬件配置&#xff1a;笔记本win11&#xff0c;内存32G&#xff0c;CPU锐龙7 &#xff0c;无独显&#xff1b;只能考虑deepseek-r1:1.5b模型。 第一步&#xff1a;安装Ollama 此处不过多累赘了&#xff0c;https://ollama.com/官网选择对应的系统版本下载即可。 需要注意的是…

前端关于Cursor编辑器的了解与深度使用及对工作的便利

1. 什么是 Cursor 编辑器? Cursor 是一款基于 AI 的现代代码编辑器,类似于 VS Code,但内置了强大的 AI 功能。它的核心目标是帮助开发者更快、更智能地编写代码。 主要特点: AI 驱动的代码补全:提供上下文相关的智能代码建议。代码生成与修复:通过自然语言描述生成代码…