어떻게 CSS 에서 곡선 도형 을 그리고 애니메이션 을 보 여 줍 니까?

box-shadow 이해
우선 box-shadow 라 는 속성 을 되 돌아 보 세 요.기본 속성 용법 은 원소 에 음영 을 주 는 것 이다.
다시 간단하게 말하자면 본 고 에서 사용 할 그림자 에 관 한 첫 번 째 기교:
그림%1 개의 캡 션 을 편 집 했 습 니 다.
box-shadow 의 세 번 째,네 번 째 매개 변수 모호 반경 과 확장 반경 이 0 일 때 우 리 는 원소 크기 와 같은 음영 을 얻 을 수 있다.

div {
    width: 80px;
    height: 80px;
    border: 1px solid #333;
    box-sizing: border-box;
    box-shadow: 80px 80px 0 0 #000;
}

다음 과 같은 결 과 를 얻 었 습 니 다.

음영 은 무 거 울 수 있어 요.
두 번 째 기 교 는 box-shadow 가 다 중 음영 을 허용 하고 그들의 좌 표 는 완전히 통제 할 수 있다 는 것 이다.
예,우 리 는 아래 와 같이 하나의 요소 에 다 중 음영 을 정의 하고 음영 의 첫 번 째,두 번 째 매개 변 수 를 이용 하여 요소 에 대한 좌 표를 제어 할 수 있 습 니 다.

div {
    width: 80px;
    height: 80px;
    border: 1px solid #333;
    box-sizing: border-box;
    box-shadow:
        80px 80px 0 0 #000,
        70px 70px 0 0 #000,
        ...
        60px 60px 0 0 #000;
}

그림자 좌표 에서 삼각함수 활용
계속다음 에 우 리 는 그림자 의 좌표 에 삼각 함 수 를 도입 하려 고 한다.
왜 삼각함수 입 니까?원 의 표준 방정식 이나 타원 의 표준 방정식 이나 다른 도형 함수 가 아 닙 니까?물론 가능 합 니 다.다만 여기 서 삼각함수 의 cos 나 sin 을 통 해 CSS 를 직접 사용 하여 실현 하기 어 려 운 곡선 을 실현 할 수 있 습 니 다.
의문 을 가지 고 먼저 계속 아래로 내 려 가 우리 가 이런 곡선 을 실현 해 야 한다 고 가정 한다.

CSS 를 사용 하면 무슨 방법 이 있 을까요?
가능 한 방법 은 클립-path 나 기교가 음탕 하거나 text-decoration 의 파도 밑줄 wavy 를 사용 하거나 그 라 데 이 션 중첩 을 사용 하 는 것 입 니 다.
물론 본 고 에서 언급 할 box-shadow 와 삼각 함 수 를 사용 하 는 방법 도 있다.
삼각함수
크 크,삼각함수 안의 sin,cos 곡선 이미지 변환 을 간단히 돌 이 켜 보면 아직 선생님 께 다 돌려 드 리 지 못 했 습 니 다.

만약 우리 가 1x1 의 div 가 있다 면,그것 의 다 중 음영 은 사인/코사인 함수 의 이미지 처럼 배열 할 수 있 고,연결 하면 하나의 곡선 이 아 닙 니까?
어떻게 CSS 에서 삼각함수 sin/cos 를 사용 합 니까?
생각 은 좋 았 지만 CSS 자체 가 삼각 함 수 를 제공 하지 않 았 다.여기 서 우 리 는 Sass 를 통 해 CSS 에서 간단 한 삼각 함 수 를 실현 해 야 한다.
다행히 이전 사람 이 이 일 을 끝 내 는 것 을 도 왔 다.

trigonometry in sass

4

Sass 에서 삼각함수 계산 을 실현 한다

쉽게 말 하면 삼각함수 의 테일러 전개 식 을 빌려 Sass 함수 로 삼각함수 의 sin(),cos(),tan()을 모 의 하 는 것 이다.

전개 식 은 무한 길이 이기 때문에 Sass 함수 시 뮬 레이 션 을 사용 할 때 매우 정확 한 값 을 얻 을 수 없 지만 일상적인 그림 에서 충분히 사용 할 수 있 습 니 다.다음은 Sass 함수 시 뮬 레이 션 으로 삼각함수 의 sin(),cos(),tan()을 실현 합 니 다.

@function fact($number) {
    $value: 1;
    @if $number>0 {
        @for $i from 1 through $number {
            $value: $value * $i;
        }
    }
    @return $value;
}
 
@function pow($number, $exp) {
    $value: 1;
    @if $exp>0 {
        @for $i from 1 through $exp {
            $value: $value * $number;
        }
    }
    @else if $exp < 0 {
        @for $i from 1 through -$exp {
            $value: $value / $number;
        }
    }
    @return $value;
}
 
@function rad($angle) {
    $unit: unit($angle);
    $unitless: $angle / ($angle * 0 + 1);
    @if $unit==deg {
        $unitless: $unitless / 180 * pi();
    }
    @return $unitless;
}
 
@function pi() {
    @return 3.14159265359;
}
 
@function sin($angle) {
    $sin: 0;
    $angle: rad($angle);
    // Iterate a bunch of times.
    @for $i from 0 through 20 {
        $sin: $sin + pow(-1, $i) * pow($angle, (2 * $i + 1)) / fact(2 * $i + 1);
    }
    @return $sin;
}
 
@function cos($angle) {
    $cos: 0;
    $angle: rad($angle);
    // Iterate a bunch of times.
    @for $i from 0 through 20 {
        $cos: $cos + pow(-1, $i) * pow($angle, 2 * $i) / fact(2 * $i);
    }
    @return $cos;
}
 
@function tan($angle) {
    @return sin($angle) / cos($angle);
}

위 에서 최종 적 으로 sin,cos 테일러 가 전 개 될 때 20 층 순환 만 사 용 했 기 때문에 들 어 오 는 값 이 너무 클 때 큰 오차 가 발생 할 수 있 습 니 다.테스트 를 통 해 전입 수 치 는[-20,20]이내 이 고 정밀도 가 매우 높다.
한편,sin 함 수 를 예 로 들 면 x 의 수 치 는[-pi,pi]사이 에 있 고 모든 sin(x)의 수치 범 위 를 덮 을 수 있 기 때문에[-20,20]이 범 위 는 충분히 사용 할 수 있 습 니 다.우 리 는 들 어 오 는 x 값 을 이 지역 범위 에 떨 어 뜨리 기만 하면 큰 오차 가 발생 하지 않 습 니 다.
자,그렇게 많이 깔 았 으 니 다음 에 상술 한 sin 함 수 를 사용 해서 우리 가 이런 구 조 를 가지 고 있다 고 가정 해 보 세 요.

div {
    width: 1px;
    height: 1px;
    background: #000;
    border-radius: 50%;
}

우 리 는 다시 Sass 를 빌려 50 층 의 순환 을 실현 했다.물론 그 중에서 그림자 의 x 좌 표 는 sin 함 수 를 사용 했다.

@function shadowSet($vx, $vy) {
    $shadow : 0 0 0 0 #000;
     
    @for $i from 0 through 50 {
        $x: sin($i / 8) * $vx;
        $y: $i * $vy;
         
        $shadow: $shadow, #{$x} #{$y} 0 0 rgba(0, 0, 0, 1);
    }
     
    @return $shadow;
}
 
div {
    width: 1px;
    height: 1px;
    background: #000;
    border-radius: 50%;
    box-shadow: shadowSet(4px, 1px);
}

위의 sin($i/8)에서 8 을 나 누 는 것 은 전체 sin(x)이 들 어 오 는 역할 역 의 수치 범 위 를[0,6.25]로 하기 위해 서 입 니 다.sin(x)의 역할 역 이[0,2 pi]일 때 완전한 단일 곡선 을 그 릴 수 있 습 니 다.이 8 은 순환 횟수 에 따라 조정 할 수 있다.
실제로 우리 가 얻 은 box-shadow 는 다음 과 같다.

{
    box-shadow:
    0 0 0 0 black, 0.4986989335px 1px 0 0 black, 0.989615837px 2px 0 0 black,
    1.4650901163px 3px 0 0 black, 1.9177021544px 4px 0 0 black, 2.3403890918px 5px 0 0 black,
    2.7265550401px 6px 0 0 black, 3.0701740089px 7px 0 0 black, 3.3658839392px 8px 0 0 black,
    3.6090703764px 9px 0 0 black, 3.7959384774px 10px 0 0 black, 3.9235722281px 11px 0 0 black,
    3.9899799464px 12px 0 0 black, 3.9941253622px 13px 0 0 black, 3.9359437875px 14px 0 0 black,
    3.8163431264px 15px 0 0 black, 3.6371897073px 16px 0 0 black, 3.4012791593px 17px 0 0 black,
    3.1122927876px 18px 0 0 black, 2.7747401278px 19px 0 0 black, 2.3938885764px 20px 0 0 black,
    1.9756811944px 21px 0 0 black, 1.5266439682px 22px 0 0 black, 1.0537839735px 23px 0 0 black,
    0.5644800322px 24px 0 0 black, 0.0663675689px 25px 0 0 black, -0.4327805381px 26px 0 0 black,
    -0.9251752496px 27px 0 0 black, -1.4031329108px 28px 0 0 black, -1.8591951521px 29px 0 0 black,
    -2.286245275px 30px 0 0 black, -2.677619305px 31px 0 0 black, -3.0272099812px 32px 0 0 black,
    -3.3295620582px 33px 0 0 black, -3.5799574329px 34px 0 0 black, -3.7744887692px 35px 0 0 black,
    -3.9101204707px 36px 0 0 black, -3.9847360499px 37px 0 0 black, -3.9971711559px 38px 0 0 black,
    -3.9472317429px 39px 0 0 black, -3.8356970987px 40px 0 0 black, -3.6643076841px 41px 0 0 black,
    -3.4357379737px 42px 0 0 black, -3.1535547213px 43px 0 0 black, -2.8221613023px 44px 0 0 black,
    -2.446729px 45px 0 0 black, -2.03311631px 46px 0 0 black, -1.58777752px 47px 0 0 black,
    -1.1176619928px 48px 0 0 black, -0.630105724px 49px 0 0 black, -0.1327168662px 50px 0 0 black;
}

실제 얻 은 그림 은 다음 과 같 습 니 다.

색상 및 초기 방향 제어
위의 Sass 가 실현 하 는 이 방법 을 보십시오@function shadow Set($vx,$vy).그 중에서$vx,$vy 는 이미지 의 진폭 과 느슨 한 정 도 를 제어 하 는 데 사 용 됩 니 다.우 리 는 초기 방향 을 제어 하 는$direction 을 추가 하고 그림자 층 수 를 제어 하 는$count,색상 을 제어 하 는$color 를 추가 합 니 다.

@function shadowSet($vx, $vy, $direction, $count, $color) {
    $shadow : 0 0 0 0 $color;
     
    @for $i from 0 through $count {
        $x: sin($i / 8) * $vx * $direction;
        $y: $i * $vy;
         
        $shadow: $shadow, #{$x} #{$y} 0 0 $color;
    }
     
    @return $shadow;
}
.line {
    width: 1px;
    height: 1px;
    margin: 10vh auto;
    background: #000;
    border-radius: 50%;
    box-shadow: shadowSet(4px, 1px, 1, 50, #000);
}
 
.reverseline {
    width: 1px;
    height: 1px;
    margin: 10vh auto;
    background: #000;
    border-radius: 50%;
    box-shadow: shadowSet(8px, 2px, -1, 100, red);
}

색 조절
더 나 아가 우 리 는 Sass 의 각종 색채 함 수 를 빌려 색채 의 변 화 를 실현 할 수 있다.

@function shadowSetColor($vx, $vy, $direction, $count, $color) {
    $shadow : 0 0 0 0 $color;
     
    @for $i from 0 through $count {
         
        $color: lighten($color, .5);
         
        $x: sin($i / 8) * $vx * $direction;
        $y: $i * $vy;
         
        $shadow: $shadow, #{$x} #{$y} 0 0 $color;
    }
     
    @return $shadow;
}
 
.colorline {
    width: 5px;
    height: 5px;
    margin: 10vh auto;
    background: green;
    border-radius: 50%;
    box-shadow: shadowSetColor(8px, 2px, -1, 100, green);
}

위 에 lighten 이라는 함 수 를 빌려 색 의 밝기 값 을 바 꾸 어 색 을 밝 게 하고 새로운 색 을 만 듭 니 다.
물론 Sass 에는 다른 색상 함수 도 많 습 니 다.

adjust-hue($color,$degrees):색상 의 색상 값 을 바 꾸 어 새로운 색상 을 만 듭 니 다

lighten($color,$amount):색상 의 밝기 값 을 바 꾸 어 색상 을 밝 게 하고 새로운 색상 을 만 듭 니 다

darken($color,$amount):색상 의 밝기 값 을 바 꾸 어 색상 을 어둡게 하고 새로운 색상 을 만 듭 니 다

saturate($color,$amount):색상 의 포화 도 값 을 바 꾸 어 색상 을 포화 시 켜 새로운 색상 을 만 듭 니 다

4.567917.desature($color,$amount):색상 의 포화 도 값 을 바 꾸 어 색상 을 덜 포화 시 켜 새로운 색상 을 만 듭 니 다OK,이번 효과 보기:

@function fact($number) {
    $value: 1;
    @if $number>0 {
        @for $i from 1 through $number {
            $value: $value * $i;
        }
    }
    @return $value;
}

css-doodle 에서 사용
OK,앞의 모든 매트 리 스 는 실제 적 인 창의 적 인 아이디어 에서 사용 하기 위해 서 입 니 다.
css-doodle 에 서 는 웹 Component 특성 을 이용 하기 때 문 입 니 다.삼각함수 가 필요 할 때 자 바스 크 립 트 가 제공 하 는 Math 함 수 를 직접 사용 할 수 있어 더욱 편리 합 니 다.
웹 컴 포 넌 트 는 서로 다른 웹 기술 로 재 활용 가능 한 맞 춤 형 요 소 를 만 들 고 웹 응용 프로그램 에서 사용 할 수 있 습 니 다.
원 천 선생님,즉 css-doodl e 라 이브 러 리 의 작가 입 니 다.그의 Codepen 첫 페이지 배경 판 에서 상기 기법 으로 이 루어 진 순수한 CSS 그림 을 사용 합 니 다.

html, body {  
  height: 100%;  
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000; 
} 

<style>
  css-doodle {
    --color: @p(#010059, #52437b, #ff7a8a, #fcf594)@p([2-9a-d])@lp();
    --rule: (
      :doodle {
        @grid: 8 / 120vmin 80vmin;
        max-width: 100vw;
        background: linear-gradient(#ff7a8a, #fcf594);
        filter: hue-rotate(-22deg);
        overflow: hidden;
      }
      @size: @r(4vmin, 15vmin);
      mix-blend-mode: multiply;
      transform: translate(@m2(@r(-80%, 100%)));
      border-radius: 50%;
      --n: @p(-1, 1);
      --c: var(--color);
      box-shadow: @m100(
        calc(@sin(@n() / 10) * 1.8vmin * @var(--n))
        calc(@n() * 1vmin) 0
        @var(--c)
      );
      background: @m(@p(0, @ri(500)), (
        radial-gradient(var(--color) 50%, transparent 0)
        @r(100%) @r(100%) / @r(1px, 3px) @lr()
        no-repeat
      ));
      background-color: var(--color);
    );
  }   
</style>
<css-doodle use="var(--rule)" click-to-update></css-doodle>

나 도 이 기 교 를 써 서 한 벌 만 들 었 다.

총결산
몇 가지 말씀 드릴 게 있 습 니 다.
1.왜 box-shadow 를 사용 해 야 합 니까?직접 div 를 쌓 으 면 안 됩 니까?
네,다 중 box-shadow 를 사용 하 는 것 은 라벨 을 더 절약 할 수 있 기 때 문 입 니 다.하나의 div 로 해결 할 수 있 습 니 다.더욱 심 하 다.괴 롭 히 고 싶 으 면 다 중 그 라 데 이 션 을 사용 해도 된다.
2.상기 두 데모 모두 순수 CSS 로 그 려 진 것 입 니까?
예.css-doodle 라 이브 러 리 를 빌 렸 지만 본질은 CSS 코드 입 니 다.다만 이 라 이브 러 리 는 사용 할 수 있 는 함 수 를 많이 밀봉 하 였 습 니 다.css-doodle
3.무슨 소 용이 있 습 니까?
음,쓸모 가 있 는 지 없 는 지 는 철학 문제 다.적어도 난 재 밌 어.
이상 은 CSS 에서 곡선 도형 을 그 리 는 방법 과 애니메이션 을 보 여 주 는 상세 한 내용 입 니 다.CSS 에서 곡선 도형 을 그 리 는 것 과 애니메이션 을 보 여 주 는 데 관 한 자 료 는 다른 관련 글 에 주목 하 십시오!