HTMLCSS
Animated Electric Card
A visually stunning animated card UI built using HTML, CSS, and JavaScript. The project features electric neon glow effects, animated borders, smooth hover interactions, and modern cyberpunk-inspired styling. Advanced CSS animations and gradients create a dynamic glowing energy effect around the card, making it ideal for futuristic website interfaces, portfolios, and creative UI showcases. JavaScript enhances the interaction experience with responsive animations and smooth transitions.
Source Code
index.html
<!DOCTYPE html>
color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"><html color:#fbbf24">langcolor:#94a3b8">="en">
color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"><head>
color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"><meta color:#fbbf24">charsetcolor:#94a3b8">="UTF-8">
color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"><title>Animated Electric Card | EduCrushcolor:#fbbf24">stylecolor:#94a3b8">="color:#f97316"></title>
color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"><link color:#fbbf24">relcolor:#94a3b8">="stylesheet" color:#fbbf24">hrefcolor:#94a3b8">="./style.css">
color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"></head>
color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"><body>
color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"><main color:#fbbf24">classcolor:#94a3b8">="main-container">
color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"><svg color:#fbbf24">classcolor:#94a3b8">="svg-container">
color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"><defs>
color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"><filter color:#fbbf24">idcolor:#94a3b8">="turbulent-displace" color:#fbbf24">colorInterpolationFilterscolor:#94a3b8">="sRGB" color:#fbbf24">xcolor:#94a3b8">="-20%" color:#fbbf24">ycolor:#94a3b8">="-20%" color:#fbbf24">widthcolor:#94a3b8">="140%" color:#fbbf24">heightcolor:#94a3b8">="140%">
color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"><feTurbulence color:#fbbf24">typecolor:#94a3b8">="turbulence" color:#fbbf24">baseFrequencycolor:#94a3b8">="0.02" color:#fbbf24">numOctavescolor:#94a3b8">="10" color:#fbbf24">resultcolor:#94a3b8">="noise1" color:#fbbf24">seedcolor:#94a3b8">="1" />
color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"><feOffset color:#fbbf24">incolor:#94a3b8">="noise1" color:#fbbf24">dxcolor:#94a3b8">="0" color:#fbbf24">dycolor:#94a3b8">="0" color:#fbbf24">resultcolor:#94a3b8">="offsetNoise1">
color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"><animate color:#fbbf24">attributeNamecolor:#94a3b8">="dy" color:#fbbf24">valuescolor:#94a3b8">="700; 0" color:#fbbf24">durcolor:#94a3b8">="6s" color:#fbbf24">repeatCountcolor:#94a3b8">="indefinite" color:#fbbf24">calcModecolor:#94a3b8">="linear" />
color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"></feOffset>
color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"><feTurbulence color:#fbbf24">typecolor:#94a3b8">="turbulence" color:#fbbf24">baseFrequencycolor:#94a3b8">="0.02" color:#fbbf24">numOctavescolor:#94a3b8">="10" color:#fbbf24">resultcolor:#94a3b8">="noise2" color:#fbbf24">seedcolor:#94a3b8">="1" />
color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"><feOffset color:#fbbf24">incolor:#94a3b8">="noise2" color:#fbbf24">dxcolor:#94a3b8">="0" color:#fbbf24">dycolor:#94a3b8">="0" color:#fbbf24">resultcolor:#94a3b8">="offsetNoise2">
color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"><animate color:#fbbf24">attributeNamecolor:#94a3b8">="dy" color:#fbbf24">valuescolor:#94a3b8">="0; -700" color:#fbbf24">durcolor:#94a3b8">="6s" color:#fbbf24">repeatCountcolor:#94a3b8">="indefinite" color:#fbbf24">calcModecolor:#94a3b8">="linear" />
color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"></feOffset>
color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"><feTurbulence color:#fbbf24">typecolor:#94a3b8">="turbulence" color:#fbbf24">baseFrequencycolor:#94a3b8">="0.02" color:#fbbf24">numOctavescolor:#94a3b8">="10" color:#fbbf24">resultcolor:#94a3b8">="noise1" color:#fbbf24">seedcolor:#94a3b8">="2" />
color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"><feOffset color:#fbbf24">incolor:#94a3b8">="noise1" color:#fbbf24">dxcolor:#94a3b8">="0" color:#fbbf24">dycolor:#94a3b8">="0" color:#fbbf24">resultcolor:#94a3b8">="offsetNoise3">
color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"><animate color:#fbbf24">attributeNamecolor:#94a3b8">="dx" color:#fbbf24">valuescolor:#94a3b8">="490; 0" color:#fbbf24">durcolor:#94a3b8">="6s" color:#fbbf24">repeatCountcolor:#94a3b8">="indefinite" color:#fbbf24">calcModecolor:#94a3b8">="linear" />
color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"></feOffset>
color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"><feTurbulence color:#fbbf24">typecolor:#94a3b8">="turbulence" color:#fbbf24">baseFrequencycolor:#94a3b8">="0.02" color:#fbbf24">numOctavescolor:#94a3b8">="10" color:#fbbf24">resultcolor:#94a3b8">="noise2" color:#fbbf24">seedcolor:#94a3b8">="2" />
color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"><feOffset color:#fbbf24">incolor:#94a3b8">="noise2" color:#fbbf24">dxcolor:#94a3b8">="0" color:#fbbf24">dycolor:#94a3b8">="0" color:#fbbf24">resultcolor:#94a3b8">="offsetNoise4">
color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"><animate color:#fbbf24">attributeNamecolor:#94a3b8">="dx" color:#fbbf24">valuescolor:#94a3b8">="0; -490" color:#fbbf24">durcolor:#94a3b8">="6s" color:#fbbf24">repeatCountcolor:#94a3b8">="indefinite" color:#fbbf24">calcModecolor:#94a3b8">="linear" />
color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"></feOffset>
color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"><feComposite color:#fbbf24">incolor:#94a3b8">="offsetNoise1" color:#fbbf24">in2color:#94a3b8">="offsetNoise2" color:#fbbf24">resultcolor:#94a3b8">="part1" />
color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"><feComposite color:#fbbf24">incolor:#94a3b8">="offsetNoise3" color:#fbbf24">in2color:#94a3b8">="offsetNoise4" color:#fbbf24">resultcolor:#94a3b8">="part2" />
color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"><feBlend color:#fbbf24">incolor:#94a3b8">="part1" color:#fbbf24">in2color:#94a3b8">="part2" color:#fbbf24">modecolor:#94a3b8">="color-dodge" color:#fbbf24">resultcolor:#94a3b8">="combinedNoise" />
color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"><feDisplacementMap color:#fbbf24">incolor:#94a3b8">="SourceGraphic" color:#fbbf24">in2color:#94a3b8">="combinedNoise" color:#fbbf24">scalecolor:#94a3b8">="30" color:#fbbf24">xChannelSelectorcolor:#94a3b8">="R" color:#fbbf24">yChannelSelectorcolor:#94a3b8">="B" />
color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"></filter>
color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"></defs>
color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"></svg>
color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"><div color:#fbbf24">classcolor:#94a3b8">="card-container card-orange">
color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"><div color:#fbbf24">classcolor:#94a3b8">="inner-container">
color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"><div color:#fbbf24">classcolor:#94a3b8">="border-outer">
color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"><div color:#fbbf24">classcolor:#94a3b8">="main-card">color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"></div>
color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"></div>
color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"><div color:#fbbf24">classcolor:#94a3b8">="glow-layer-1">color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"></div>
color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"><div color:#fbbf24">classcolor:#94a3b8">="glow-layer-2">color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"></div>
color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"></div>
color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"><div color:#fbbf24">classcolor:#94a3b8">="overlay-1">color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"></div>
color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"><div color:#fbbf24">classcolor:#94a3b8">="overlay-2">color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"></div>
color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"><div color:#fbbf24">classcolor:#94a3b8">="background-glow">color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"></div>
color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"><div color:#fbbf24">classcolor:#94a3b8">="content-container">
color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"><div color:#fbbf24">classcolor:#94a3b8">="content-top">
color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"><div color:#fbbf24">classcolor:#94a3b8">="scrollbar-glass">Electriccolor:#fbbf24">stylecolor:#94a3b8">="color:#f97316"></div>
color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"><p color:#fbbf24">classcolor:#94a3b8">="title">Power Cardcolor:#fbbf24">stylecolor:#94a3b8">="color:#f97316"></p>
color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"></div>
color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"><hr color:#fbbf24">classcolor:#94a3b8">="divider" />
color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"><div color:#fbbf24">classcolor:#94a3b8">="content-bottom">
color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"><p color:#fbbf24">classcolor:#94a3b8">="description">
Unleash the full potential of animated electric effects.
color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"></p>
color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"></div>
color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"></div>
color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"></div>
color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"><div color:#fbbf24">classcolor:#94a3b8">="card-container">
color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"><div color:#fbbf24">classcolor:#94a3b8">="inner-container">
color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"><div color:#fbbf24">classcolor:#94a3b8">="border-outer">
color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"><div color:#fbbf24">classcolor:#94a3b8">="main-card">color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"></div>
color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"></div>
color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"><div color:#fbbf24">classcolor:#94a3b8">="glow-layer-1">color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"></div>
color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"><div color:#fbbf24">classcolor:#94a3b8">="glow-layer-2">color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"></div>
color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"></div>
color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"><div color:#fbbf24">classcolor:#94a3b8">="overlay-1">color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"></div>
color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"><div color:#fbbf24">classcolor:#94a3b8">="overlay-2">color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"></div>
color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"><div color:#fbbf24">classcolor:#94a3b8">="background-glow">color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"></div>
color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"><div color:#fbbf24">classcolor:#94a3b8">="content-container">
color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"><div color:#fbbf24">classcolor:#94a3b8">="content-top">
color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"><div color:#fbbf24">classcolor:#94a3b8">="scrollbar-glass">EduCrushcolor:#fbbf24">stylecolor:#94a3b8">="color:#f97316"></div>
color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"><p color:#fbbf24">classcolor:#94a3b8">="title">EduCrushcolor:#fbbf24">stylecolor:#94a3b8">="color:#f97316"></p>
color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"></div>
color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"><hr color:#fbbf24">classcolor:#94a3b8">="divider" />
color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"><div color:#fbbf24">classcolor:#94a3b8">="content-bottom">
color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"><p color:#fbbf24">classcolor:#94a3b8">="description">
In case you'd like to emphasize something very dramatically.
color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"></p>
color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"></div>
color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"></div>
color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"></div>
color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"><div color:#fbbf24">classcolor:#94a3b8">="card-container card-red">
color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"><div color:#fbbf24">classcolor:#94a3b8">="inner-container">
color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"><div color:#fbbf24">classcolor:#94a3b8">="border-outer">
color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"><div color:#fbbf24">classcolor:#94a3b8">="main-card">color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"></div>
color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"></div>
color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"><div color:#fbbf24">classcolor:#94a3b8">="glow-layer-1">color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"></div>
color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"><div color:#fbbf24">classcolor:#94a3b8">="glow-layer-2">color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"></div>
color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"></div>
color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"><div color:#fbbf24">classcolor:#94a3b8">="overlay-1">color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"></div>
color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"><div color:#fbbf24">classcolor:#94a3b8">="overlay-2">color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"></div>
color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"><div color:#fbbf24">classcolor:#94a3b8">="background-glow">color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"></div>
color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"><div color:#fbbf24">classcolor:#94a3b8">="content-container">
color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"><div color:#fbbf24">classcolor:#94a3b8">="content-top">
color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"><div color:#fbbf24">classcolor:#94a3b8">="scrollbar-glass">Electriccolor:#fbbf24">stylecolor:#94a3b8">="color:#f97316"></div>
color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"><p color:#fbbf24">classcolor:#94a3b8">="title">Power Cardcolor:#fbbf24">stylecolor:#94a3b8">="color:#f97316"></p>
color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"></div>
color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"><hr color:#fbbf24">classcolor:#94a3b8">="divider" />
color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"><div color:#fbbf24">classcolor:#94a3b8">="content-bottom">
color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"><p color:#fbbf24">classcolor:#94a3b8">="description">
Unleash the full potential of animated electric effects.
color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"></p>
color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"></div>
color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"></div>
color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"></div>
color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"></main>
color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"></body>
color:#fbbf24">stylecolor:#94a3b8">="color:#f97316"></html>