Maison > interface Web > tutoriel CSS > Challenge du code d'interface utilisateur # 1 - battements de cœur

Challenge du code d'interface utilisateur # 1 - battements de cœur

Lisa Kudrow
Libérer: 2025-02-10 16:07:09
original
496 Les gens l'ont consulté

SitePoint a lancé un défi de code d'interface utilisateur de quatre semaines. Les inscriptions doivent être soumises sous forme de codepen et peuvent être utilisées avec n'importe quelle technologie Web.

UI Code Challenge #1 - Heartbeats

Les critères de sélection comprennent la simplicité du code, l'efficacité, l'authenticité de l'apparence et la sensation de l'interface utilisateur, ainsi que l'intelligence et la créativité de la solution. Le premier prix a remporté une carte-cadeau Amazon de 100 $, la finaliste a remporté 2 abonnements premium et des t-shirts SitePoint.

UI Code Challenge #1 - Heartbeats

Les défis fournissent des FAQ couvrant les animations de rythme cardiaque personnalisées, les appliquant à d'autres formes, l'ajout du site Web, le dépannage, l'amélioration du réalisme, la modification des couleurs, l'ajout de sons et l'utilisation de projets commerciaux et la fourniture de ressources d'apprentissage d'animation CSS.

Nous voyons souvent de superbes interfaces d'interface utilisateur dans les films, les téléviseurs et les jeux, tandis que les conceptions d'interface utilisateur au travail semblent souvent ennuyeuses. Ce défi vous donne la possibilité de créer des œuvres intéressantes et de gagner une carte-cadeau Amazon 100 $!

UI Code Challenge #1 - Heartbeats

dans le sens horaire à partir du coin supérieur gauche: Luke Cage (saison 1, épisode 10), The Hut in the Forest (2012), The Lost War (2013) et Casino Royale (2006).

La tâche de défi consiste à créer un panneau d'affichage biomonitoring ECG / EKG animé. Toute technologie peut être utilisée tant qu'elle peut être présentée sous forme de codepen, y compris HTML / CSS, Canvas, SVG, Webgl, D3, etc.

Habituellement, ces interfaces d'interface utilisateur utilisent le mode sombre, y compris au moins un graphique de courbe gauche et droit, représentant le taux de battements cardiaques. D'autres éléments peuvent être ajoutés (température du noyau, tension artérielle, etc.), mais le noyau est une courbe de battements cardiaques ondulée.

Méthode d'entreprise: Post Codepen Link et brève description dans la section des commentaires. Un créatif peut soumettre plusieurs œuvres, mais il est recommandé d'éviter de soumettre plusieurs œuvres similaires.

Sélection des critères: simplicité du code et efficacité; authenticité de l'apparence et du sentiment de l'interface utilisateur.

Heure du jugement: Le défi commence le mercredi 5 juin à 9h00 (PST) et se termine une semaine plus tard (9h00 le mercredi 12 juin à 9h00 PST).

Les FAQ couvrent les animations de battements cardiaques personnalisées, l'application à d'autres formes, l'ajout aux sites Web, le dépannage, l'amélioration du réalisme, le changement de couleurs, l'ajout de sons et l'utilisation de projets commerciaux, et fournissent une ressource d'apprentissage d'animation CSS.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal