<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
body {
margin: 0;
height: 100vh;
background: #030308;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
perspective: 700px;
font-family: 'Segoe UI', Arial, sans-serif;
}
/* Background Electric Surge Grid */
.bg-grid {
position: absolute;
inset: -50%;
background-image:
linear-gradient(rgba(0, 240, 255, 0.08) 1px, transparent 1px),
linear-gradient(90deg, rgba(0, 240, 255, 0.08) 1px, transparent 1px);
background-size: 40px 40px;
transform: rotateX(60deg);
animation: grid-flicker 0.15s infinite alternate;
}
@keyframes grid-flicker {
0% { opacity: 0.6; filter: drop-shadow(0 0 2px #00f0ff); }
100% { opacity: 0.9; filter: drop-shadow(0 0 8px #7000ff); }
}
/* 3D Electrocuted Vortex Container */
.electric-vortex {
position: relative;
width: 280px;
height: 280px;
transform-style: preserve-3d;
animation:
rotate-vortex 8s infinite linear,
electric-jitter 0.08s infinite alternate;
}
@keyframes rotate-vortex {
0% { transform: rotateX(25deg) rotateY(0deg) rotateZ(0deg); }
50% { transform: rotateX(-25deg) rotateY(180deg) rotateZ(180deg); }
100% { transform: rotateX(25deg) rotateY(360deg) rotateZ(360deg); }
}
/* High frequency electric shock vibration */
@keyframes electric-jitter {
0% { translate: 0px 0px; filter: hue-rotate(0deg); }
25% { translate: -3px 2px; }
50% { translate: 3px -2px; filter: hue-rotate(90deg) brightness(1.4); }
75% { translate: -2px -3px; }
100% { translate: 2px 3px; filter: hue-rotate(-90deg); }
}
/* Electric Orbiting Rings */
.e-ring {
position: absolute;
inset: 0;
border-radius: 50%;
border: 2px solid #00f0ff;
box-shadow:
0 0 10px #00f0ff,
inset 0 0 15px #00f0ff,
0 0 25px #7000ff;
}
.e-ring::before {
content: '';
position: absolute;
inset: -4px;
border-radius: 50%;
border: 2px dashed #ffffff;
animation: spark-flash 0.2s infinite ease-in-out;
}
@keyframes spark-flash {
0%, 100% { opacity: 0.1; }
50% { opacity: 0.9; transform: scale(1.03); }
}
.e-ring:nth-child(1) { transform: translateZ(-120px) scale(0.5); }
.e-ring:nth-child(2) { transform: translateZ(-240px) scale(0.8); border-color: #7000ff; }
.e-ring:nth-child(3) { transform: translateZ(-360px) scale(1.1); border-color: #ff007f; }
.e-ring:nth-child(4) { transform: translateZ(-480px) scale(1.4); }
/* Electric Spark Arcs / Bolts */
.bolt-shower {
position: absolute;
width: 100%;
height: 100%;
pointer-events: none;
}
.bolt {
position: absolute;
width: 2px;
height: 120px;
background: linear-gradient(180deg, transparent, #ffffff, #00f0ff, transparent);
box-shadow: 0 0 12px #00f0ff, 0 0 20px #ffffff;
opacity: 0;
animation: bolt-strike 0.6s infinite ease-in-out;
}
.bolt:nth-child(1) { left: 20%; top: -20%; animation-delay: 0.1s; }
.bolt:nth-child(2) { left: 50%; top: -10%; animation-delay: 0.3s; }
.bolt:nth-child(3) { left: 80%; top: -30%; animation-delay: 0.5s; }
@keyframes bolt-strike {
0% { transform: translateY(-100px) rotate(15deg); opacity: 0; }
20% { opacity: 1; }
40% { transform: translateY(300px) rotate(-10deg); opacity: 0.8; }
60%, 100% { opacity: 0; }
}
/* Centered Text Overlay */
.electric-label {
position: absolute;
z-index: 30;
color: #ffffff;
text-align: center;
text-transform: uppercase;
letter-spacing: 4px;
pointer-events: none;
text-shadow: 0 0 12px #00f0ff, 0 0 25px #7000ff;
}
.electric-label h2 {
margin: 0;
font-size: 1.5rem;
animation: text-shock 0.12s infinite;
}
.electric-label p {
margin: 6px 0 0;
font-size: 0.75rem;
color: #00f0ff;
letter-spacing: 2px;
}
@keyframes text-shock {
0%, 100% { transform: skewX(0deg); opacity: 1; }
20% { transform: skewX(12deg) translate(-2px, 1px); opacity: 0.8; }
40% { transform: skewX(-10deg) translate(2px, -1px); opacity: 0.9; }
60% { transform: skewX(5deg); opacity: 1; }
80% { transform: skewX(-8deg); opacity: 0.7; }
}
</style>
</head>
<body>
<div class="bg-grid"></div>
<div class="bolt-shower">
<div class="bolt"></div>
<div class="bolt"></div>
<div class="bolt"></div>
</div>
<div class="electric-vortex">
<div class="e-ring"></div>
<div class="e-ring"></div>
<div class="e-ring"></div>
<div class="e-ring"></div>
</div>
<div class="electric-label">
<h2>ELECTRIC SHOCK</h2>
<p>3D Glitch & Spark Vortex</p>
</div>
</body>
</html>
body {
margin: 0;
padding: 20px;
font-family: system-ui, -apple-system, sans-serif;
background: #f5f5f5;
}
.container {
background: white;
padding: 30px;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
max-width: 600px;
margin: 0 auto;
}
h1 {
color: #333;
margin-top: 0;
}
button {
background: #000;
color: white;
border: none;
padding: 10px 20px;
border-radius: 4px;
cursor: pointer;
font-size: 12px;
}
console.log('Editor loaded!');
let clickCount = 0;
function handleClick() {
clickCount++;
const output = document.getElementById('output');
output.innerHTML = `
<h3>Clicked ${clickCount} time(s)!</h3>
<p>Time: ${new Date().toLocaleTimeString()}</p>
`;
console.log(`Button clicked ${clickCount} times`);
}
No comments yet. Be the first!