FOPENP

CSS: effetto fiamma

Ho creato un effetto fiamma totalmente in CSS. Il CSS usato è minimale; non ho voluto usare algoritmi complicati, ne Javascript e neanche WebGL.

Clicca qui per vedere la fiamma.

    1 <!DOCTYPE html>
    2 <html>
    3     <head>
    4         <meta charset="utf-8">
    5         <title>Fiamma</title>
    6         <style>
    7             body {
    8                 background-color: black;
    9             }
   10             .centrato {
   11                 display: flex;
   12                 justify-content: center;
   13                 align-items: center;
   14             }
   15             .glow {
   16                 background-color: rgb(220, 93, 20);
   17                 border-radius: 50%;
   18                 filter: blur(20em);
   19                 width: 20em;
   20                 height: 20em;
   21                 opacity: 0.5;
   22             }
   23             @keyframes fiamma {
   24                 0%, 100% { border-radius: 5% 85% 25% 85%; width: 20em; height: 20em; }
   25                 50% { border-radius: 5% 55% 55% 55%; width: 19em; height: 19em; }
   26             }
   27             .fuoco {
   28                 width: 20em;
   29                 height: 20em;
   30                 background: linear-gradient(-45deg, #3826fc, #bd6e00, #ffa21f, #ffe44a, #fffcc1);
   31                 rotate: 45deg;
   32                 border-radius: 5% 85% 25% 85%;
   33                 animation: fiamma 0.2s infinite;
   34                 filter: blur(0.3em);
   35             }
   36             .fuoco2 {
   37                 width: 20em;
   38                 height: 20em;
   39                 background: linear-gradient(-45deg, #1d1770, #bd0000, #ffff1f, #ffe44a, #fffcc1);
   40                 rotate: 45deg;
   41                 border-radius: 5% 95% 45% 95%;
   42                 filter: blur(0.5em);
   43             }
   44             .glow, .fuoco, .fuoco2 {
   45                 position: absolute;
   46                 top: 0%;
   47                 left: 0%;
   48                 right: 0%;
   49                 bottom: 0%;
   50                 margin: auto;
   51             }
   52         </style>
   53     </head>
   54     <body>
   55         <div class="centrato">
   56             <div class="glow"></div>
   57             <div class="fuoco"></div>
   58             <div class="fuoco2"></div>
   59         </div>
   60     </body>
   61 </html>

La fiamma è composta da 3 strati: un effetto glow (il bagliore), una fiamma posteriore e una fiamma anteriore.
La fiamma posteriore cambia di forma, mentre quella anteriore rimane invariata. Grazie al blur, le due fiamme si fondono in una.

Per trovare la giusta combinazione di colori ho usato il mio generatore di gradiente.

2024
01 feb