오늘날 CSS에서 절대 값, 사인, 반올림 및 모듈로 사용

CSS 수학적 함수의 영리한 사용 : abs (), 부호 (), round () 및 mod () 시뮬레이션

CSS 사양에는 삼각 함수, 지수 함수, 기호 상관 함수 (abs (), 부호 ()) 및 사다리 값 함수 (Round (), mod (), rem ())와 같은 많은 실제 수학적 함수가 포함되어 있습니다. 그러나 이러한 기능은 모든 브라우저에서 지원되지 않습니다. 이 기사는 기존 CSS 기능을 사용하여 ABS (), sign () 및 mod () 함수의 함수를 시뮬레이션하고 실제 애플리케이션에서 그 힘을 보여주는 방법을 소개합니다.

다음 기술은 구형 브라우저 용으로 설계되지 않았다는 점에 유의해야합니다. 일부 기술은 사용자 정의 속성 등록 (@property 사용)에 대한 브라우저 지원에 의존하며 현재 크롬 브라우저로 제한됩니다.

시뮬레이션 계산 등가

• --abs (ABS)

CSS의 max() 함수를 사용하여 구현할 수 있습니다. 값이 긍정적이거나 부정적 일 수있는 사용자 정의 속성 --a 있다고 가정하십시오.

 -abs : max (var (-a), -1*var (-a));

--a --a max() 경우 -1*var(--a) 는 var(--a) max() -1*var(--a) -1*var(--a) 반환합니다.

• --sign (기호)

절대 값을 사용하면 숫자의 상징을 계산할 수 있습니다.

 -abs : max (var (-a), -1*var (-a));
-서명 : calc (var (-a)/var (-abs));

중요 : 이 방법은 단위가없는 값에만 적합합니다. --a 0 인 경우 houdini 지원을 사용하여 --sign 속성을 등록하고 초기 값을 0으로 설정해야합니다.

 @property -sign {
  구문 : '<integer> ';;
  초기 값 : 0;
  상속 : 거짓;
}</integer>

정수의 경우 clamp() 함수를 사용하여 단순화 할 수 있습니다.

 -서명 : 클램프 (-1, var (-a), 1);

이 방법은 단위 값이없고 절대 값이 1 이상인 정수에만 적합합니다. 소수의 경우 : : : : : : :

 -LIM : .000001;
-신호 : 클램프 (-1, var (-a)/var (-LIM), 1);

• --round , --ceil 및 --floor (둥근, 둥글고 둥글게)

이를 위해서는 사용자 정의 속성을 등록하고 타입을 정수로 강요해야합니다.

 @property -라운드 {
  구문 : '<integer> ';;
  초기 값 : 0;
  상속 : 거짓;
}

.my-elem {-라운드 : var (-a);</integer>

--ceil 및 --floor 0.5를 추가하거나 빼서 구현할 수 있습니다.

 @property --floor {
  구문 : '<integer> ';;
  초기 값 : 0;
  상속 : 거짓;
}

@property -ceil {
  구문 : '<integer> ';;
  초기 값 : 0;
  상속 : 거짓;
}

.my-elem {
  -플로어 : calc (var (-a)-.5);
  --ceil : calc (var (-a) .5);
}</integer></integer>

• --mod (mod)

--floor 구현을 기반으로 :

 @property --floor {
  구문 : '<integer> ';;
  초기 값 : 0;
  상속 : 거짓;
}

.my-elem {
  -플로어 : calc (var (-a)/var (-b)-.5);
  -모드 : calc (var (-a)-var (-b)*var (-floor));
}</integer>

신청 사례

• 애니메이션의 대칭 효과

절대 값은 대칭 애니메이션 지연을 만드는 데 사용될 수 있습니다.

 --m : calc (.5*(var (-n) -1));
-abs : max (var (-m)-var (-i), var (-i)-var (-m));
애니메이션-델리 : calc (var (-abs)/var (-m)*#{$ t}) 무한 뒤로;

• 선택한 항목에 따라 스타일을 조정하십시오

상징적 인 함수를 사용하여 요소가 선택되기 전후의 요소가 선택되어 다른 스타일이 적용되도록 할 수 있습니다.

• 시간 형식

floor() 및 mod() 함수를 사용하여 시간을 형식화 할 수 있습니다.

 -MIN : MAX (0, var (-Val)/60- .5);
--- 세크 : calc (var (-val)-var (-min)*60);

더 많은 경우 원래 텍스트를 참조하십시오.

요컨대, CSS의 기존 기능을 영리하게 적용함으로써 일부 수학적 기능을 시뮬레이션하고 구현할 수 있으므로 JavaScript에 의존하지 않고 CSS에서보다 복잡한 애니메이션 및 스타일 효과를 달성 할 수 있습니다. 이것은 CSS의 창의적인 응용을위한 더 넓은 공간을 제공합니다.

위 내용은 오늘날 CSS에서 절대 값, 사인, 반올림 및 모듈로 사용의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!