Frequência do fluxo quântico

27 soundasart

Abrir no Editor Publique Seu Código

Recomendado

12 September 2025

Animação CSS: "Finja até conseguir"

15 August 2024

25 November 2024

Site responsivo de dados de alunos

HTML

<body>

<g transform="translate(900, 0) scale(-1, 1)">
        <rect class="spectrum-bar" x="50" y="0" width="15" height="120" fill="url(#grad-low)" opacity="0.8">
          <animate attributeName="height" values="120;150;180;120" dur="0.88s" repeatCount="indefinite" begin="0.04s"/>
          <animate attributeName="y" values="0;-20;30;-20;0" dur="0.88s" repeatCount="indefinite" begin="0.04s"/>
        </rect>
        <rect class="spectrum-bar" x="80" y="0" width="15" height="110" fill="url(#grad-low)" opacity="0.8">
          <animate attributeName="height" values="110;140;160;110" dur="0.86s" repeatCount="indefinite" begin="0.08s"/>
          <animate attributeName="y" values="0;-15;25;-15;0" dur="0.86s" repeatCount="indefinite" begin="0.08s"/>
        </rect>
        <rect class="spectrum-bar" x="200" y="0" width="12" height="120" fill="url(#grad-mid)" opacity="0.8">
          <animate attributeName="height" values="120;150;180;120" dur="0.76s" repeatCount="indefinite" begin="0.20s"/>
          <animate attributeName="y" values="0;-20;30;-20;0" dur="0.76s" repeatCount="indefinite" begin="0.20s"/>
        </rect>
        <rect class="spectrum-bar" x="350" y="0" width="10" height="80" fill="url(#grad-high)" opacity="0.9">
          <animate attributeName="height" values="80;120;140;80" dur="0.56s" repeatCount="indefinite" begin="0.32s"/>
          <animate attributeName="y" values="0;-25;35;-25;0" dur="0.56s" repeatCount="indefinite" begin="0.32s"/>
        </rect>
      </g>

<rect class="spectrum-bar" x="860" y="0" width="20" height="180" fill="url(#grad-high)" opacity="0.9">
        <animate attributeName="height" values="180;220;250;180" dur="0.80s" repeatCount="indefinite" begin="0.08s"/>
        <animate attributeName="y" values="0;-70;-20;-60;0" dur="0.80s" repeatCount="indefinite" begin="0.08s"/>
      </rect>
      <rect class="spectrum-bar" x="895" y="0" width="20" height="160" fill="url(#grad-mid)" opacity="0.9">
        <animate attributeName="height" values="160;200;230;160" dur="0.76s" repeatCount="indefinite" begin="0.12s"/>
        <animate attributeName="y" values="0;-70;-15;-55;0" dur="0.76s" repeatCount="indefinite" begin="0.12s"/>
      </rect>
      <rect class="spectrum-bar" x="930" y="0" width="20" height="140" fill="url(#grad-low)" opacity="0.9">
        <animate attributeName="height" values="140;170;200;140" dur="0.84s" repeatCount="indefinite" begin="0.16s"/>
        <animate attributeName="y" values="0;-70;-10;-50;0" dur="0.84s" repeatCount="indefinite" begin="0.16s"/>
      </rect>
      <rect class="spectrum-bar" x="965" y="0" width="20" height="200" fill="url(#grad-high)" opacity="0.9">
        <animate attributeName="height" values="200;230;260;200" dur="0.78s" repeatCount="indefinite" begin="0.20s"/>
        <animate attributeName="y" values="0;-90;-20;-75;0" dur="0.78s" repeatCount="indefinite" begin="0.20s"/>
      </rect>
      <rect class="spectrum-bar" x="1000" y="0" width="20" height="190" fill="url(#grad-mid)" opacity="0.9">
        <animate attributeName="height" values="190;220;240;190" dur="0.82s" repeatCount="indefinite" begin="0.24s"/>
        <animate attributeName="y" values="0;-80;-15;-60;0" dur="0.82s" repeatCount="indefinite" begin="0.24s"/>
      </rect>
      <rect class="spectrum-bar" x="1035" y="0" width="20" height="180" fill="url(#grad-low)" opacity="0.9">
        <animate attributeName="height" values="180;210;230;180" dur="0.80s" repeatCount="indefinite" begin="0.28s"/>
        <animate attributeName="y" values="0;-80;-12;-55;0" dur="0.80s" repeatCount="indefinite" begin="0.28s"/>
      </rect>

<g opacity="0.8">
        <circle cx="960" cy="540" r="5" fill="none" stroke="rgba(150,50,150,0.6)" stroke-width="2">
          <animate attributeName="r" values="5;180" dur="2.4s" repeatCount="indefinite"/>
          <animate attributeName="opacity" values="0.9;0" dur="2.4s" repeatCount="indefinite"/>
        </circle>
        <circle cx="960" cy="540" r="5" fill="none" stroke="rgba(250,0,250,0.6)" stroke-width="2">
          <animate attributeName="r" values="5;180" dur="2.4s" begin="0.8s" repeatCount="indefinite"/>
          <animate attributeName="opacity" values="0.9;0" dur="2.4s" begin="0.8s" repeatCount="indefinite"/>
        </circle>
        <circle cx="960" cy="540" r="5" fill="none" stroke="rgba(150,0,150,0.6)" stroke-width="2">
          <animate attributeName="r" values="5;180" dur="2.4s" begin="1.6s" repeatCount="indefinite"/>
          <animate attributeName="opacity" values="0.9;0" dur="2.4s" begin="1.6s" repeatCount="indefinite"/>
        </circle>
        <circle cx="960" cy="540" r="5" fill="none" stroke="rgba(200,0,50,0.6)" stroke-width="2">
          <animate attributeName="r" values="5;180" dur="2.4s" begin="2.4s" repeatCount="indefinite"/>
          <animate attributeName="opacity" values="0.9;0" dur="2.4s" begin="2.4s" repeatCount="indefinite"/>
        </circle>
      </g>
    </g>

CSS

* {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            }

/* Background color and style */
            body {
                background-repeat: no-repeat;   
                background-position: center center;
                background-size: cover;    
                background-attachment: fixed;          
                background-color: black; 
                display: flex;
                align-items: center;
                justify-content: center;
                height: 100vh;
                width: 100vw; 
                overflow: hidden;
            }

/* Animation container */
            .container {
            position: absolute;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 100%;
            height: 100%;
            top:0;
            left:0;
            overflow: hidden;
            background: transparent;
            }

@keyframes scanline {
  0% { transform: translateY(-100%); }
  100% { transform: translateY(100vh); }
}

.scanline {
  position: absolute;
  width: 100%;
  height: 2px;
  background: linear-gradient(transparent, rgba(200, 50, 200, 0.3), transparent);
  animation: scanline 3.2s linear infinite;
  pointer-events: none;
}

body, html { 
  background-color: #000;
  margin: 0px;
  padding: 0px;
  overflow: hidden;
}

Recomendado

Animação CSS: "Finja até conseguir"

Site responsivo de dados de alunos

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS