Fallende Blütenblätter
Blütenblätter drehen sich im Fallen in 3D und pendeln hin und her, als trüge sie eine leichte Brise.
Einstellungen
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 für KI
Füg ihn in ChatGPT, Claude oder Cursor ein und der Baustein wird mit diesen Einstellungen an dein Projekt angepasst, auch ohne React.
Mehr aus Hintergründe
Wofür du ihn nutzen kannst
Fallende Blütenblätter sind ein sanfter, romantischer Akzent für eine Hochzeitswebsite, die Frühlingskollektion eines Blumenladens, ein japanisches Restaurant zur Kirschblütenzeit oder die Landingpage einer Kosmetikmarke. Jedes Blatt hat seine eigene Größe, sein Tempo und sein Pendeln, deshalb wirkt der Fall natürlich. Ein Hintergrund mit fallenden Blüten in HTML und CSS, ohne Bilder.
Standard ist Rosa auf tiefem Indigo, doch weiße Blätter auf zartem Grün wirken nach Frühling und Gold auf Marineblau festlich. Hinter Formularen und Produktfotos machst du die Blätter kleiner oder senkst die Deckkraft, damit nichts auf den Kaufen-Button zu fallen scheint.