Animation des ondes cérébrales CSS

1,040 byby.createsite

Ouvrir dans l'éditeur Publiez votre code

Recommandé

31 August 2024

Cartes de filtre CSS

13 April 2024

Bouton bascule HTML CSS

27 September 2025

Animation de chargement CSS : flux de mémoire et réflexion

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