비틀 거리는 CSS 전환

요소가 움직이는 요소와 같은 요소가 호버 할 때 흥미로운 비주얼을 구현하는 것은 매우 간단합니다. 그러나 여러 목록 항목이 있고 각 목록 항목의 이동이 인터레이스 애니메이션 시간을 갖기를 원한다면 어떻게 달성 할 수 있습니까?

다음 코드는 transition-delay 속성을 통해 인터리브 된 애니메이션 효과를 달성하는 방법을 보여줍니다. 먼저 각 목록 항목을 선택하고 다른 지연 시간을 적용합니다.

 @Media (호버 : 호버) {
  .list li a span {
    변환 : Translatey (100px);
    전환 : 0.2S;
  }
  .list : 호버 스팬 {
    변환 : Translatey (0);
  }
  .list li : nth-Child (1) span {
    전환 지연 : 0S;
  }
  .list li : nth-Child (2) span {
    전환 지연 : 0.05S;
  }
  .list li : nth-Child (3) span {
    전환-벨리 : 0.1S;
  }
  .list li : nth-Child (4) span {
    전환 지연 : 0.15s;
  }
  .list li : nth-Child (5) span {
    전이-텔레이 : 0.2S;
  }
  .list li : nth-Child (6) span {
    전환-지연 : 0.25S;
  }
}

대기 시간을보다 유연하게 제어하려면 CSS를 사용하여 속성을 사용자 정의 할 수 있습니다.

 @Media (호버 : 호버) {
  .목록 {
    -지연 : 0.05S;
  }
  .list li a span {
    변환 : Translatey (100px);
    전환 : 0.2S;
  }
  .list : 호버 스팬 {
    변환 : Translatey (0);
  }
  .list li : nth-Child (n) span {
    전환-변형 : calc (var (-지연) * (n-1));
  }
}

이 방법은 calc() 함수를 사용하여 지연 시간을 동적으로 계산하여 코드를 더 간단하고 스케일링하기가 더 쉽습니다. n 목록 항목의 시퀀스 번호를 나타냅니다.

목록 항목이 크면 위의 방법이 중복 될 수 있습니다. SASS 루프를 사용하여 코드를 생성 할 수 있습니다.

 @Media (호버 : 호버) {
  .list li a span {
    변환 : Translatey (100px);
    전환 : 0.2S;
  }
  .list : 호버 스팬 {
    변환 : Translatey (0);
  }
  @for $ i부터 0 ~ 20 {
    .list li : nth-child (https://www.php.cn/link/93ac0c50dddddc7b88e5fe05c70e15b {$ i 1}) span {
      전환 지연 : 0.05S * $ i;
    }
  }
}

이 SASS 코드는 21 개의 목록 항목의 transition-delay 속성을 생성하기 위해 루프입니다. 21 개 미만의 목록 항목이 있더라도 GZIP 압축 후 초과 코드가 효과적으로 줄어 듭니다.

마지막으로 HTML에서 지연 값을 전달할 수도 있습니다.

• 이것
• 작은

@Media (호버 : 호버) {
  .list li a span {
    변환 : Translatey (100px);
    전환 : 0.2S;
  }
  .list : 호버 스팬 {
    변환 : Translatey (0);
    전환 지연 : var (-지연); /* HTML에서 지연 값을 얻으십시오*/
  }
}

선택할 방법은 프로젝트의 특정 요구와 개인 선호도에 따라 다릅니다. SASS 루프 방법은 유지 보수 및 확장성에 장점이 있으며 사용자 정의 속성 방법은 더 간결하고 유연합니다. HTML에서 직접 설정하는 것이 편리하지만 유지 보수에 편리하지 않을 수 있습니다.

위 내용은 비틀 거리는 CSS 전환의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!