HTML + CSSArrière-plans

Pétales qui tombent

Des pétales tombent en tournoyant en 3D et se balancent de gauche à droite, comme portés par une brise.

Réglages

1x
1x
1

Code

<div class="pt-petals"><i style="left:0.0%;--t:17.9s;--dl:-4.9s;--sz:12.2px;--sw:42.1px"></i><i style="left:63.4%;--t:10.7s;--dl:-17.4s;--sz:20.7px;--sw:26.3px"></i><i style="left:87.4%;--t:18.5s;--dl:-11.2s;--sz:16.3px;--sw:37.6px"></i><i style="left:30.7%;--t:15.3s;--dl:-6.8s;--sz:20.4px;--sw:67.1px"></i><i style="left:36.9%;--t:12.2s;--dl:-18.3s;--sz:21.3px;--sw:31.6px"></i><i style="left:18.5%;--t:10.5s;--dl:-15.4s;--sz:13.6px;--sw:62.6px"></i><i style="left:5.4%;--t:15.4s;--dl:-11.0s;--sz:11.1px;--sw:39.4px"></i><i style="left:44.2%;--t:18.4s;--dl:-5.6s;--sz:17.3px;--sw:23.7px"></i><i style="left:87.0%;--t:12.3s;--dl:-15.9s;--sz:11.8px;--sw:53.3px"></i><i style="left:19.8%;--t:17.9s;--dl:-18.5s;--sz:22.0px;--sw:30.1px"></i><i style="left:72.6%;--t:10.2s;--dl:-9.2s;--sz:11.2px;--sw:60.4px"></i><i style="left:32.6%;--t:14.1s;--dl:-9.9s;--sz:10.1px;--sw:53.2px"></i><i style="left:80.5%;--t:12.0s;--dl:-14.3s;--sz:10.4px;--sw:40.6px"></i><i style="left:73.5%;--t:17.1s;--dl:-19.8s;--sz:18.4px;--sw:32.2px"></i><i style="left:3.1%;--t:19.0s;--dl:-3.8s;--sz:12.5px;--sw:35.4px"></i><i style="left:43.6%;--t:14.0s;--dl:-4.1s;--sz:16.1px;--sw:64.5px"></i><i style="left:42.4%;--t:15.2s;--dl:-14.0s;--sz:13.5px;--sw:30.1px"></i><i style="left:70.0%;--t:13.9s;--dl:-18.4s;--sz:21.7px;--sw:24.9px"></i><i style="left:26.1%;--t:14.8s;--dl:-8.9s;--sz:17.0px;--sw:20.4px"></i><i style="left:22.3%;--t:11.3s;--dl:-0.5s;--sz:20.2px;--sw:33.9px"></i><i style="left:64.1%;--t:15.9s;--dl:-12.7s;--sz:20.2px;--sw:58.2px"></i><i style="left:15.3%;--t:13.1s;--dl:-9.1s;--sz:16.2px;--sw:66.7px"></i><i style="left:3.6%;--t:19.2s;--dl:-8.0s;--sz:12.3px;--sw:44.7px"></i><i style="left:5.0%;--t:10.3s;--dl:-7.2s;--sz:15.4px;--sw:56.9px"></i><i style="left:0.4%;--t:10.8s;--dl:-2.6s;--sz:12.7px;--sw:29.1px"></i><i style="left:23.2%;--t:12.7s;--dl:-11.1s;--sz:21.5px;--sw:68.6px"></i></div>

Prompt pour l’IA

Collez-le dans ChatGPT, Claude ou Cursor : le bloc sera adapté à votre projet avec ces réglages, même sans React.

Plus dans Arrière-plans

Où l’utiliser

Des pétales qui tombent ajoutent une note douce et romantique au site d’un mariage, à la collection printemps d’un fleuriste ou à un restaurant japonais pendant la floraison des cerisiers. Chaque pétale a sa taille, sa vitesse et son balancement, la chute paraît donc naturelle. Un fond de pétales animé en CSS, sans image.

Par défaut, c’est du rose sur indigo profond, mais des pétales blancs sur vert tendre évoquent le printemps et du doré sur bleu marine fait fête. Derrière un formulaire ou des photos produit, réduisez la taille des pétales ou l’opacité pour que rien ne semble tomber sur le bouton d’achat.