Elektrischer Sturm

Im Editor öffnen Video Veröffentlichen Sie Ihren Code

Empfohlen

9 December 2025

CSS Gelber elektrischer Rahmeneffekt

9 December 2025

<rect class="spectrum-bar" x="1120" y="0" width="40" height="150" fill="url(#grad-high)" opacity="0.9">
        <animate attributeName="height" values="150;220;280;320;150" dur="0.82s" repeatCount="indefinite" begin="0.24s"/>
        <animate attributeName="y" values="0;-100;-200;-300;0" dur="0.82s" repeatCount="indefinite" begin="0.24s"/>
      </rect>
      <rect class="spectrum-bar" x="1160" y="0" width="40" height="160" fill="url(#grad-mid)" opacity="0.9" begin="0.32s">
        <animate attributeName="height" values="160;240;320;360;160" dur="0.80s" repeatCount="indefinite" begin="0.32s"/>
        <animate attributeName="y" values="0;-120;-240;-330;0" dur="0.80s" repeatCount="indefinite" begin="0.32s"/>
      </rect>
      <rect class="spectrum-bar" x="1200" y="0" width="40" height="190" fill="url(#grad-low)" opacity="0.9" begin="0.40s">
        <animate attributeName="height" values="190;290;410;440;190" dur="0.94s" repeatCount="indefinite" begin="0.40s"/>
        <animate attributeName="y" values="0;-150;-310;-410;0" dur="0.94s" repeatCount="indefinite" begin="0.40s"/>
      </rect>
      <rect class="spectrum-bar" x="1240" y="0" width="40" height="110" fill="url(#grad-high)" opacity="0.9" begin="0.48s">
        <animate attributeName="height" values="110;190;290;330;110" dur="0.78s" repeatCount="indefinite" begin="0.48s"/>
        <animate attributeName="y" values="0;-100;-230;-320;0" dur="0.78s" repeatCount="indefinite" begin="0.48s"/>
      </rect>
      <rect class="spectrum-bar" x="1280" y="0" width="40" height="130" fill="url(#grad-mid)" opacity="0.9" begin="0.56s">
        <animate attributeName="height" values="130;240;310;350;130" dur="0.74s" repeatCount="indefinite" begin="0.56s"/>
        <animate attributeName="y" values="0;-120;-240;-330;0" dur="0.74s" repeatCount="indefinite" begin="0.56s"/>
      </rect>
    </g>

<g opacity="0.8" begin="-0.2s">
      <circle cx="960" cy="540" r="5" fill="none" stroke="rgba(255,100,255,0.6)" stroke-width="2">
        <animate attributeName="r" values="5;180" dur="3.24s" repeatCount="indefinite" begin="-0.2s"/>
        <animate attributeName="opacity" values="0.9;0" dur="3.24s" repeatCount="indefinite" begin="-0.2s"/>
      </circle>
      <circle cx="960" cy="540" r="5" fill="none" stroke="rgba(200,0,255,0.6)" stroke-width="2" begin="1.04s">
        <animate attributeName="r" values="5;180" dur="3.24s" repeatCount="indefinite" begin="1.04s"/>
        <animate attributeName="opacity" values="0.9;0" dur="3.24s" repeatCount="indefinite" begin="1.04s"/>
      </circle>
      <circle cx="960" cy="540" r="5" fill="none" stroke="rgba(100,0,255,0.6)" stroke-width="2" begin="2.08s">
        <animate attributeName="r" values="5;180" dur="3.24s" repeatCount="indefinite" begin="2.08s"/>
        <animate attributeName="opacity" values="0.9;0" dur="3.24s" repeatCount="indefinite" begin="2.08s"/>
      </circle>
    </g>
  </svg>
</div>

CSS

* {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            }
            @keyframes scanline {
              0% { transform: translateY(-100%); }
              100% { transform: translateY(100vh); }

}
				body{
                background-repeat: no-repeat;   
                background: url('/thumb')  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;
				}

@keyframes growFast {
              0% { transform: scale(0.01); }
              90% { transform: scale(0.01); }
              100% { transform: scale(1); }
            }

/* Background color and style */
            body {
                background-repeat: no-repeat;   
                background: url('/thumb')  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: fixed;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 100%;
            height: 100%;
            top:10%;
            left:10%;
            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(0, 200, 255, 0.3), transparent);
  animation: scanline 2.56s linear infinite;
  pointer-events: none;
}

Elektrischer Sturm

Empfohlen

CSS Gelber elektrischer Rahmeneffekt

Grüner elektrischer Rahmen

Lila elektrischer Rahmen

HTML

CSS

JS

Empfohlen

CSS Gelber elektrischer Rahmeneffekt

Grüner elektrischer Rahmen

Lila elektrischer Rahmen

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS