Fragmento de código de animación de goteo de dopamina CSS

743 byby.createsite

Abrir en el editor Video Publica tu código

Fragmento de código de animación de goteo de dopamina CSS

Recomendado

29 June 2025

Fragmento de código del menú desplegable HTML

2 June 2025

Un código de gustavosalvador212

10 December 2024

Un código de hunganh

HTML

<!DOCTYPE html>
<html lang="pt-BR">
<head>
  <style>
    /* css_foundation */
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

body {
      background: url("./thumb.jpg") no-repeat center center;
      background-color: black;
      background-size: cover;
      display: flex;
      align-items: center;
      justify-content: center;
      height: 100vh;
      overflow: hidden;
    }

.codigo {
      position: absolute;
      top: 0;
      left: 50%;
      transform: translateX(-50%);
      background: #272822;
      color: #F8F8F2;
      font-family: 'Consolas', 'Monaco', monospace;
      font-size: 18px;
      padding: 20px;
      border-radius: 8px;
      white-space: pre-line;
      text-align: left;
      line-height: 1.6;
      max-height: 25%;
      max-width: 75%;
      width: 75%;
      height: 25%;
      top: 15%;
      overflow-y: hidden;
      box-shadow: -8px 10px 18px rgba(0, 0, 0, 0.55);
    }

.selector       { color: #F92672; }
    .property       { color: #66D9EF; }
    .value-number   { color: #AE81FF; }
    .value-string   { color: #E6DB74; }
    .value-color    { color: #A6E22E; }
    .function       { color: #A6E22E; }

.animation-container {
      position: absolute;
      top: 75%;
      left: 50%;
      transform: translate(-50%, -50%);
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      height: 50%;
      overflow: hidden;
      background: transparent;
    }

/* Dopamine Drip - key CSS snippet */
    .color-palette {
      animation: dripping-animation 1s linear infinite;
    }

@keyframes dripping-animation {
      0% {
        /* Cor inicial do Dopamine Drip */
        background-color: #ff69b4;
      }
      50% {
        /* Cor inicial do Dopamine Drip - transição */
        background-color: #ff99cc;
      }
      100% {
        /* Cor final do Dopamine Drip */
        background-color: #ff0033;
      }
    }

.color-palette::before {
      content: "";
      position: absolute;
      z-index: 1;
      top: 100%;
      left: 50%;
      transform: translateX(-50%);
      width: 100px;
      height: 100px;
      border-radius: 50%;
      background-color: #ff69b4;
      animation: growing-pause 1s linear infinite;
    }

@keyframes growing-pause {
      0% {
        top: 100%;
      }
      100% {
        top: calc(100% + 50px);
      }
    }

.color-palette::after {
      content: "";
      position: absolute;
      z-index: 2;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 100px;
      height: 100px;
      border-radius: 50%;
      background-color: #ff99cc;
      animation: shrinking-grow 1s linear infinite;
    }

@keyframes shrinking-grow {
      0% {
        transform: translate(-50%, -50%) scale(1);
      }
      50% {
        transform: translate(-50%, -50%) scale(0.8);
      }
      100% {
        transform: translate(-50%, -50%) scale(1);
      }
    }

.color-palette span {
      font-size: 30px;
      position: relative;
      z-index: 3;
      color: #fff;
    }

.codigo {
      margin-bottom: 50px;
    }

/* Dopamine Drip - detalhes micro */
    @media (replay) {
      .color-palette::after {
        /* Há 10s, a paleta colorida inicia a transição de cor */
        animation-delay: 5s;
      }
    }

@media (replay) {
      .color-palette::before {
        /* A cada 5s, a paleta colorida inicia a transição de escala */
        animation-delay: 2s;
      }
    }
  </style>
</head>
<body>

CSS

* {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
  			background: black;
            display: flex;
            align-items: center;
            justify-content: center;
            height: 100vh;
            overflow: hidden;
        }
        
        .codigo {
            position: absolute;
            top: 0;
            left: 50%;
            transform: translateX(-50%);
            background: #272822;
            color: #F8F8F2;
            font-family: 'Consolas', 'Monaco', monospace;
            font-size: 18px;
            padding: 20px;
            border-radius: 8px;
            white-space: pre-line;
            text-align: left;
            line-height: 1.6;
            max-height: 25%;
            max-width: 75%;
            width: 75%;
            height: 25%;
            top:15%;
            overflow-y: hidden;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
        }
        
        .selector       { color: #F92672; }
        .property       { color: #66D9EF; }
        .value-number   { color: #AE81FF; }
        .value-string   { color: #E6DB74; }
        .value-color    { color: #A6E22E; }
        .function       { color: #A6E22E; }

.animation-container {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            display: flex;
            align-items: center;
            justify-content: center;
            width: 100%;
            aspect-ratio: 9/16;
            height: 90vh;
            overflow: hidden;
            background: transparent;
        }
        
        @keyframes loading-animation {
            0% {
                transform: scale(1) rotate(0deg);
                background-size: 200px 200px;
            }
            25% {
                transform: scale(1.2) rotate(90deg);
                background-size: 220px 220px;
            }
            50% {
                transform: scale(1) rotate(180deg);
                background-size: 240px 240px;
            }
            100% {
                transform: scale(1) rotate(360deg);
                background-size: 260px 260px;
            }
        }
        
        @keyframes branching {
            0% {
                transform: scale(1);
            }
            100% {
                transform: scale(2);
            }
        }
        
        .loading-element {
            position: relative;
            width: 60px;
            height: 60px;
            background-size: 200px 200px;
            border-radius: 50%;
            animation: loading-animation 1s linear infinite;
        }
        
        .loading-element:before {
            content: "";
            position: absolute;
            width: 30px;
            height: 30px;
            background-color: red;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            animation: loading-animation 1s linear infinite;
        }
        
        .loading-element:after {
            content: "";
            position: absolute;
            width: 20px;
            height: 20px;
            background-color: transparent;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            animation: loading-animation 1s linear infinite;
        }
        
        .branching-element {
            position: relative;
            width: 40px;
            height: 40px;
            background-size: 100px 100px;
            border-radius: 50%;
            animation: branching 2s linear infinite;
        }
        
        .branching-element:before, .branching-element:after {
            content: "";
            position: absolute;
            width: 20px;
            height: 20px;
            background-color: white;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            animation: branching 2s linear infinite;
        }
        
        .branching-element:before:before, .branching-element:before:after, .branching-element:after:before, .branching-element:after:after {
            content: "";
            position: absolute;
            width: 10px;
            height: 10px;
            background-color: red;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            animation: branching 2s linear infinite;
        }
        
        /* A cada rodada, adiciona uma camada nova. Isso simboliza o crescimento do entendimento e a multiplicação das ideias. */
        @keyframes crescimento {
            0% {
                transform: scale(1);
            }
            100% {
                transform: scale(2);
            }
        }
        
        .crescende {
            position: relative;
            width: 20px;
            height: 20px;
            background-size: 40px 40px;
            border-radius: 50%;
            animation: crescimento 3s linear infinite;
        }
        
        .crescende:before, .crescende:after {
            content: "";
            position: absolute;
            width: 10px;
            height: 10px;
            background-color: transparent;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            animation: crescimento 3s linear infinite;
        }
        
        /* Com a cada nova ideia, sentimo uma sensação de liberdade e crescimento. */
        
        /* A cada rodada, a carga é maior, representando o aumento da sabedoria e a busca pela perfeição. */
        
        .carregamento {
            position: relative;
            width: 50%;
            height: 50%;
            background-size: 100px 100px;
            border-radius: 50%;
            animation: loading-animation 2s linear infinite;
        }
        
        .carregamento:before {
            content: "";
            position: absolute;
            width: 25%;
            height: 25%;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background: linear-gradient(to bottom right, #03A9F4, #3F87F5);
            animation: crescimento 2s linear infinite;
        }
        
        .carregamento:after {
            content: "";
            position: relative;
            width: 10%;
            height: 10%;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background: linear-gradient(to bottom right, #03A9F4, #3F87F5);
            animation: crescimento 2s linear infinite;
        }

Recomendado

Fragmento de código del menú desplegable HTML

Un código de gustavosalvador212

Un código de hunganh

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS