매 순간마다 테마를 가지도록 하세요! ⏰ @property 및 hsl() 사용

? 소개

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

---

?️ 컨셉

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

---

? 데모 및 코드

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

? 코드 분석

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

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

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

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

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

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

- 실시간 업데이트: 시계 바늘과 디지털 시간이 현재 시간에 맞춰 1초마다 업데이트됩니다.

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

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

---

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

위 내용은 매 순간마다 테마를 가지도록 하세요! ⏰ @property 및 hsl() 사용의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!