hypermc/website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add global CSS enhancements for visual effects

Browse Source 
- Implemented dynamic gradient background animation for body
- Added neon glow hover effect to .btn-minecraft
- Applied glassmorphism effect to .section-bg
- Introduced text glitch effect for .minecraft-font on hover
- Enhanced .nav-btn with micro-animation shine effect
This commit is contained in:
snxraven
2025-07-06 02:25:19 -04:00
parent b9201c0534
commit 21211ff493
2 changed files with 162 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files

108
css/style.css
View File

@@ -15,9 +15,9 @@ html, body {
}
body {
background-color: #0b0f2b; /* Explicit fallback */
background: -webkit-linear-gradient(135deg, #0b0f2b, #1a2249);
background: linear-gradient(135deg, #0b0f2b, #1a2249);
background-size: 200% 200%;
animation: bgShift 15s ease infinite;
font-family: 'Roboto', 'Verdana', sans-serif;
color: #e0e7ff;
overflow-x: hidden;
@@ -26,19 +26,23 @@ body {
scroll-behavior: smooth;
}
@keyframes bgShift {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
/* Custom Scrollbar Styles */
::-webkit-scrollbar {
width: 8px;
}
::-webkit-scrollbar-track {
background: -webkit-linear-gradient(135deg, #0b0f2b, #1a2249); /* Match body gradient */
background: linear-gradient(135deg, #0b0f2b, #1a2249);
border: none; /* Ensure no border */
border: none;
}
::-webkit-scrollbar-thumb {
background: -webkit-linear-gradient(45deg, #14b8a6, #3b82f6);
background: linear-gradient(45deg, #14b8a6, #3b82f6);
border-radius: 4px;
border: 1px solid rgba(10, 17, 40, 0.8);
@@ -46,7 +50,6 @@ body {
}
::-webkit-scrollbar-thumb:hover {
background: -webkit-linear-gradient(45deg, #2dd4bf, #60a5fa);
background: linear-gradient(45deg, #2dd4bf, #60a5fa);
box-shadow: 0 0 10px rgba(20, 184, 166, 0.5);
}
@@ -57,20 +60,53 @@ body {
text-shadow: 0 0 8px rgba(20, 184, 166, 0.5);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
background: -webkit-linear-gradient(to right, #14b8a6, #3b82f6);
background: linear-gradient(to right, #14b8a6, #3b82f6);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
transform: translateZ(0);
position: relative;
}
.minecraft-font:hover {
animation: glitch 0.3s linear infinite;
}
@keyframes glitch {
0% {
transform: translate(0);
text-shadow: 0 0 8px rgba(20, 184, 166, 0.5);
}
20% {
transform: translate(-2px, 2px);
text-shadow: 0 0 8px rgba(20, 184, 166, 0.5), 2px 0 #3b82f6;
}
40% {
transform: translate(2px, -2px);
text-shadow: 0 0 8px rgba(20, 184, 166, 0.5), -2px 0 #14b8a6;
}
60% {
transform: translate(-2px, 0);
text-shadow: 0 0 8px rgba(20, 184, 166, 0.5), 2px 0 #3b82f6;
}
80% {
transform: translate(2px, 0);
text-shadow: 0 0 8px rgba(20, 184, 166, 0.5), -2px 0 #14b8a6;
}
100% {
transform: translate(0);
text-shadow: 0 0 8px rgba(20, 184, 166, 0.5);
}
}
.section-bg {
background: rgba(10, 17, 40, 0.75);
background: rgba(10, 17, 40, 0.3);
-webkit-backdrop-filter: blur(12px);
backdrop-filter: blur(12px);
border-radius: 24px;
border: 1px solid rgba(255, 255, 255, 0.1);
box-shadow: 0 6px 25px rgba(0, 0, 0, 0.4), inset 0 0 15px rgba(255, 255, 255, 0.08);
transition: box-shadow 0.4s ease;
border: 1px solid rgba(255, 255, 255, 0.15);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2), inset 0 0 15px rgba(255, 255, 255, 0.1);
transition: box-shadow 0.4s ease, background 0.4s ease, -webkit-backdrop-filter 0.4s ease, backdrop-filter 0.4s ease;
animation: floatSection 4s ease-in-out infinite;
z-index: 2;
}
@@ -90,6 +126,9 @@ body {
}
.section-bg:hover {
background: rgba(10, 17, 40, 0.4);
-webkit-backdrop-filter: blur(14px);
backdrop-filter: blur(14px);
box-shadow: 0 12px 40px rgba(20, 184, 166, 0.4), inset 0 0 20px rgba(255, 255, 255, 0.12);
}
@@ -103,7 +142,6 @@ body {
}
.btn-minecraft {
background: -webkit-linear-gradient(45deg, #14b8a6, #3b82f6);
background: linear-gradient(45deg, #14b8a6, #3b82f6);
background-size: 300% 300%;
border: none;
@@ -116,6 +154,7 @@ body {
overflow: hidden;
transition: transform 0.3s, box-shadow 0.3s;
animation: gradientShift 5s ease infinite;
box-shadow: 0 0 15px rgba(20, 184, 166, 0.5), 0 0 25px rgba(59, 130, 246, 0.3);
}
.btn-minecraft::before {
@@ -125,7 +164,6 @@ body {
left: -100%;
width: 100%;
height: 100%;
background: -webkit-linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
transition: left 0.5s;
}
@@ -136,7 +174,8 @@ body {
.btn-minecraft:hover {
transform: scale(1.1);
box-shadow: 0 8px 30px rgba(20, 184, 166, 0.7);
box-shadow: 0 0 20px rgba(20, 184, 166, 0.8), 0 0 30px rgba(59, 130, 246, 0.5), 0 0 40px rgba(20, 184, 166, 0.3);
animation: neonPulse 1.5s ease-in-out infinite;
}
.btn-minecraft::after {
@@ -158,6 +197,15 @@ body {
opacity: 1;
}
@keyframes neonPulse {
0%, 100% {
filter: brightness(1);
}
50% {
filter: brightness(1.2);
}
}
@keyframes gradientShift {
0% {
background-position: 0% 50%;
@@ -215,7 +263,6 @@ body {
left: 0;
width: 100%;
height: 100%;
background: -webkit-linear-gradient(to bottom, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.6));
background: linear-gradient(to bottom, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.6));
z-index: 2;
}
@@ -310,7 +357,6 @@ body {
position: absolute;
width: 8px;
height: 8px;
background: -webkit-linear-gradient(45deg, #14b8a6, #3b82f6);
background: linear-gradient(45deg, #14b8a6, #3b82f6);
border-radius: 50%;
opacity: 0;
@@ -318,8 +364,8 @@ body {
z-index: -1;
pointer-events: none;
box-shadow: 0 0 15px rgba(20, 184, 166, 0.9);
mix-blend-mode: screen; /* Blend with background */
will-change: transform, opacity; /* Optimize rendering */
mix-blend-mode: screen;
will-change: transform, opacity;
}
.particle.large {
@@ -347,7 +393,6 @@ body {
}
.header-bg {
background: -webkit-linear-gradient(180deg, rgba(10, 17, 40, 0.95), rgba(5, 15, 35, 0.95));
background: linear-gradient(180deg, rgba(10, 17, 40, 0.95), rgba(5, 15, 35, 0.95));
border-bottom: 1px solid rgba(255, 255, 255, 0.12);
position: relative;
@@ -375,7 +420,6 @@ footer a:hover {
.nav-btn {
display: inline-block;
padding: 0.5rem 1rem;
background: -webkit-linear-gradient(to right, #14b8a6, #3b82f6);
background: linear-gradient(to right, #14b8a6, #3b82f6);
color: white;
text-decoration: none;
@@ -385,6 +429,23 @@ footer a:hover {
transition: transform 0.2s, box-shadow 0.2s;
min-width: 100px;
text-align: center;
position: relative;
overflow: hidden;
}
.nav-btn::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
transition: left 0.4s ease;
}
.nav-btn:hover::before {
left: 100%;
}
.nav-btn:hover {
@@ -418,7 +479,6 @@ footer a:hover {
opacity: 0;
visibility: hidden;
transition: opacity 0.3s ease, visibility 0.3s ease;
background: -webkit-linear-gradient(135deg, rgba(10, 17, 40, 0.98), rgba(5, 15, 35, 0.98));
background: linear-gradient(135deg, rgba(10, 17, 40, 0.98), rgba(5, 15, 35, 0.98));
-webkit-backdrop-filter: blur(5px);
backdrop-filter: blur(5px);
@@ -448,10 +508,10 @@ footer a:hover {
}
/* Safari-specific fix for particle rendering */
@media not all and (min-resolution:.001dpcm) { /* Targets Safari */
@media not all and (min-resolution:.001dpcm) {
.particle {
z-index: -2; /* Lower z-index to ensure background visibility */
backface-visibility: hidden; /* Prevent rendering glitches */
z-index: -2;
backface-visibility: hidden;
}
}