इलेक्ट्रिक स्टॉर्म

अनुशंसित

9 December 2025

सीएसएस नीला इलेक्ट्रिक बॉर्डर प्रभाव

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

इलेक्ट्रिक स्टॉर्म

अनुशंसित

इलेक्ट्रिक फ्रेम नीला

सीएसएस नीला इलेक्ट्रिक बॉर्डर प्रभाव

लाल इलेक्ट्रिक फ्रेम

HTML

CSS

JS

अनुशंसित

इलेक्ट्रिक फ्रेम नीला

सीएसएस नीला इलेक्ट्रिक बॉर्डर प्रभाव

लाल इलेक्ट्रिक फ्रेम

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS