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
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.