UIコードチャレンジ＃1-ハートビート

SitePointは、4週間のUIコードチャレンジを開始しました。最初の課題は「ハートビート」でした。エントリはCodePenフォームで提出する必要があり、任意のWebテクノロジーで使用できます。

選択基準には、コードの単純さ、有効性、UIの外観と感触、およびソリューションの賢さと創造性が含まれます。一等賞は100ドルのAmazonギフトカードを獲得し、準優勝は2つのプレミアムメンバーシップとSitePoint Tシャツを獲得しました。

カスタムハートビートアニメーションをカバーするFAQは、他の形状に加え、トラブルシューティング、リアリズムの強化、音の追加、商業プロジェクトの使用、およびCSSアニメーションの学習リソースを提供します。

映画、テレビ、ゲームには見事なUIインターフェイスがよく見られますが、職場でのUIのデザインは退屈に見えることがよくあります。この課題は、興味深い作品を作成し、100ドルのAmazonギフトカードを獲得する機会を提供します！

左上隅から時計回り：ルークケージ（シーズン1、エピソード10）、森の小屋（2012）、ロストウォー（2013）、およびカジノロイヤル（2006）。

チャレンジタスクは、アニメーション化されたECG/EKGバイオモニタリングディスプレイパネルを作成することです。 HTML/CSS、Canvas、SVG、WebGL、D3などを含むCodePen形式で提示できる限り、すべてのテクノロジーを使用できます。

通常、これらのUIインターフェイスは、ハートビートレートを描いた少なくとも1つの左および右カーブチャートを含むダークモードを使用します。他の要素を追加することができます（コア温度、血圧など）が、コアはうねるような心拍曲曲線です。

Enterprise Method：コメントセクションのCodePenリンクと短い説明を投稿します。クリエイティブは複数の作品を提出できますが、複数の同様の作品の提出を避けることをお勧めします。

基準の選択：UIの外観と感情の信頼性。

審査時間：チャレンジは、6月5日水曜日の午前9時（PST）に始まり、1週間後（6月12日水曜日の午前9時PST）に終了します。

FAQは、カスタムハートビートアニメーション、他の形状へのアプリケーション、Webサイトへの追加、トラブルシューティング、リアリズムの強化、色の変化、サウンドの追加、商用プロジェクトの使用をカバーし、CSSアニメーション学習リソースを提供します。

以上がUIコードチャレンジ＃1-ハートビートの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。