Plasma Energy Animation
Dynamic plasma energy effect with swirling color gradients and high contrast
Code
.plasma-container {
width: 400px;
height: 300px;
position: relative;
overflow: hidden;
border-radius: 16px;
}
.plasma-core {
position: absolute;
top: 50%;
left: 50%;
width: 150px;
height: 150px;
transform: translate(-50%, -50%);
border-radius: 50%;
background: radial-gradient(circle, #ff00ff 0%, #00ffff 100%);
filter: blur(10px);
animation: plasma-pulse 3s infinite ease-in-out;
}
.plasma-wave {
position: absolute;
top: 50%;
left: 50%;
width: 200px;
height: 200px;
transform: translate(-50%, -50%);
border-radius: 45%;
background: linear-gradient(45deg, #ff00ff, #00ffff, #ff00ff);
background-size: 400% 400%;
opacity: 0.6;
filter: blur(20px);
animation: plasma-swirl 8s infinite linear;
}
@keyframes plasma-pulse {
0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
50% { transform: translate(-50%, -50%) scale(1.2); opacity: 0.8; }
}
@keyframes plasma-swirl {
0% { background-position: 0% 50%; transform: translate(-50%, -50%) rotate(0deg); }
100% { background-position: 400% 50%; transform: translate(-50%, -50%) rotate(360deg); }
}HTML
<"attr-name"</span>>class</span>="tag"</span>>div</span> "attr-name"</span>>class</span>="plasma-container"</span>>
<"attr-name"</span>>class</span>="tag"</span>>div</span> "attr-name"</span>>class</span>="plasma-core"</span>></"attr-name"</span>>class</span>="tag"</span>>div</span>>
<"attr-name"</span>>class</span>="tag"</span>>div</span> "attr-name"</span>>class</span>="plasma-wave"</span>></"attr-name"</span>>class</span>="tag"</span>>div</span>>
</"attr-name"</span>>class</span>="tag"</span>>div</span>>