CSS & JS Effect – Section Design Waves

介绍

Section Waves 长这样

左边是没有 waves, 右边是加了 waves. 它的作用就是点缀. 让画面有一点 "Design" 的感觉.

参考

YouTube – CSS Wavy Background Tutorial | Section Dividers | FREE

原理

它并不是靠 CSS 做出来的. 它是 SVG. CSS 只负责一些简单的定位, 控制 width 之类的而已.

有许多线上网站可以直接做出这类的 SVG.

shapedivider.app

getwaves.io

softr – Beautiful SVG Waves

softr – Create Beautiful SVG Shapes (可以做一些菱形变种)

Step by Step

进入 shapedivider.app 网站

点击 view code, 把 HTML 和 CSS 拷贝下来

放进 HTML 和 CSS 中就可以了.

HTML

放到 section 的结尾处

  <body>

    <header>

      <div class="custom-shape-divider-bottom-1675137656">

        <svg data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120" preserveAspectRatio="none">

          <path d="M321.39,56.44c58-10.79,114.16-30.13,172-41.86,82.39-16.72,168.19-17.73,250.45-.39C823.78,31,906.67,72,985.66,92.83c70.05,18.48,146.53,26.09,214.34,3V0H0V27.35A600.21,600.21,0,0,0,321.39,56.44Z" class="shape-fill"></path>

        </svg>

      </div>

    </header>

    <section>

      <h1>Hello World</h1>

      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore et fugiat adipisci iusto earum deleniti animi dicta vitae ratione assumenda itaque, eaque rerum dolore fuga dolores, sequi quasi explicabo laborum magni! Enim laboriosam aperiam tempore consectetur officiis corporis est, veniam, alias quisquam facilis commodi soluta molestias voluptate, exercitationem architecto similique!</p>

    </section>

  </body>

CSS

body {

  header {

    background-image: url('../images/tifa1.jpg');

    background-size: cover;

    background-position: center;

    height: 60vh;

    position: relative;

    .custom-shape-divider-bottom-1675137656 {

      position: absolute;

      bottom: 0;

      left: 0;

      width: 100%;

      overflow: hidden;

      line-height: 0;

      transform: rotate(180deg);

    }

    .custom-shape-divider-bottom-1675137656 svg {

      position: relative;

      display: block;

      width: calc(142% + 1.3px);

      height: 50px;

    }

    .custom-shape-divider-bottom-1675137656 .shape-fill {

      fill: #ffffff;

    }

  }

  section {

    padding-block: 3rem 5rem;

    padding-inline: 1rem;

    min-height: 50vh;

    h1 {

      font-size: 3rem;

      color: red;

      font-weight: 500;

    }

    p {

      margin-top: 1rem;

      font-size: 1.5rem;

      line-height: 1.5;

    }

    position: relative;

    z-index: 0;

  }

}

搞定.

简单的 Section Design (without SVG)

如果不想搞 waves 也可以用一些简单的 design. CSS 就可以做出来了

比如

好不好看是其次, 我们来看看它如何实现. (学点 CSS 呗)

HTML

<body>

  <header></header>

  <section>

    <h1>Hello World</h1>

    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore et fugiat adipisci iusto earum deleniti animi dicta vitae ratione assumenda itaque, eaque rerum dolore fuga dolores, sequi quasi explicabo laborum magni! Enim laboriosam aperiam tempore consectetur officiis corporis est, veniam, alias quisquam facilis commodi soluta molestias voluptate, exercitationem architecto similique!</p>

  </section>

</body>

一个 header 图, 一个 section 字. 简单明了.

CSS

body {

  header {

    background-image: url('../images/tifa1.jpg');

    background-size: cover;

    background-position: center;

    height: 60vh;

  }

  section {

    padding-block: 2rem 5rem;

    padding-inline: 1rem;

    min-height: 50vh;

    h1 {

      font-size: 3rem;

      color: red;

      font-weight: 500;

    }

    p {

      margin-top: 1rem;

      font-size: 1.5rem;

      line-height: 1.5;

    }

  }

}

给它一些美化

效果

技巧一: 重叠

首先是让 Hello World 上去, 盖到背景, 如下

这种重叠通常是靠 margin negative 实现的.

section {

  margin-top: -80px;

}

效果

由于 section 没有背景色, 所以依然看得见 header 的图片. 只是 Hello World 重叠上去了.

我们不可以直接给 section 背景白色. 因为一旦给了白色, 那么它就全白了

section {

  margin-top: -80px;

  background-color: white;

}

效果

那怎么办呢?

技巧二 : overlay background

两个蓝色区块是 overlay, 背景色是 white. 是它们覆盖了 header 的背景图.

第二个区块利用了 transform skew 做出了斜线. 第一个区块则负责弥补第二个区块 skew 后左下角的缺口.

CSS

section {

  position: relative;

  z-index: 0;

  &::before {

    content: '';

    position: absolute;

    width: 20%;

    height: 80px;

    background-color: white;

    top: 0;

    left: 0;

    z-index: -1;

  }

  &::after {

    content: '';

    position: absolute;

    width: 80%;

    height: 80px;

    background-color: white;

    top: 0;

    left: 0;

    z-index: -1;

    transform: skew(45deg);

  }

}

这样就搞定了.

极端做法 clip any thing

还有一种做法只用 clip 就可以搞出任何形状了.

参考: Creative Section Breaks Using CSS Clip-Path

首先利用 Figma Pen 勾画出要 clip 的形状 (什么形状都画的出来了...)

然后 conver to relative clip path, 让它可以 responsive

最后用 svg + css 来完成

<svg class="svg">

  <clipPath id="my-clip-path" clipPathUnits="objectBoundingBox"><path d="data..."></path></clipPath>

</svg>

<div class="clipped"></div>

css

.svg {

  position: absolute;

  width: 0;

  height: 0;

}

.clipped {

  -webkit-clip-path: url(#my-clip-path);

  clip-path: url(#my-clip-path);

}

我觉得工程有点大。