새로운 CSS sin () 및 cos () 삼각법 함수로 시계 생성

CSS의 새로운 기능 : sin () 및 cos () 삼각 함수의 새로운 기능은 시계 효과를 만듭니다

최신 버전의 Firefox 및 Safari는 CSS 삼각 기능을 지원했습니다! 이것은 강력한 수학적 컴퓨팅 기능을 CSS에 가져오고 무한한 가능성을 확장합니다. 이 튜토리얼은 sin () 및 cos () 함수에 중점을두고 그것을 사용하여 시계를 만듭니다. tan ()과 같은 다른 삼각법 기능이 곧 출시되지만 Sin () 및 cos () 기능은 6 년 전 CSS 트릭에서 Sass Mixin을 사용하여 Chris가 구현 한 원주를 따라 텍스트를 정리하는 목표에 적합합니다. 최신 기술로 다시 이식하겠습니다.

대상 효과 (현재 Firefox 및 Safari에서만 지원되는) : 우리는 원주를 따라 텍스트 문자를 배열하여 시계 얼굴을 형성합니다. 초기 HTML 구조는 다음과 같습니다

다음, 기본 스타일을

컨테이너에 추가하고 태그를 사용하고 속성을 ​​추가하십시오.

이것은 단지 효과의 관찰을 용이하게하기 위해 기본 모양과 배경색을 만들기위한 것입니다. CSS 변수에 너비 값을 저장하고 나중에 사용됩니다.

이제 원의 반경을 저장하려면 변수 를 추가하고 원의 너비의 절반과 동일하고 함수를 사용하여 구현하십시오.

수학적 계산 : 둘레는 360도이고, 시계의 숫자는 12 숫자이며 각 숫자는 30도 (360/12)입니다. 수학적으로 원은 3시에 시작하므로 12시는 실제로 -90도이며 270도 (360-90)입니다.

변수 추가

각 숫자의 정도 값을 설정하고 30 도로 증가합니다.

<div class="clock">
  <div class="clock-face">
    <time datetime="12:00">12</time><time datetime="1:00">1</time><time datetime="2:00">2</time><time datetime="3:00">3</time><time datetime="4:00">4</time><time datetime="5:00">5</time><time datetime="6:00">6</time><time datetime="7:00">7</time><time datetime="8:00">8</time><time datetime="9:00">9</time><time datetime="10:00">10</time><time datetime="11:00">11</time>
  </div>
</div>

이제 sin () 및 cos () 함수를 사용하여 각 숫자의 x 및 y 좌표를 계산합니다.

x 좌표 공식 : 반지름 (Radius * cos (decc

y 좌표 공식 : 반지름 (Radius * sin (decc .clock 기본 스타일을 숫자에 추가하여 계산 된 좌표를 절대적으로 배치하고 사용하십시오. <time></time> 보다 정확하게 위치하려면 반경을 계산할 때 숫자의 크기를 빼야합니다. datetime 색상을 변경하여 더 아름답게 만듭니다. 다음, 시간, 분 및 두 번째 손을 추가하십시오 : html 구조를 추가하십시오 :

.clock {
  --_ow: clamp(5rem, 60vw, 40rem);
  --_w: 88cqi;
  aspect-ratio: 1;
  background-color: tomato;
  border-radius: 50%;
  container-type: inline;
  display: grid;
  height: var(--_ow);
  place-content: center;
  position: relative;
  width: var(--_ow);
}

추가 스타일 :

마지막으로 JavaScript를 사용하여 현재 시간을 설정하십시오.

브라우저 호환성 처리 :

최종 효과 : 완전한 CSS 시계! 현재 Firefox 및 Safari 브라우저 만 지원됩니다. --_r 또한 시계는 원형 이미지 라이브러리 또는 기타 창의적인 패턴으로 변환 될 수 있습니다. calc()

위 내용은 새로운 CSS sin () 및 cos () 삼각법 함수로 시계 생성의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!