如何用CSS实现波浪形Footer？React组件开发技术求助

核心思路 #

用SVG实现多波浪是最灵活的方案，比CSS clip-path更容易控制多层波浪的形状、颜色和层次感，新手也能快速上手，不需要复杂的数学计算。

实现步骤 #

1. 拆分原子组件

   • 先把单个波浪做成Wave分子组件（Molecule），方便复用和调整参数
   • 再把Footer整体作为FooterOrganism组织组件，组合波浪和底部内容模块

2. 代码实现
   首先是可复用的Wave分子组件：

   import React from 'react';
   
   const Wave = ({ color, offsetY, opacity = 1 }) => {
     return (
       <svg
         viewBox="0 0 1440 100"
         className="wave-svg"
         style={{
           position: 'absolute',
           bottom: 0,
           left: 0,
           right: 0,
           transform: `translateY(${offsetY}px)`,
           opacity,
         }}
       >
         <path
           fill={color}
           d="M0,64L48,69.3C96,75,192,85,288,80C384,75,480,53,576,48C672,43,768,53,864,64C960,75,1056,85,1152,80C1248,75,1344,53,1392,42.7L1440,32L1440,100L1392,100C1344,100,1248,100,1152,100C1056,100,960,100,864,100C768,100,672,100,576,100C480,100,384,100,288,100C192,100,96,100,48,100L0,100Z"
         ></path>
       </svg>
     );
   };
   
   export default Wave;
   

   然后是符合原子设计的FooterOrganism组织组件：

   import React from 'react';
   import Wave from './Wave';
   import './FooterOrganism.css';
   
   const FooterOrganism = () => {
     return (
       <footer className="footer-organism">
         {/* 多层波浪，通过偏移量、颜色、透明度制造层次感 */}
         <Wave color="#007bff" offsetY={0} opacity={1} />
         <Wave color="#0056b3" offsetY={10} opacity={0.8} />
         <Wave color="#003d80" offsetY={20} opacity={0.6} />
   
         {/* Footer内容区域，放在波浪上层 */}
         <div className="footer-content">
           <p>© 2024 你的网站名称</p>
           <div className="footer-links">
             <a href="/about">关于我们</a>
             <a href="/privacy">隐私政策</a>
             <a href="/contact">联系我们</a>
           </div>
         </div>
       </footer>
     );
   };
   
   export default FooterOrganism;
   

   配套的CSS样式文件FooterOrganism.css：

   .footer-organism {
     position: relative;
     width: 100%;
     min-height: 180px;
     background-color: #003d80; /* 和最底层波浪颜色统一 */
     color: white;
     padding-top: 60px; /* 给波浪留出显示空间 */
     box-sizing: border-box;
   }
   
   .wave-svg {
     width: 100%;
     height: auto;
   }
   
   .footer-content {
     position: relative;
     z-index: 10; /* 确保内容不被波浪遮挡 */
     text-align: center;
     padding: 0 20px;
   }
   
   .footer-links {
     margin-top: 10px;
   }
   
   .footer-links a {
     color: white;
     margin: 0 15px;
     text-decoration: none;
   }
   
   .footer-links a:hover {
     text-decoration: underline;
   }
   

3. 自定义波浪形状

   • 如果你想调整波浪的起伏高度、频率，可以搜索“SVG波浪生成工具”，在线调整参数后复制生成的path标签里的d属性替换即可
   • 每层波浪的offsetY控制上下偏移距离，opacity控制透明度，轻松调出渐变层次感

新手注意事项 #

• SVG的viewBox属性要保持正确，确保波浪能自适应不同屏幕宽度
• 内容区域必须设置z-index，避免被下层波浪遮挡
• 原子设计的核心是拆分可复用模块，这个Wave组件以后可以直接用到其他需要波浪效果的地方

内容的提问来源于stack exchange，提问作者Fabi