? 소개

단순히 시간을 알려주는 것 이상의 역할을 하는 시계를 만들고 싶었던 적이 있습니까? 매 순간마다 새롭고 새로운 테마를 가져올 수 있다면 어떨까요? CSS @property와 강력한 hsl() 색상 조작을 사용하면 가능합니다! 이 기사에서는 매 순간 색상(테마라고도 함)을 변경하여 매 순간에 새로운 생명을 불어넣는 역동적이고 시각적으로 매력적인 "테마 시계"를 만드는 과정을 안내하겠습니다!.

?️ 컨셉

"테마 시계"의 아이디어는 단순하면서도 매력적입니다. 시간이 지남에 따라 시계의 모양이 변합니다. 우리는 CSS 사용자 정의 속성을 활용하여 색상의 색조(도 단위의 각도임)에 애니메이션을 적용하고 시계 테마를 매초(또한 매분 및 시간마다) 업데이트할 것입니다. 결과는? 기능적일 뿐만 아니라 매혹적이며 매끄럽고 끊임없이 변화하는 시계입니다.

? 데모 및 코드

음, '테마 시계'의 전체 코드는 다음과 같습니다. 각 부분이 전체적인 효과에 어떻게 기여하는지 이해하기 위해 분해해 보겠습니다.

? 코드 분석

1.CSS 사용자 정의 속성 및 @property: 이 테마 변경 시계의 마법은 CSS 사용자 정의 속성과 @property 규칙을 사용하는 데 있습니다. hsl() 함수를 사용하여 시계 색상의 색조를 제어하는 ​​사용자 정의 속성 --angle을 정의합니다. @keyframes 규칙을 사용하여 이 속성을 60초 이상 애니메이션화함으로써 지속적인 색상 전환을 달성합니다.

• 사용자 정의 속성 --angle: 이는 hsl() 색상의 색조를 제어하여 테마를 동적으로 변경합니다. 또한 사용자 정의 속성을 애니메이션 가능하게 만들어 원활한 전환을 가능하게 합니다.
• CSS @keyframes 애니메이션: 이 애니메이션은 전체 색상 스펙트럼을 순환하면서 색조 값을 60초에 걸쳐 0에서 360까지 회전합니다.

2.동적 테마 전환: 토글 버튼을 사용하면 사용자가 밝은 테마와 어두운 테마 사이를 전환할 수 있습니다. 버튼을 클릭하면 html 요소의 어두운 클래스가 토글되어 시계 모양이 변경됩니다.

• 밝은/어두운 모드 토글: 시계 모양을 동적으로 업데이트하는 버튼으로 테마를 전환할 수 있습니다.
• 컨테이너 회전 애니메이션: 테마가 변경되면 시계 컨테이너가 회전하여 미묘한 전환 효과를 추가합니다.

3.시계 및 시간 업데이트: 코드의 JavaScript 부분은 시계 바늘과 디지털 시간 표시의 업데이트를 처리합니다. setTime 함수는 매초 시, 분, 초침의 위치를 ​​다시 계산하는 동시에 시간 및 날짜 표시도 업데이트합니다.

• "scale" 기능: 현재 시간을 시계 바늘 회전에 해당하는 각도로 변환합니다.

- 실시간 업데이트: 시계 바늘과 디지털 시간이 현재 시간과 일치하도록 매초 업데이트됩니다.

? 모든 부분을 하나로 모으기

CSS 사용자 정의 속성, hsl() 색상 조작 및 @property 규칙의 강력한 결합을 통해 우리는 시간을 알려줄 뿐만 아니라 매 초마다 모양이 진화하는 시계를 만들었습니다. 이 프로젝트는 CSS를 사용하여 최소한의 JavaScript로 시각적으로 매력적인 대화형 웹 요소를 만드는 방법을 보여주는 훌륭한 예입니다.

좋아요 ❤️를 누르고 더 많은 alishata128을 보려면 팔로우하세요.