Lava Lamp

Le code

Un aperçu du code source :

<div class="lava-container">
    <div class="lava-blob">
    </div>
    <div class="lava-blob">
    </div>
    <div class="lava-blob">
    </div>
    <div class="lava-glass">
    </div>
  </div>

Cas d'usage concrets

Quelques contextes où Lava Lamp fait mouche :

• Un bouton vivant sur une landing
• L'ambiance d'une page événement
• Un loader original

Comment ça marche

Effet 100 % CSS — aucune dépendance JavaScript. Il s'appuie sur animation @keyframes, filtres CSS (filter) et transformations CSS (transform).

À personnaliser

Tu peux régler :

• la vitesse d'animation (actuellement 0s)

Intégrer en 3 étapes

1. Colle le HTML dans ta page, à l'endroit où tu veux l'effet.
2. Ajoute le CSS à ta feuille de style (ou dans une balise <style>).
3. Ajuste les couleurs et variables CSS à ta marque — aucune dépendance à installer.

Compatibilité navigateur

Fonctionne sur tous les navigateurs modernes (Chrome, Firefox, Safari, Edge). Responsive, avec dégradation propre.

Plus d'effets Liquid

FAQ