493 lines
9.7 KiB
CSS
493 lines
9.7 KiB
CSS
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400..900&display=swap');
|
|
|
|
.sparkling-username {
|
|
position: relative;
|
|
display: inline-block;
|
|
text-shadow: 0 0 5px rgba(255, 255, 255, 0.5);
|
|
}
|
|
|
|
.sparkling-username::before, .sparkling-username::after {
|
|
content: '✨';
|
|
position: absolute;
|
|
font-size: 1rem;
|
|
color: #ff0;
|
|
animation: sparkle 2s infinite;
|
|
}
|
|
|
|
.sparkling-username::before {
|
|
top: -10px;
|
|
left: -10px;
|
|
animation-delay: 0s;
|
|
}
|
|
|
|
.sparkling-username::after {
|
|
bottom: -10px;
|
|
right: -10px;
|
|
animation-delay: 1s;
|
|
}
|
|
|
|
@keyframes sparkle {
|
|
0%, 100% {
|
|
opacity: 0;
|
|
transform: scale(0.5) rotate(0deg);
|
|
}
|
|
50% {
|
|
opacity: 1;
|
|
transform: scale(1.5) rotate(45deg);
|
|
}
|
|
}
|
|
|
|
.retro-wave-username {
|
|
position: relative;
|
|
display: inline-block;
|
|
font-family: 'Arial Black', sans-serif;
|
|
font-weight: bold;
|
|
font-size: 1.2em;
|
|
background: linear-gradient(
|
|
45deg,
|
|
#ff00ff,
|
|
#00ffff,
|
|
#ff00ff
|
|
);
|
|
background-size: 200% 100%;
|
|
-webkit-background-clip: text;
|
|
background-clip: text;
|
|
color: transparent;
|
|
text-shadow:
|
|
2px 2px 0px rgba(255, 0, 255, 0.2),
|
|
4px 4px 0px rgba(0, 255, 255, 0.2);
|
|
animation: waveText 2s ease-in-out infinite,
|
|
gradientFlow 3s linear infinite;
|
|
}
|
|
|
|
@keyframes waveText {
|
|
0%, 100% {
|
|
transform: translateY(0);
|
|
}
|
|
50% {
|
|
transform: translateY(-5px);
|
|
}
|
|
}
|
|
|
|
@keyframes gradientFlow {
|
|
0% {
|
|
background-position: 0% 50%;
|
|
}
|
|
100% {
|
|
background-position: 200% 50%;
|
|
}
|
|
}
|
|
|
|
/* PIXEL RETRO */
|
|
.pixel-retro-username {
|
|
position: relative;
|
|
display: inline-block;
|
|
font-family: 'Press Start 2P', cursive;
|
|
color: #fff;
|
|
text-shadow: 2px 2px 0 #000;
|
|
padding: 5px;
|
|
animation: pixelBounce 0.5s infinite alternate;
|
|
}
|
|
|
|
.pixel-retro-username::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: -2px;
|
|
left: -2px;
|
|
right: -2px;
|
|
bottom: -2px;
|
|
background: linear-gradient(
|
|
45deg,
|
|
#f00 25%,
|
|
transparent 25%,
|
|
transparent 75%,
|
|
#f00 75%
|
|
);
|
|
background-size: 4px 4px;
|
|
z-index: -1;
|
|
animation: pixelBorder 0.5s steps(4) infinite;
|
|
}
|
|
|
|
@keyframes pixelBounce {
|
|
from {
|
|
transform: translateY(0);
|
|
}
|
|
to {
|
|
transform: translateY(-2px);
|
|
}
|
|
}
|
|
|
|
@keyframes pixelBorder {
|
|
0% {
|
|
background-position: 0 0;
|
|
}
|
|
100% {
|
|
background-position: 4px 4px;
|
|
}
|
|
}
|
|
|
|
/* NEON CYBER */
|
|
|
|
.neon-cyber-username {
|
|
position: relative;
|
|
display: inline-block;
|
|
font-family: 'Orbitron', sans-serif;
|
|
color: #ff00ff;
|
|
filter: blur(1px);
|
|
text-transform: uppercase;
|
|
letter-spacing: 2px;
|
|
transform-style: preserve-3d;
|
|
animation: neonPulse 2s ease-in-out infinite alternate,
|
|
floatEffect 4s ease-in-out infinite;
|
|
}
|
|
|
|
.neon-cyber-username::before {
|
|
content: attr(data-text);
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
z-index: -1;
|
|
color: #ff00ff;
|
|
filter: blur(12px);
|
|
animation: neonFlicker 3s infinite;
|
|
}
|
|
|
|
.neon-cyber-username::after {
|
|
content: '';
|
|
position: absolute;
|
|
top: -5px;
|
|
left: -5px;
|
|
right: -5px;
|
|
bottom: -5px;
|
|
border: 2px solid #0ff;
|
|
border-radius: 5px;
|
|
background: radial-gradient(circle at 50% 50%,
|
|
rgba(0, 255, 255, 0.2) 0%,
|
|
transparent 50%);
|
|
filter: blur(5px);
|
|
animation: borderGlow 3s infinite,
|
|
particleEffect 4s linear infinite;
|
|
}
|
|
|
|
@keyframes neonPulse {
|
|
0% {
|
|
text-shadow:
|
|
0 0 5px #fff,
|
|
0 0 10px #fff,
|
|
0 0 15px #0ff,
|
|
0 0 20px #0ff;
|
|
}
|
|
100% {
|
|
text-shadow:
|
|
0 0 2px #fff,
|
|
0 0 5px #fff,
|
|
0 0 10px #0ff,
|
|
0 0 15px #0ff;
|
|
}
|
|
}
|
|
|
|
@keyframes neonFlicker {
|
|
0%, 100% {
|
|
opacity: 1;
|
|
}
|
|
41%, 44% {
|
|
opacity: 0.8;
|
|
}
|
|
42%, 43% {
|
|
opacity: 0.5;
|
|
}
|
|
78%, 89% {
|
|
opacity: 1;
|
|
}
|
|
79%, 88% {
|
|
opacity: 0.6;
|
|
}
|
|
}
|
|
|
|
@keyframes borderGlow {
|
|
0%, 100% {
|
|
box-shadow:
|
|
0 0 5px #0ff,
|
|
inset 0 0 5px #0ff;
|
|
}
|
|
50% {
|
|
box-shadow:
|
|
0 0 20px #0ff,
|
|
inset 0 0 10px #0ff;
|
|
}
|
|
}
|
|
|
|
@keyframes floatEffect {
|
|
0%, 100% {
|
|
transform: translateY(0) translateZ(0);
|
|
}
|
|
50% {
|
|
transform: translateY(-3px) translateZ(10px);
|
|
}
|
|
}
|
|
|
|
@keyframes glitchShift {
|
|
0%, 100% {
|
|
clip-path: inset(0 0 0 0);
|
|
}
|
|
10% {
|
|
clip-path: inset(10% 0 80% 0);
|
|
transform: translate(-2px);
|
|
}
|
|
15% {
|
|
clip-path: inset(80% 0 10% 0);
|
|
transform: translate(2px);
|
|
}
|
|
}
|
|
|
|
@keyframes glitchOffset {
|
|
0%, 100% {
|
|
transform: translate(0);
|
|
}
|
|
10% {
|
|
transform: translate(-3px, 2px);
|
|
}
|
|
15% {
|
|
transform: translate(3px, -2px);
|
|
}
|
|
}
|
|
|
|
@keyframes particleEffect {
|
|
0% {
|
|
background-size: 100% 100%;
|
|
background-position: 0% 0%;
|
|
}
|
|
50% {
|
|
background-size: 200% 200%;
|
|
background-position: 100% 100%;
|
|
}
|
|
100% {
|
|
background-size: 100% 100%;
|
|
background-position: 0% 0%;
|
|
}
|
|
}
|
|
|
|
/* LIGHTNING STYLE */
|
|
.lightning-username {
|
|
position: relative;
|
|
display: inline-block;
|
|
font-family: 'Orbitron', sans-serif;
|
|
font-weight: 900;
|
|
color: #FFD700;
|
|
text-transform: uppercase;
|
|
letter-spacing: 1px;
|
|
padding: 0 10px;
|
|
animation: powerUp 2s infinite;
|
|
}
|
|
|
|
.lightning-username::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
width: 120%;
|
|
height: 120%;
|
|
background: radial-gradient(
|
|
circle,
|
|
rgba(255, 215, 0, 0.6) 0%,
|
|
rgba(255, 140, 0, 0.4) 40%,
|
|
transparent 70%
|
|
);
|
|
animation: aura 1s ease-in-out infinite;
|
|
z-index: -1;
|
|
}
|
|
|
|
.lightning-username::after {
|
|
content: '⚡';
|
|
position: absolute;
|
|
font-size: 1.2em;
|
|
color: #FFA500;
|
|
animation: lightning 0.5s infinite;
|
|
opacity: 0.8;
|
|
}
|
|
|
|
@keyframes powerUp {
|
|
0%, 100% {
|
|
text-shadow:
|
|
0 0 5px #FFD700,
|
|
0 0 10px #FFA500,
|
|
0 0 20px #FF8C00;
|
|
transform: scale(1);
|
|
}
|
|
50% {
|
|
text-shadow:
|
|
0 0 10px #FFD700,
|
|
0 0 20px #FFA500,
|
|
0 0 40px #FF8C00;
|
|
transform: scale(1.05);
|
|
}
|
|
}
|
|
|
|
@keyframes aura {
|
|
0%, 100% {
|
|
transform: translate(-50%, -50%) scale(1);
|
|
opacity: 0.6;
|
|
}
|
|
50% {
|
|
transform: translate(-50%, -50%) scale(1.1);
|
|
opacity: 0.8;
|
|
}
|
|
}
|
|
|
|
@keyframes lightning {
|
|
0%, 100% {
|
|
left: -15px;
|
|
transform: rotate(-45deg);
|
|
}
|
|
50% {
|
|
left: calc(100% + 5px);
|
|
transform: rotate(45deg);
|
|
}
|
|
}
|
|
|
|
/* DRAGON BALL Z KI STYLE */
|
|
.dbz-ki-username {
|
|
position: relative;
|
|
display: inline-block;
|
|
font-family: 'Orbitron', sans-serif;
|
|
font-weight: bold;
|
|
color: #fff;
|
|
text-shadow: 0 0 10px #4444ff;
|
|
padding: 0 10px;
|
|
animation: powerLevel 2s infinite;
|
|
}
|
|
|
|
.dbz-ki-username::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background: linear-gradient(90deg,
|
|
transparent 0%,
|
|
rgba(68, 138, 255, 0.8) 50%,
|
|
transparent 100%
|
|
);
|
|
filter: blur(4px);
|
|
animation: kiFlow 1.5s infinite;
|
|
z-index: -1;
|
|
}
|
|
|
|
.dbz-ki-username::after {
|
|
content: '';
|
|
position: absolute;
|
|
top: -10px;
|
|
left: -10px;
|
|
right: -10px;
|
|
bottom: -10px;
|
|
background: radial-gradient(
|
|
circle,
|
|
rgba(0, 149, 255, 0.3) 0%,
|
|
rgba(0, 98, 255, 0.1) 50%,
|
|
transparent 70%
|
|
);
|
|
animation: kiAura 2s infinite;
|
|
z-index: -2;
|
|
}
|
|
|
|
@keyframes powerLevel {
|
|
0%, 100% {
|
|
transform: scale(1);
|
|
}
|
|
50% {
|
|
transform: scale(1.05);
|
|
}
|
|
}
|
|
|
|
@keyframes kiFlow {
|
|
0% {
|
|
transform: translateX(-100%) skewX(-20deg);
|
|
opacity: 0;
|
|
}
|
|
50% {
|
|
opacity: 1;
|
|
}
|
|
100% {
|
|
transform: translateX(100%) skewX(-20deg);
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
@keyframes kiAura {
|
|
0%, 100% {
|
|
transform: scale(1);
|
|
opacity: 0.6;
|
|
}
|
|
50% {
|
|
transform: scale(1.1);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
/* ELECTRIC SSJ2 EFFECT */
|
|
.ssj2-electric {
|
|
position: relative;
|
|
}
|
|
|
|
.ssj2-electric::before,
|
|
.ssj2-electric::after {
|
|
content: '';
|
|
position: absolute;
|
|
inset: -10px;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.ssj2-electric::before {
|
|
background:
|
|
repeating-linear-gradient(
|
|
90deg,
|
|
transparent,
|
|
transparent 15px,
|
|
#4444ff 15px,
|
|
transparent 16px
|
|
),
|
|
repeating-linear-gradient(
|
|
0deg,
|
|
transparent,
|
|
transparent 15px,
|
|
#ffffff 15px,
|
|
transparent 16px
|
|
);
|
|
filter: blur(1px);
|
|
opacity: 0;
|
|
animation: electricFlash 0.2s steps(1) infinite;
|
|
z-index: 2;
|
|
}
|
|
|
|
.ssj2-electric::after {
|
|
background:
|
|
repeating-linear-gradient(
|
|
45deg,
|
|
transparent,
|
|
transparent 10px,
|
|
#4444ff 10px,
|
|
transparent 11px
|
|
),
|
|
repeating-linear-gradient(
|
|
-45deg,
|
|
transparent,
|
|
transparent 10px,
|
|
#ffffff 10px,
|
|
transparent 11px
|
|
);
|
|
filter: blur(0.5px);
|
|
opacity: 0;
|
|
animation: electricFlash 0.2s steps(1) infinite 0.1s;
|
|
z-index: 2;
|
|
}
|
|
|
|
@keyframes electricFlash {
|
|
0%, 100% { opacity: 0; transform: translate(0, 0) rotate(0deg); }
|
|
25% { opacity: 0.4; transform: translate(1px, -1px) rotate(0.5deg); }
|
|
50% { opacity: 0.7; transform: translate(-1px, 1px) rotate(-0.5deg); }
|
|
75% { opacity: 0.4; transform: translate(1px, 1px) rotate(0.5deg); }
|
|
}
|
|
|
|
|