UI 코드 챌린지 #1- 심장 박동

SitePoint는 4 주간의 UI 코드 챌린지를 시작했습니다. 첫 번째 도전은 "하트 비트"였습니다. 출품작은 Codepen 양식으로 제출해야하며 모든 웹 기술과 함께 사용할 수 있습니다.

선택 기준에는 코드 단순성, 효과, UI의 외관 및 느낌의 진정성, 솔루션의 영리성과 창의성이 포함됩니다. 1 상은 100 달러의 Amazon 기프트 카드, Runner-Up은 2 개의 프리미엄 멤버십과 Sitepoint 티셔츠를 획득했습니다.

도전은 FAQ를 맞춤형 심장 박동 애니메이션을 제공하고, 다른 모양에 적용하고, 웹 사이트 추가, 현실주의 향상, 색상 변경, 상업적 프로젝트 사용 및 CSS 애니메이션 학습 리소스 제공을 제공합니다.

우리는 종종 영화, TV 및 게임에서 놀라운 UI 인터페이스를 보는 반면, 직장에서 UI 디자인은 종종 지루해 보입니다. 이 도전은 흥미로운 작품을 만들고 100 달러의 아마존 기프트 카드를받을 수있는 기회를 제공합니다!

왼쪽 상단 코너에서 시계 방향 : 루크 케이지 (시즌 1, 에피소드 10), 숲의 오두막 (2012), 잃어버린 전쟁 (2013) 및 카지노 로얄 (2006).

도전 과제는 애니메이션 ECG/EKG 바이오 모니터링 디스플레이 패널을 만드는 것입니다. 모든 기술은 HTML/CSS, Canvas, SVG, WebGL, D3 등을 포함하여 코드펜 형태로 제시 할 수있는 한 사용할 수 있습니다.

일반적으로,이 UI 인터페이스는 심장 박동 속도를 나타내는 하나 이상의 왼쪽 및 오른쪽 곡선 차트를 포함하여 어두운 모드를 사용합니다. 다른 요소를 추가 할 수 있지만 (코어 온도, 혈압 등) 핵심은 기복이 많은 심장 박동 곡선입니다.

엔터프라이즈 방법 : 코드 코드 링크 및 주석 섹션의 간단한 설명. 크리에이티브는 여러 작품을 제출할 수 있지만 여러 유사한 작품을 제출하지 않는 것이 좋습니다.

기준 선택 : 코드 단순성과 효과;

판단 시간 : 챌린지는 6 월 5 일 수요일 오전 9시 (PST)에 시작하여 일주일 후에 (6 월 12 일 수요일 오전 9시 PST에 오전 9시)가 끝납니다.

FAQ는 맞춤형 심장 박동 애니메이션, 다른 모양에 대한 응용 프로그램, 웹 사이트 추가, 문제 해결, 현실주의 향상, 색상 변경, 사운드 추가 및 상용 프로젝트 사용 및 CSS 애니메이션 학습 리소스를 제공합니다.

위 내용은 UI 코드 챌린지 #1- 심장 박동의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!