애니메이션 번호 카운터

예를 들어 CSS 디지털 애니메이션은 1에서 2로 변경 한 다음 2에서 3으로 변경 한 다음 3에서 4로 변경하여 지정된 시간을 지속한다고 상상해보십시오. 카운터와 같지만 웹에서 애니메이션을 디자인하는 데 사용하는 것과 동일한 애니메이션으로 제어됩니다. 이것은 대시 보드와 같은 것을 디자인 할 때 유용 할 수 있으며 숫자에 활력을 더할 수 있습니다. 놀랍게도, 이것은 많은 기술이없는 CSS에서 가능합니다. 원한다면 새로운 솔루션으로 바로 이동할 수 있지만 먼저 과거에 어떻게했는지 살펴 보겠습니다.

애니메이션 번호의 논리적 인 방법은 JavaScript를 통해 숫자를 변경하는 것입니다. 우리는 상당히 간단한 setInterval을 할 수 있지만 여기에는 시작 값, 최종 가치 및 지속 시간을 받아들이는 기능을 사용하는보다 고급 답변이 있습니다.

CSS 만 사용하는 경우 CSS 카운터를 사용하여 다른 키 프레임에서 카운트를 조정하여 숫자를 애니메이션 할 수 있습니다.

또 다른 방법은 모든 숫자를 연속으로 줄이고 위치를 애니메이션하는 것입니다.

이 예제의 중복 코드 중 일부는 PUG (HTML의 경우) 또는 SCSS (CSS)와 같은 전처리기를 사용하여 루프를 관리하기 쉽게 만들지 만 기본 아이디어를 볼 수 있도록 고의적으로 기본 코드를 사용합니다.

새로운 CSS 솔루션

CSS.RegisterProperty 및 @Property에 대한 최신 지원으로 CSS 변수를 애니메이션 할 수 있습니다. 속임수는 CSS 사용자 정의 속성을 정수로 선언하는 것입니다. 이를 통해 다른 정수 (예 : 변환)처럼 보간 할 수 있습니다.

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

div {
  전환 : -num 1s;
  카운터 리셋 : num var (-num);
}
div : 호버 {
  --num : 10000;
}
div :: 후 {
  내용 : 카운터 (num);
}</integer>

중요 참고 : 작성 당시이 @property 구문은 Chrome (및 Edge 및 Opera와 같은 다른 Chromium 커널 브라우저)에서만 지원되므로 크로스 브라우저 호환되지 않습니다. 크롬 전용 앱 (예 : Electron App)을 구축하는 경우 즉시 사용할 수 있습니다. 그렇지 않으면 기다리십시오. 위에서 언급 한 데모는 더 넓은 지원을받습니다.

CSS 컨텐츠 속성은 숫자를 표시하는 데 사용할 수 있지만 컨텐츠 만 출력 할 수 있으므로 숫자를 문자열로 변환하기 위해 카운터를 사용해야합니다.<string></string> 값.

다른 애니메이션과 같이 애니메이션을 완화 할 수 있는지 확인하십시오. 매우 멋지다!

입력 된 CSS 변수는 @KeyFrames에서도 사용할 수 있습니다.

단점? 카운터는 정수 만 지원합니다. 이것은 소수점과 분수가 고려되지 않음을 의미합니다. 우리는 정수 부분과 소수 부분을 어떤 식 으로든 별도로 표시해야합니다.

우리는 소수를 애니메이션 할 수 있습니까?

-number와 같은 소수점 (예 : -number)을 정수로 변환 할 수 있습니다. 작동 방식은 다음과 같습니다.

1. 하나를 등록하십시오<integer></integer> CSS 변수 (예 : -integer) 및 초기 값을 지정합니다.
2. 그런 다음 calc ()를 사용하여 Round : --integer : calc (var (-number))

이 경우 -number는 가장 가까운 정수로 반올림하여 결과를 -integer에 저장합니다.

 @property --integer {
  구문 : "<integer> ";
  초기 값 : 0;
  상속 : 거짓;
}
-번호 : 1234.5678;
--integer : calc (var (-number)); / * 1235 */</integer>

때때로 우리는 정수 부품 만 필요합니다. 이 작업을 수행하는 영리한 방법이 있습니다 : --integer : max (var (-숫자) -0.5, 0). 이것은 양수에 적용됩니다. 이 방법은 calc ()도 필요하지 않습니다.

 / * @property --integer */
-번호 : 1234.5678;
--integer : max (var (-숫자) -0.5, 0); / * 1234 */

비슷한 방식으로 분수 부품을 추출한 다음 카운터를 사용하여 문자열로 변환 할 수 있습니다 (그러나 내용 값은 문자열이어야 함). 연결된 문자열을 표시하려면 다음 구문을 사용하십시오.

 내용 : "String1"var (-String2) 카운터 (-정수) ...

다음은 10 진수 백분율로 애니메이션의 완전한 예입니다.

다른 팁

우리는 CSS 카운터를 사용하고 있기 때문에 이러한 카운터의 형식은 숫자와 다른 형식 일 수 있습니다. 다음은 "CSS"를 "예"로 애니메이션하는 예입니다!

오, 또 다른 요령 : JavaScript를 통해 사용자 정의 속성 값을 디버깅 할 수 있습니다.

 getComputedStyle (요소) .GetProperTyValue ( '-변수')

그게 다야! 오늘날의 CSS 기능은 놀랍습니다.

위 내용은 애니메이션 번호 카운터의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!