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

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

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를 영리하게 사용하여 물결 효과를 만드는 아이디어에 대한 간략한 토론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를 영리하게 사용하여 물결 효과를 만드는 아이디어에 대한 간략한 토론🎜

🎜방법 2: 변환을 통해 라디안 시뮬레이션:skew()🎜

🎜물론 실제 상황에서는 정말 어렵습니다. 너무 많은 div를 사용하는 것은 너무 낭비입니다. 그러면 div 수가 상대적으로 적을 때 앨리어싱을 최대한 제거할 수 있는 다른 방법은 없을까요? 🎜🎜여기서 라디안을 시뮬레이션하기 위해 모션 변환 프로세스 중에 하위 요소에 다양한 transform:skewY()를 추가할 수 있습니다. 🎜🎜 코드를 다시 변환해 보겠습니다. div 수를 줄이고 각 하위 div에 또 다른 transform:skewY() 애니메이션 효과를 추가하겠습니다. 🎜rrreee🎜전체 CSS 코드는 다음과 같습니다. 🎜 rrreee 🎜이해를 돕기 위해 먼저 높이 변환 애니메이션이 일관적일 때 skewY()가 추가된 하위 div의 변환을 살펴보세요. 🎜🎜🎜🎜🎜각 변환이 어떻게 이루어지는지 확인할 수 있습니다. 돌출된 들쭉날쭉한 가장자리가 있는 경우 지연된 높이 변환을 추가하면 들쭉날쭉한 효과의 대부분을 효과적으로 제거할 수 있습니다. 🎜🎜🎜🎜🎜이 시점에서 적당한 수의 div로 들쭉날쭉한 div를 제거하는 또 다른 방법이 있습니다! 위의 모든 효과의 전체 코드를 보려면 여기를 클릭하세요: 🎜

CodePen -- PureCSS Wave Effects

Mixed use

마지막으로 여러 변수 매개변수를 조정하여 여러 가지 다른 웨이브 효과를 결합하여 조합 효과를 얻을 수 있는데 이 역시 매우 좋습니다.

이것과 유사:

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

CodePen -- PureCSS Wave Effects 2

이를 바탕으로 우리 회사(Shopee)의 모회사인 Sea Group의 로고를 생각해보면 다음과 같습니다.

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

동적 로고 애니메이션을 구현하려면 이 문서의 솔루션을 사용하십시오.

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

CodePen 데모 -- PureCSS Wave - Sea Group Logo

단점

이 솔루션의 단점은 여전히 ​​​​명백합니다. :

  • 먼저 div를 낭비해야 효과를 얻을 수 있고, div가 많을수록 효과는 더 좋아집니다. 물론 일정 수준 이상으로 증가하면 렉이 발생합니다
  • 앨리어싱이 발생합니다. 완전히 제거할 수는 없습니다. 또는 이것이 실제로 유용할 수 있는 부분에 대해 이야기해 보겠습니다.

물론 이 기사의 목적은 생각을 확장하고 이 방법의 장점과 단점을 탐색하고 깨닫는 것입니다. 애니메이션의 전체 프로세스를 살펴보고 애니메이션의 음의 지연 시간을 사용합니다. 모두 참조 및 학습 의미가 있습니다. CSS는 여전히 매우 흥미롭습니다~

원본 주소: https://segmentfault.com/a/1190000040017751

저자: chokcoco

더 많은 프로그래밍 관련 지식을 보려면 프로그래밍 비디오를 방문하세요! !

위 내용은 CSS를 영리하게 사용하여 물결 효과를 만드는 아이디어에 대한 간략한 토론의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명
이 기사는 segmentfault에서 복제됩니다. 침해가 있는 경우 admin@php.cn으로 문의하시기 바랍니다. 삭제
주간 플랫폼 뉴스 : Galaxy Store, Tappable Stories, CSS Subgrid의 웹 앱주간 플랫폼 뉴스 : Galaxy Store, Tappable Stories, CSS Subgrid의 웹 앱Apr 14, 2025 am 11:20 AM

이번 주에 Roundup : Firefox는 Locksmith-Like Powers를 얻는 Samsung '의 Galaxy Store가 프로그레시브 웹 앱을 지원하기 시작하고 CSS Subgrid는 Firefox에서 배송됩니다.

주간 플랫폼 뉴스 : Internet Explorer 모드, 검색 콘솔의 속도 보고서, 알림 제한 프롬프트 제한주간 플랫폼 뉴스 : Internet Explorer 모드, 검색 콘솔의 속도 보고서, 알림 제한 프롬프트 제한Apr 14, 2025 am 11:15 AM

이번 주에 Roundup : Internet Explorer는 Edge로가는 길을 찾고 Google 검색 콘솔은 새로운 속도 보고서를 선전하고 Firefox는 Facebook의 알림을 제공합니다.

CSS 사용자 정의 속성을 갖춘 범위의 힘 (및 재미)CSS 사용자 정의 속성을 갖춘 범위의 힘 (및 재미)Apr 14, 2025 am 11:11 AM

당신은 아마도 이미 CSS 변수에 익숙 할 것입니다. 그렇지 않다면 여기 2 초 개요가 있습니다. 실제로 사용자 정의 속성이라고합니다.

우리는 프로그래머입니다우리는 프로그래머입니다Apr 14, 2025 am 11:04 AM

웹 사이트 구축은 프로그래밍입니다. HTML 및 CSS 작성은 프로그래밍입니다. 나는 프로그래머이며, 여기에 CSS- 트릭을 읽는다면, 당신은 ' re a입니다.

사이트에서 사용하지 않은 CSS를 어떻게 제거합니까?사이트에서 사용하지 않은 CSS를 어떻게 제거합니까?Apr 14, 2025 am 10:59 AM

여기에 내가 당신이 선불 아는 것을 좋아하는 것 : 이것은 어려운 문제입니다. 당신이 여기에 착륙 한 경우, 당신은 당신이 말할 수있는 도구를 가리키기를 희망하기 때문에 여기에 착륙했다면

Picture-in-Picture Web API 소개Picture-in-Picture Web API 소개Apr 14, 2025 am 10:57 AM

Picturein-Picture는 2016 년 Macos Sierra의 출시와 함께 Safari 브라우저에서 웹에서 처음으로 등장했습니다. 사용자가 팝 팝이 가능했습니다.

개츠비를 사용하여 흐릿한 효과를위한 이미지를 구성하고 준비하는 방법개츠비를 사용하여 흐릿한 효과를위한 이미지를 구성하고 준비하는 방법Apr 14, 2025 am 10:56 AM

개츠비는 훌륭한 작업 처리 및 처리 이미지를 수행합니다. 예를 들어, 수동으로 이미지 최적화로 시간을 절약 할 수 있습니다.

오, 패딩 비율은 부모 요소의 너비를 기준으로합니다.오, 패딩 비율은 부모 요소의 너비를 기준으로합니다.Apr 14, 2025 am 10:55 AM

나는 오늘 비율 기반 (%) 패딩에 대해 내 머리에 완전히 잘못되었다고 배웠습니다! 나는 항상 백분율 패딩이

See all articles

핫 AI 도구

Undresser.AI Undress

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

Clothoff.io

AI 옷 제거제

AI Hentai Generator

AI Hentai Generator

AI Hentai를 무료로 생성하십시오.

인기 기사

R.E.P.O. 에너지 결정과 그들이하는 일 (노란색 크리스탈)
3 몇 주 전By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. 최고의 그래픽 설정
3 몇 주 전By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. 아무도들을 수없는 경우 오디오를 수정하는 방법
3 몇 주 전By尊渡假赌尊渡假赌尊渡假赌
WWE 2K25 : Myrise에서 모든 것을 잠금 해제하는 방법
4 몇 주 전By尊渡假赌尊渡假赌尊渡假赌

뜨거운 도구

VSCode Windows 64비트 다운로드

VSCode Windows 64비트 다운로드

Microsoft에서 출시한 강력한 무료 IDE 편집기

드림위버 CS6

드림위버 CS6

시각적 웹 개발 도구

WebStorm Mac 버전

WebStorm Mac 버전

유용한 JavaScript 개발 도구

안전한 시험 브라우저

안전한 시험 브라우저

안전한 시험 브라우저는 온라인 시험을 안전하게 치르기 위한 보안 브라우저 환경입니다. 이 소프트웨어는 모든 컴퓨터를 안전한 워크스테이션으로 바꿔줍니다. 이는 모든 유틸리티에 대한 액세스를 제어하고 학생들이 승인되지 않은 리소스를 사용하는 것을 방지합니다.

스튜디오 13.0.1 보내기

스튜디오 13.0.1 보내기

강력한 PHP 통합 개발 환경