सीएसएस ब्रेन वेव एनीमेशन

151 ByBy.inc

संपादक में खोलें अपना कोड प्रकाशित करें

अनुशंसित

26 August 2025

सीएसएस एनीमेशन परतें शहर की पृष्ठभूमि

5 April 2023

CSS हार्ट एनीमेशन कोड स्निपेट

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

सीएसएस ब्रेन वेव एनीमेशन

अनुशंसित

सीएसएस एनीमेशन परतें शहर की पृष्ठभूमि

रिस्पॉन्सिव सीएसएस कार्ड

CSS हार्ट एनीमेशन कोड स्निपेट

HTML

CSS

JS

अनुशंसित

सीएसएस एनीमेशन परतें शहर की पृष्ठभूमि

रिस्पॉन्सिव सीएसएस कार्ड

CSS हार्ट एनीमेशन कोड स्निपेट

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS