Sphères lumineuses bokeh
Des disques de lumière flous flottent, grandissent et s'éteignent comme des lumières vues à travers un objectif.
Réglages
Code
<div class="pt-bokeh"><i style="--x:64.6%;--y:92.5%;--s:3.0em;--c:var(--c1);--b:2.6px;--tx:3.1em;--ty:-2.8em;--du:14.0;--dl:-9.1"></i><i style="--x:97.1%;--y:50.5%;--s:9.0em;--c:var(--c2);--b:1.8px;--tx:6.4em;--ty:-1.1em;--du:12.6;--dl:-9.7"></i><i style="--x:96.9%;--y:73.8%;--s:7.0em;--c:var(--c3);--b:2.6px;--tx:5.7em;--ty:-1.9em;--du:11.4;--dl:-2.2"></i><i style="--x:39.1%;--y:0.2%;--s:3.0em;--c:var(--c1);--b:2.4px;--tx:-4.3em;--ty:1.7em;--du:17.4;--dl:-14.2"></i><i style="--x:13.8%;--y:53.4%;--s:10.4em;--c:var(--c2);--b:1.3px;--tx:2.7em;--ty:2.7em;--du:11.8;--dl:-5.9"></i><i style="--x:78.9%;--y:58.7%;--s:6.8em;--c:var(--c3);--b:2.8px;--tx:6.2em;--ty:-0.8em;--du:15.6;--dl:-0.0"></i><i style="--x:92.9%;--y:42.1%;--s:3.8em;--c:var(--c1);--b:0.5px;--tx:-5.6em;--ty:-1.6em;--du:13.2;--dl:-4.3"></i><i style="--x:63.9%;--y:57.5%;--s:8.8em;--c:var(--c2);--b:1.6px;--tx:-6.1em;--ty:-0.8em;--du:13.1;--dl:-3.9"></i><i style="--x:92.0%;--y:35.9%;--s:8.9em;--c:var(--c3);--b:1.9px;--tx:6.7em;--ty:-4.8em;--du:19.1;--dl:-18.9"></i><i style="--x:77.3%;--y:7.6%;--s:4.8em;--c:var(--c1);--b:1.4px;--tx:-3.2em;--ty:3.0em;--du:18.1;--dl:-0.5"></i><i style="--x:41.3%;--y:90.0%;--s:7.7em;--c:var(--c2);--b:1.7px;--tx:-2.1em;--ty:-3.6em;--du:12.1;--dl:-10.4"></i><i style="--x:6.3%;--y:96.4%;--s:11.9em;--c:var(--c3);--b:0.4px;--tx:-2.5em;--ty:-1.3em;--du:10.2;--dl:-10.2"></i><i style="--x:0.2%;--y:80.0%;--s:9.4em;--c:var(--c1);--b:2.9px;--tx:-5.3em;--ty:-0.3em;--du:19.6;--dl:-12.4"></i><i style="--x:86.3%;--y:85.9%;--s:12.0em;--c:var(--c2);--b:2.7px;--tx:7.4em;--ty:3.4em;--du:19.4;--dl:-8.8"></i><i style="--x:24.6%;--y:89.3%;--s:6.8em;--c:var(--c3);--b:0.5px;--tx:0.5em;--ty:0.8em;--du:10.9;--dl:-4.3"></i><i style="--x:7.8%;--y:77.2%;--s:6.3em;--c:var(--c1);--b:2.1px;--tx:-0.7em;--ty:-1.1em;--du:10.7;--dl:-2.5"></i><i style="--x:6.2%;--y:95.4%;--s:9.3em;--c:var(--c2);--b:2.7px;--tx:3.4em;--ty:-4.7em;--du:12.1;--dl:-1.0"></i><i style="--x:26.7%;--y:98.5%;--s:11.9em;--c:var(--c3);--b:1.0px;--tx:5.5em;--ty:-0.4em;--du:19.0;--dl:-16.2"></i><i style="--x:68.7%;--y:68.7%;--s:8.1em;--c:var(--c1);--b:1.7px;--tx:3.2em;--ty:-4.4em;--du:16.5;--dl:-16.3"></i><i style="--x:30.0%;--y:36.1%;--s:5.5em;--c:var(--c2);--b:0.9px;--tx:6.9em;--ty:-3.4em;--du:11.3;--dl:-10.0"></i><i style="--x:12.2%;--y:28.5%;--s:7.0em;--c:var(--c3);--b:2.2px;--tx:-0.9em;--ty:-4.1em;--du:13.6;--dl:-9.5"></i><i style="--x:41.1%;--y:2.7%;--s:8.7em;--c:var(--c1);--b:1.2px;--tx:-4.5em;--ty:3.5em;--du:17.0;--dl:-8.5"></i><i style="--x:36.2%;--y:83.8%;--s:8.2em;--c:var(--c2);--b:0.3px;--tx:4.2em;--ty:-4.7em;--du:15.2;--dl:-3.4"></i><i style="--x:66.9%;--y:63.2%;--s:11.5em;--c:var(--c3);--b:1.5px;--tx:-1.9em;--ty:-2.5em;--du:16.2;--dl:-2.5"></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
Voir tout : Arrière-plansOù l’utiliser
L'atmosphère rêveuse d'une photo de nuit prise avec un objectif lumineux. Deux douzaines de cercles de lumière dans tes trois couleurs ont des tailles et des flous différents, chacun avec un bord plus brillant comme un vrai bokeh. Ils dérivent lentement, grossissent et faiblissent à leur propre rythme et se mélangent selon le thème, lumineux sur fond sombre et teintés sur fond clair.
C'est du HTML et du CSS pur, presque sans coût. La densité change la taille des sphères, la vitesse leur dérive, et en mouvement réduit elles restent immobiles. À utiliser pour des événements, des invitations, des portfolios photo ou des campagnes festives.