Animación de ondas cerebrales CSS

1,131 byby.createsite

Abrir en el editor Publica tu código

Recomendado

19 January 2024

Botón de Cambio de Tema

16 May 2026

Código fuente del juego HTML5 Idle Miner Tycoon

27 May 2026

Web Dash HTML: Modificación de Geometry Dash con Phaser

HTML

CSS

* {
    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: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: transparent;
  }

/* A estrutura da mente, com suas memórias e desejos */
  .mind-structure {
    position: relative;
    width: 100%;
    height: 100%;
    perspective: 300px;
  }

/* O cérebro em movimento, com suas ondas cerebrais */
  .brain-wave {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: #fff;
    animation: brain-wave-animation 2s infinite;
  }

/* Uma onda cerebral se movendo para o alto */
  .brain-wave::after {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: #fff;
  }

/* O cérebro em movimento, com suas ondas cerebrais se movendo para cima e para baixo */
  .brain-wave2 {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: #fff;
    animation: brain-wave2-animation 2s infinite;
  }

/* Uma onda cerebral se movendo para o baixo */
  .brain-wave2::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%);
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: #fff;
  }

/* As memórias e os desejos, se movendo em círculos */
  .memory-circle {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: #fff;
    animation: memory-circle-animation 2s infinite;
  }

/* O desejo se movendo para fora da memória */
  .memory-circle::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 25px 25px 0 25px;
    border-color: transparent transparent #fff transparent;
  }

/* Um micro-detalhe que apenas aparece no segundo loop da animação */
  .brain-wave::after {
    animation-delay: 1s;
  }

/* A animação do cérebro em movimento */
  @keyframes brain-wave-animation {
    0% {
      transform: translateY(0);
    }
    50% {
      transform: translateY(-10px);
    }
    100% {
      transform: translateY(0);
    }
  }

/* A animação das ondas cerebrais se movendo para cima e para baixo */
  @keyframes brain-wave2-animation {
    0% {
      transform: translateY(0);
    }
    50% {
      transform: translateY(10px);
    }
    100% {
      transform: translateY(0);
    }
  }

/* A animação das memórias e dos desejos em círculos */
  @keyframes memory-circle-animation {
    0% {
      transform: translate(-50%, -50%) rotate(0deg);
    }
    100% {
      transform: translate(-50%, -50%) rotate(360deg);
    }
  }