봐! 우리는 파도 모양을 얻고 변수를 사용하여 원의 반경을 제어 할 수 있습니다. 이것은 우리가 만들 수있는 가장 쉬운 파도 중 하나이며 이전 게시물에서 보여준 파도입니다.
i i i P를 p = m*s로 정의합니다. 여기서 m은 파의 곡률을 업데이트 할 때 조정하는 변수입니다. 이를 통해 S를 업데이트하더라도 항상 동일한 곡률을 유지할 수 있습니다.
그 그라디언트 생성
변수는 방사형 구배의 반경과 크기를 정의합니다. S 변수와 비교하면 S/2와 같습니다.
우리의 코드는 다음과 같이 보일 것입니다
를 사용하여 아래쪽으로 이동합니다. :
우리는 및 로 기본적으로 100%를 사용하여 요소를 하단으로 옮깁니다. 우리는 실제로 상단에서 100% 움직여서 실제로 바닥을 말하는 것과 동일합니다. 수학보다 읽기가 더 쉽습니다!
border-radius
mask
<code>R = sqrt(P² + S²)/2
R = sqrt(m²*S² + S²)/2
R = S*sqrt(m² + 1)/2</code>
<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
--size의 두 배나 높습니다.
--p
이것은 우리에게 55.9px의 결과를 제공합니다. --p
위의 CSS는 유효한 것처럼 보이지만 두 길이를 곱할 수 없기 때문에 작동하지 않으므로 이전 섹션에서 설명한대로 곡률을 제어하기 위해 m 변수를 도입해야합니다. <code>R = sqrt(P² + S²)/2
R = sqrt(m²*S² + S²)/2
R = S*sqrt(m² + 1)/2</code>
<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>
mask
이 업데이트 된 구문을 사용하여 로, 그 반대도 마찬가지로 웨이브의 방향을 변경합니다.
<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 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
