CSS에서 물결 모양 및 패턴을 만드는 방법

CSS에서 파도 모양을 만드는 것은 어려울 수 있습니다. 우리는 종종

속성과 많은 근사치를 사용하여 파동 효과를 시뮬레이션하려고 노력하지만 파도 패턴을 다룰 때 더 복잡해질 수 있습니다.

SVG는 파도 모양을 만드는보다 효율적인 방법이지만 CSS는 좋은 결과를 얻을 수 있으며 코드가 너무 복잡 할 필요는 없습니다. 더 좋은 점은 프로세스를 단순화하기 위해 온라인 생성기를 제공합니다! border-radius 생성기를 사용하여 생성 된 CSS 코드에는 두 개의 그라디언트와 하나의 CSS 속성 만 포함되어 있으며, 그게 전부이며 다양한 웨이브 모양과 패턴을 만들 수 있습니다. 또한 파도의 크기와 곡률을 쉽게 제어 할 수 있습니다.

일부 값은 "마법 숫자"처럼 보일 수 있지만 실제로는 논리적 인 기초가 있습니다. 우리는 코드를 해부하고 파도 창조의 모든 비밀을 밝혀 낼 것입니다.

이 기사는 다양한 지그재그, 범위 제한, 가리비 및 물결 모양의 경계를 만드는 것에 대한 이전 기사의 후속 조치입니다. 여기에 설명 된 동일한 기술을 사용하지만 더 자세히 사용 하므로이 기사를 읽는 것이 좋습니다.

파도 뒤에있는 수학적 원리 mask 엄격하게 말하면, 파도 모양을 만들기위한 마법의 공식은 없습니다. 상단 및 하부 곡선을 가진 모든 모양을 웨이브라고 할 수 있으므로 복잡한 수학적 계산으로 제한하지 않습니다. 대신, 우리는 기하학적 기준을 사용하여 파도를 재현 할 것입니다.

두 개의 원형 모양을 사용하여 간단한 예로 시작하겠습니다. 우리는 서로 인접한 동일한 반경을 가진 두 개의 원이 있습니다. 그 빨간 선을 보셨습니까? 그것은 첫 번째 라운드의 상단 절반과 2 라운드의 하단 절반을 다룹니다. 이제 그 줄을 가지고 반복한다고 상상해보십시오.

우리는 파도를 보았다. 이제 다음 결과를 얻으려면 하단 (또는 상단) 섹션을 채우자

봐! 우리는 파도 모양을 얻고 변수를 사용하여 원의 반경을 제어 할 수 있습니다. 이것은 우리가 만들 수있는 가장 쉬운 파도 중 하나이며 이전 게시물에서 보여준 파도입니다.

첫 번째 전설을 취하고 서클을 조금 움직여서 복잡성을 더 해 보겠습니다. 우리는 여전히 동일한 반경을 가진 두 개의 원이 있지만 더 이상 수평으로 정렬되지 않습니다. 이 경우 빨간색 선은 더 이상 각 원의 영역의 절반을 덮지 않고 더 작은 영역을 덮습니다. 이 영역은 점선으로 제한됩니다. 라인은 두 개의 원이 만나는 지점을 통과합니다.

이제 그 선을 가져 와서 반복하면 더 부드러운 파도를 얻을 수 있습니다.

나는 당신이 이해한다고 생각합니다. 원의 위치와 크기를 제어함으로써 원하는 파도를 만들 수 있습니다. 우리는 그들에 대한 변수를 만들 수도 있습니다.

온라인 생성기에서는 파도를 제어하기 위해 두 가지 입력을 사용한다는 것을 알았을 것입니다. 위에서 언급 한 변수에 매핑됩니다. S는 "파의 크기"이고 P는 "파의 곡률"입니다.

i i i P를 p = m*s로 정의합니다. 여기서 m은 파의 곡률을 업데이트 할 때 조정하는 변수입니다. 이를 통해 S를 업데이트하더라도 항상 동일한 곡률을 유지할 수 있습니다.

m은 0과 2 사이의 값 일 수 있습니다. 0은 두 개의 원이 수평으로 정렬되는 첫 번째 특별 사례를 제공합니다. 2는 최대 값입니다. 우리는 더 커질 수 있지만 약간의 테스트 후 2보다 큰 값이 평평한 형태가 좋지 않다는 것을 알았습니다.

원형 모양의 반경을 잊지 마십시오! 다음과 같이 S와 P를 사용하여 정의 할 수도 있습니다.

m이 0과 같으면 (즉, p는 0과 같음) r = s/2를 갖습니다.

우리는이 모든 것을 CSS의 그라디언트로 변환하는 데 필요한 모든 것을 가지고 있습니다!

그 그라디언트 생성 우리의 파도는 원을 사용하고 원과 관련하여 방사형 구배에 대해 이야기하고 있습니다. 두 원이 파도를 정의하기 때문에 2 개의 방사형 구배를 논리적으로 사용합니다.

우리는 p가 0과 같은 특별한 경우부터 시작합니다. 이것은 첫 번째 그라디언트 그림입니다 : 이 그라디언트는 첫 번째 곡률을 생성하면서 전체 바닥 영역을 채우는 동안 파도의 "물"을 채 웁니다.

<code>R = sqrt(P² + S²)/2
R = sqrt(m²*S² + S²)/2
R = S*sqrt(m² + 1)/2</code>

변수는 방사형 구배의 반경과 크기를 정의합니다. S 변수와 비교하면 S/2와 같습니다.

지금 두 번째 그라디언트를 추가하겠습니다 : 두 번째 그라디언트는 우리의 파도를 완성하기위한 원일뿐입니다.

이전 게시물을 보면 내가 한 일을 반복하고 있음을 알게 될 것입니다.

두 기사를 읽었지만 그라디언트 구성은 동일하지 않습니다.

이것은 동일한 결과를 달성하기 위해 다른 그라디언트 구성을 사용할 수 있기 때문입니다. 두 구성을 비교하면 약간 다른 정렬이 표시되지만 트릭은 동일합니다. 그라디언트에 익숙하지 않다면 혼란 스러울 수 있지만 걱정하지 마십시오. 일부 연습을 사용하면 익숙해지며 다른 구문이 동일한 결과를 생성 할 수 있음을 알게됩니다.

이것은 우리의 첫 번째 물결에 대한 완전한 코드입니다 :

이제이 코드를 가져 와서 조정하여 원하는 웨이브를 만들기 위해 완전히 사용할 수있는 변수를 소개하도록 조정합시다. 이전 섹션에서 보았 듯이 주요 요령은 원이 더 이상 정렬되지 않도록 원을 움직여 각 원의 위치를 ​​업데이트하는 것입니다. 우리는 첫 번째 것을 위로 올리고 두 번째는 아래로 움직입니다.

우리의 코드는 다음과 같이 보일 것입니다

나는 각 원의 중심 위치를 정의하기 위해 새로운

<code>.wave {
  --size: 50px;

  mask: radial-gradient(var(--size) at 50% 0%, #0000 99%, red 101%) 
    50% var(--size)/calc(4 * var(--size)) 100% repeat-x;
}</code>

변수를 도입했습니다. 첫 번째 그라디언트는 를 사용하므로 중앙이 위쪽으로 이동하고 두 번째 그라디언트는

를 사용하여 아래쪽으로 이동합니다. --size 데모는 천 단어보다 낫다 :

원은 서로 정렬되거나 서로 닿지 않습니다. 우리는 반경을 바꾸지 않고 멀리 분리하여 파도를 잃었습니다. 그러나 이전에 사용 된 것과 동일한 수학적 방법을 사용하여 새로운 반경을 계산하여 이러한 문제를 해결할 수 있습니다. r = sqrt (p² s²)/2를 기억하십시오. 우리의 경우 는 s/2와 같다. 따라서 중심 지점 사이의 거리는

: --size의 두 배나 높습니다. --p 이것은 우리에게 55.9px의 결과를 제공합니다. --p 우리의 파도가 돌아 왔습니다! CSS에 방정식을 삽입 해 봅시다 :

위의 CSS는 유효한 것처럼 보이지만 두 길이를 곱할 수 없기 때문에 작동하지 않으므로 이전 섹션에서 설명한대로 곡률을 제어하기 위해 m 변수를 도입해야합니다.

<code>R = sqrt(P² + S²)/2
R = sqrt(m²*S² + S²)/2
R = S*sqrt(m² + 1)/2</code>

이것은 매우 시원합니다. 속성을 ​​사용하여 모든 요소에 적용 할 수있는 멋진 파도를 얻으려면 두 개의 그라디언트 만 필요합니다. 시도하고 할 필요가 없습니다 - 두 가지 변수를 업데이트하면됩니다!

리버스 웨이브 우리가 파도가 다른 방향으로 움직이기를 원한다면 어떻게 "물"대신 "하늘"을 채 웁니다. 믿거 나 말거나, 우리는 두 가지 값 만 업데이트하면됩니다 :

내가 한 모든 것은 위와 같이 100%동일한 오프셋을 추가하는 것입니다. 결과는 다음과 같습니다.

<code>.wave {
  --size: 50px;

  mask: radial-gradient(var(--size) at 50% 0%, #0000 99%, red 101%) 
    50% var(--size)/calc(4 * var(--size)) 100% repeat-x;
}</code>

더 쉽게 키워드 가치 친화적 인 구문을 사용하는 것을 고려할 수 있습니다.

우리는 및

키워드를 사용하여 가장자리와 오프셋을 지정합니다. 기본적으로 브라우저 기본값은

<code>radial-gradient(var(--size) at 50% var(--size), blue 99%, #0000 101%) 
  calc(50% - 2*var(--size)) 0/calc(4 * var(--size)) 100%</code>

및

로 기본적으로 100%를 사용하여 요소를 하단으로 옮깁니다. 우리는 실제로 상단에서 100% 움직여서 실제로 바닥을 말하는 것과 동일합니다. 수학보다 읽기가 더 쉽습니다! mask 이 업데이트 된 구문을 사용하여

를

로, 그 반대도 마찬가지로 웨이브의 방향을 변경합니다.

상단 및 하단파를 모두 얻으려면 모든 그라디언트를 하나의 진술로 결합합니다.

코드를 확인하면 모든 그라디언트를 결합하는 것 외에도 높이가 100%에서 51%로 줄어들어 요소의 절반을 커버 할 수 있습니다. 예, 51%. 간격을 피하기 위해 작은 겹침을하기 위해서는 추가로 작은 비율이 필요합니다.

<code>.wave {
  --size: 50px;

  mask:
    radial-gradient(var(--size) at 50% var(--size),#000 99%, #0000 101%) 
      calc(50% - 2*var(--size)) 0/calc(4 * var(--size)) 100%,
    radial-gradient(var(--size) at 50% 0px, #0000 99%, #000 101%) 
      50% var(--size)/calc(4 * var(--size)) 100% repeat-x;
}</code>

왼쪽과 오른쪽은 어떻습니까?

이것은 당신의 숙제입니다! 상단과 하단에서 한 일을 활용하고 값을 업데이트하여 오른쪽과 왼쪽의 값을 얻으십시오. 걱정하지 마십시오. 쉽습니다. 당신이해야 할 유일한 일은 값을 바꾸는 것입니다.

문제가있는 경우 언제든지 온라인 생성기를 사용하여 코드를 확인하고 결과를 시각화 할 수 있습니다.

... (나머지 컨텐츠는 언어와 표현이 조정되고 그림과 코드 블록이 유지된다는 점을 제외하고 원본 텍스트와 유사합니다)

<code>.wave {
  --size: 50px;
  --p: 25px;

  mask:
    radial-gradient(var(--size) at 50% calc(var(--size) + var(--p)), #000 99%, #0000 101%) 
      calc(50% - 2*var(--size)) 0/calc(4 * var(--size)) 100%,
    radial-gradient(var(--size) at 50% calc(-1*var(--p)), #0000 99%, #000 101%) 
      50% var(--size) / calc(4 * var(--size)) 100% repeat-x;
}</code>

위 내용은 CSS에서 물결 모양 및 패턴을 만드는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!