Animação de ondas cerebrais CSS

752 byby.createsite

Abrir no Editor Video Publique Seu Código

Recomendado

19 October 2025

Transformação de formas de partículas Three.js com controles

1 April 2025

Formulário de login futurista

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);
    }
  }

Animação de ondas cerebrais CSS

Recomendado

Transformação de formas de partículas Three.js com controles

Jogo de combinação de cores

Formulário de login futurista

HTML

CSS

JS

Recomendado

Transformação de formas de partículas Three.js com controles

Jogo de combinação de cores

Formulário de login futurista

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS