집 > 기사 > 웹 프론트엔드 > CSS를 영리하게 사용하여 물결 효과를 만드는 아이디어에 대한 간략한 토론

CSS를 영리하게 사용하여 물결 효과를 만드는 아이디어에 대한 간략한 토론

青灯夜游앞으로: 2021-05-25 09:55:312033검색

이 기사에서는 CSS를 사용하여 물결 효과를 만드는 방법을 보여줍니다. 도움이 필요한 친구들이 모두 참고할 수 있기를 바랍니다.

이 기사에서는 CSS를 사용하여 얻은 또 다른 물결 효과를 소개합니다. 아이디어는 매우 흥미롭습니다.

곡선삼각형의 넓이를 구하기 위해 정적분부터 시작해보자

본론에 들어가기에 앞서 고급수학에서 곡선의 넓이를 구할 수 있는지 살펴보겠습니다. 정적분을 통한 이차 함수의 측면 삼각형.

곡선 아래의 면적을 n개의 얇고 긴 직사각형으로 나눌 수 있습니다. n이 무한대에 가까워지면 모든 직사각형의 면적은 곡선 모서리 도형의 면적과 같습니다.

두 개의 간단한 도식 다이어그램, 사진은 에서 가져온 것입니다. 적분을 사용하여 면적을 찾을 수 있는 이유는 무엇입니까? :

CSS를 영리하게 사용하여 물결 효과를 만드는 아이디어에 대한 간략한 토론

n이 무한대에 가까워지면 모든 직사각형의 면적은 곡선 그래픽의 면적과 같습니다.

CSS를 영리하게 사용하여 물결 효과를 만드는 아이디어에 대한 간략한 토론

이 아이디어를 사용하면 다음을 통해 CSS에서 선을 시뮬레이션할 수도 있습니다. 여러 div 곡선 가장자리, 즉 물결 모양 선입니다.

1단계. 그래픽을 여러 부분으로 자르기

먼저 상위 컨테이너 아래에 12개의 하위 div가 있는 상위 컨테이너를 정의할 수 있습니다.

<div class="g-container">
  <div class="g-item"></div>
  <div class="g-item"></div>
  <div class="g-item"></div>
  <div class="g-item"></div>
  <div class="g-item"></div>
  <div class="g-item"></div>
  <div class="g-item"></div>
  <div class="g-item"></div>
  <div class="g-item"></div>
  <div class="g-item"></div>
  <div class="g-item"></div>
  <div class="g-item"></div>
</div>

간단하게 레이아웃하려면 flex 레이아웃을 사용하세요. 이러한 그래픽을 얻으면 각 하위 요소의 높이가 동일합니다. flex 布局，简单布局一下，得到这样一个图形，每个子元素等高：

.g-container {
    width: 200px;
    height: 200px;
    border: 2px solid #fff;
    display: flex;
    align-items: flex-end;
}

.g-item {
    flex-grow: 1;
    height: 60px;
    background-color: #fff;
}

效果如下：

CSS를 영리하게 사용하여 물결 효과를 만드는 아이디어에 대한 간략한 토론

Step 2. 让每个子元素以不同负延迟运行高度变换动画

接下来，简单改造下，我们需要让这个图动起来，通过改变每个子元素的高度实现：

.g-item {
    flex-grow: 1;
    height: 60px;
    background-color: #000;
    animation: heightChange 1s infinite ease-in-out alternate;
}

@keyframes heightChange {
    from {
        height: 60px;
    }
    to {
        height: 90px;
    }
}

效果如下：

CSS를 영리하게 사용하여 물결 효과를 만드는 아이디어에 대한 간략한 토론

接下来，只需要，让每个子元素的动画顺序设定一个不同时间的负延迟即可，就可以得到一个初步的波浪效果，这里为了减少工作量，我们借助 SASS 实现：

$count: 12;
$speed: 1s;

.g-item {
    --f: #{$speed / -12};
    flex-grow: 1;
    height: 60px;
    background-color: #000;
    animation: heightChange $speed infinite ease-in-out alternate;
}

@for $i from 0 to $count {
    .g-item:nth-child(#{$i + 1}) {
        animation-delay: calc(var(--f) * #{$i});
    }
}

@keyframes heightChange {
    from {
        height: 60px;
    }
    to {
        height: 90px;
    }
}

这样，我们就得到了一个初步的波浪效果：

CSS를 영리하게 사용하여 물결 효과를 만드는 아이디어에 대한 간략한 토론

Step 3. 消除锯齿

可以看到，上述的波浪动画是存在一定的锯齿的，接下来我们要做的就是尽可能的消除掉这些锯齿。

法一：增加 div 的数量

按照一开始使用定积分求曲边图形面积的思想，我们只需要尽可能增加子 div 的数量即可，当 div 的数量无穷多的时候，锯齿也就会消失不见。

我们可以尝试将上述的 12 个子 div，替换成 120 个试下，一个一个写 120 个 div 太费力了，我们这里借助 Pug 模板引擎：

div.g-container
 -for(var i=0; i<120; i++)
    div.g-item

对于 CSS 代码，只需要改动动画延迟的时间即可，120 个子 div 的负延迟都控制在 1s 内：

// 12 -- 120
$count: 120;
$speed: 1s;

.g-item {
    // 注意，只有这里发生了变化
    --f: #{$speed / -120};
    flex-grow: 1;
    height: 60px;
    background-color: #000;
    animation: heightChange $speed infinite ease-in-out alternate;
}

@for $i from 0 to $count {
    .g-item:nth-child(#{$i + 1}) {
        animation-delay: calc(var(--f) * #{$i});
    }
}

这样，我们就可以得到一条比较光滑的曲线啦：

CSS를 영리하게 사용하여 물결 효과를 만드는 아이디어에 대한 간략한 토론

法二：通过 transform: skew() 模拟弧度

当然，实际情况，使用那么多个 div 实在是太浪费了，那么有没有其它方法在 div 数量比较少的情况下，也能够尽可能的消除锯齿呢？

这里，我们可以尝试给子元素在运动变换的过程中添加不同的 transform: skewY() 去模拟弧度。

再改造下代码，我们将 div 的数量调低，并且给每个子 div 再添加一个 transform: skewY() 的动画效果：

div.g-container
 -for(var i=0; i<24; i++)
    div.g-item

完整的 CSS 代码如下：

$count: 24;
$speed: 1s;

.g-item {
    // 注意，只有这里发生了变化
    --f: #{$speed / -24};
    flex-grow: 1;
    height: 60px;
    background-color: #000;
    animation: 
        heightChange $speed infinite ease-in-out alternate,
        skewChange $speed infinite ease-in-out alternate;
}

@for $i from 0 to $count {
    .g-item:nth-child(#{$i + 1}) {
        animation-delay: 
            calc(var(--f) * #{$i}), 
            calc(var(--f) * #{$i} - #{$speed / 2});
    }
}

@keyframes heightChange {
    from {
        height: var(--h);
    }
    to {
        height: calc(var(--h) + 30px);
    }
}

@keyframes skewChange {
    from {
        transform: skewY(20deg);
    }
    to {
        transform: skewY(-20deg);
    }
}

为了方便理解，首先看看，高度变换动画一致的情况下，子 div 的添加了 skewY()rrreee

효과는 다음과 같습니다:

CSS를 영리하게 사용하여 물결 효과를 만드는 아이디어에 대한 간략한 토론

2단계. 각 하위 요소가 서로 다른 음수 지연을 사용하여 높이 변환 애니메이션을 실행하도록 합니다

CSS를 영리하게 사용하여 물결 효과를 만드는 아이디어에 대한 간략한 토론 다음으로 간단한 변환으로 각 하위 요소의 높이를 변경하여 이 그림을 움직이게 해야 합니다.

rrreee

효과는 다음과 같습니다.

🎜

CSS를 영리하게 사용하여 물결 효과를 만드는 아이디어에 대한 간략한 토론

🎜🎜다음으로 각 어린이의 애니메이션 시퀀스에 대해 서로 다른 시간의 음수 지연만 설정하면 됩니다. 요소이며 예비 파동 효과를 얻을 수 있습니다. 작업 부하를 줄이기 위해 SASS를 사용하여 구현합니다: 🎜rrreee🎜이 방법으로 예비 파동 효과를 얻습니다: 🎜🎜 CSS를 영리하게 사용하여 물결 효과를 만드는 아이디어에 대한 간략한 토론

🎜

🎜3단계 . 앨리어싱 제거🎜🎜🎜예. 보시다시피 위의 물결 애니메이션에는 들쭉날쭉한 가장자리가 있습니다. 다음으로 해야 할 일은 이러한 들쭉날쭉한 가장자리를 최대한 제거하는 것입니다. 🎜

🎜방법 1: div 수를 늘리세요🎜

🎜정적분을 사용하여 곡선 가장자리 그래픽의 영역을 찾는 아이디어에 따라 처음에는 sub-div 수를 최대한 늘리면 됩니다. 수가 충분하면 들쭉날쭉한 가장자리가 사라집니다. 🎜🎜위의 12개 하위 div를 120개로 대체해 볼 수 있습니다. 120개의 div를 하나씩 작성하는 것은 너무 힘듭니다. 여기서는 Pug🎜 템플릿 엔진: 🎜rrreee🎜CSS 코드의 경우 애니메이션 지연 시간만 변경하면 됩니다. 120개 하위 div의 음수 지연은 1초 이내로 제어됩니다. 🎜rrreee🎜 이런 방식으로 더 부드러운 곡선을 얻을 수 있습니다: 🎜🎜 CSS를 영리하게 사용하여 물결 효과를 만드는 아이디어에 대한 간략한 토론

🎜