Morphing Shape
Quatre coins de border-radius permutent en boucle entre valeurs douces et extrêmes — une silhouette organique et vivante, 100 % CSS, sans JavaScript.
Vous aurez accès à la démo interactive avec un compte gratuit.
Cet effet fait partie d'Effect.Labs — 811 effets vanilla, une partie gratuite, une partie premium. Cartes comprend 41 effets, dont 6 gratuits. Découvrir la catégorie →
3 exemples d'usage
Comment ça marche
L'animation repose sur @keyframes morphShape qui fait évoluer border-radius à travers quatre états. La notation raccourcie CSS permet d'adresser les paires diagonales en une valeur : à 0 %/100 % (20px 60px), les coins TL et BR valent 20 px, TR et BL valent 60 px ; à 25 % (60px 20px), les rôles s'inversent. Le résultat est une permutation diagonale des arrondis.
Les keyframes 50 % (20px 20px 60px 60px) et 75 % (60px 60px 20px 20px) expriment les quatre coins séparément pour basculer l'arrondi de haut en bas, puis de bas en haut. La courbe ease-in-out sur le cycle de 8 s en boucle infinie lisse chaque transition — la forme paraît respirer plutôt que commuter.
La variante .card-morph-expand ajoute une interaction au clic : l'ajout de la classe .expanded via JavaScript fait passer la carte à transform: scale(1.1) avec un halo violet (box-shadow: rgba(99,102,241,.3) 0 25px 50px), masque la vue de prévisualisation (opacity: 0) et révèle un contenu complet positionné en position: absolute; inset: 0 par une transition opacity et transform: scale().
Accessibilité
- prefers-reduced-motion absent du code fourni — l'animation tourne en boucle infinie même si l'OS demande une réduction. Ajoutez :
@media (prefers-reduced-motion: reduce) { .card-morph { animation: none; } } - L'élément
<div class="card-morph">ne porte niroleniaria-label. Pour un usage purement décoratif, ajoutezaria-hidden="true"; pour un usage interactif, ajoutezrole="button"etaria-label. - La variante
.card-morph-expandrépond au clic mais ne définit pasaria-expanded— les lecteurs d'écran ne connaissent pas l'état ouvert/fermé. - Contraste texte : le label par défaut « Morph » (
#ffffff) sur--bg-card: #12121aoffre un ratio > 7:1, conforme WCAG AAA. - La variante expand n'intercepte pas
Enter/Spaceet n'a pas detabindex— elle n'est pas accessible au clavier dans sa forme de base.
Compatibilité navigateur
Repose sur border-radius multi-valeur et @keyframes CSS — supportés dans tous les navigateurs modernes depuis 2016.
Sans support @keyframes, la carte affiche le rayon statique --radius-xl: 1rem (coins légèrement arrondis) — aucune erreur JS, le contenu reste lisible.
Le code
Structure HTML à coller dans votre page (CSS + JS disponibles avec un compte premium) :
<div class="demo-preview">
<div class="card-demo card-morph">
Contenu
</div>
</div>
<!-- Variante interactive : révèle le contenu au clic -->
<div class="card-demo card-morph-expand">
<div class="card-preview">
<div class="card-preview-icon"><!-- icône --></div>
</div>
<div class="card-full-content">
<h5>Titre</h5>
<p>Description</p>
</div>
</div>HTML + CSS + JS complet, prêt à coller — avec des centaines d'effets premium.
Personnaliser
Options passées à l'API ou attributs data-* :
| Option / propriété | Défaut | Effet |
|---|---|---|
| --bg-card | #12121a | Couleur de fond de la carte. Utilisez rgba() pour un fond semi-transparent superposable à un contexte coloré. |
| --border | rgba(255,255,255,.08) | Couleur et opacité de la bordure de 1 px. Passez à rgba(99,102,241,.4) pour un contour indigo visible. |
| animation-duration dans .card-morph | 8s | Durée d'un cycle complet. 4s = vif et dynamique ; 8s = rythme naturel ; 14s = très lent et méditatif. |
| Valeur min dans @keyframes morphShape | 20px | Rayon minimum aux coins aux keyframes 0%/25%/50%/75%. Réduisez à 4px pour un morphing plus angulaire. |
| Valeur max dans @keyframes morphShape | 60px | Rayon maximum aux coins. Portez-le à 120px ou 50% pour une amplitude extrême entre forme quasi-rectangulaire et ellipse. |
| scale() dans .card-morph-expand.expanded | scale(1.1) | Facteur de zoom de la carte au clic (variante expand). Réduisez à scale(1.04) pour un agrandissement subtil. |
| box-shadow dans .card-morph-expand.expanded | rgba(99,102,241,.3) 0 25px 50px | Couleur et diffusion du halo au clic. Remplacez rgba(99,102,241,.3) par votre couleur primaire. |
FAQ
.card-morph:hover { animation-play-state: paused; } dans votre CSS — la forme se fige instantanément sur sa position courante au survol, sans saut.overflow: hidden à l'élément .card-morph, puis insérez un <img> en enfant avec width:100%; height:100%; object-fit:cover;. Les coins de l'image épouseront automatiquement la forme organique à chaque instant.@media (prefers-reduced-motion: reduce) { .card-morph { animation: none; } }. La carte reste affichée avec le rayon initial --radius-xl: 1rem.
