371 Zeilen
7.8 KiB
CSS
371 Zeilen
7.8 KiB
CSS
/* Enhanced Modern Animations & Effects */
|
|
|
|
/* Glassmorphism Base */
|
|
.glass {
|
|
background: rgba(255, 255, 255, 0.1);
|
|
backdrop-filter: blur(10px);
|
|
-webkit-backdrop-filter: blur(10px);
|
|
border: 1px solid rgba(255, 255, 255, 0.2);
|
|
}
|
|
|
|
.glass-dark {
|
|
background: rgba(0, 0, 0, 0.3);
|
|
backdrop-filter: blur(20px);
|
|
-webkit-backdrop-filter: blur(20px);
|
|
border: 1px solid rgba(255, 255, 255, 0.1);
|
|
}
|
|
|
|
/* Premium Glow Effects */
|
|
.glow-blue {
|
|
box-shadow:
|
|
0 0 20px rgba(15, 114, 181, 0.5),
|
|
0 0 40px rgba(15, 114, 181, 0.3),
|
|
0 0 60px rgba(15, 114, 181, 0.1);
|
|
}
|
|
|
|
.text-glow {
|
|
text-shadow:
|
|
0 0 10px rgba(15, 114, 181, 0.8),
|
|
0 0 20px rgba(15, 114, 181, 0.6),
|
|
0 0 30px rgba(15, 114, 181, 0.4);
|
|
}
|
|
|
|
/* Smooth Fade In Animations */
|
|
@keyframes fadeInUp {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(30px);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
@keyframes fadeInScale {
|
|
from {
|
|
opacity: 0;
|
|
transform: scale(0.9);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: scale(1);
|
|
}
|
|
}
|
|
|
|
@keyframes slideInRight {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateX(-50px);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateX(0);
|
|
}
|
|
}
|
|
|
|
/* Staggered Animation Classes */
|
|
.animate-in {
|
|
opacity: 0;
|
|
animation: fadeInUp 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
|
|
}
|
|
|
|
.animate-in-scale {
|
|
opacity: 0;
|
|
animation: fadeInScale 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
|
|
}
|
|
|
|
.stagger-1 { animation-delay: 0.1s; }
|
|
.stagger-2 { animation-delay: 0.2s; }
|
|
.stagger-3 { animation-delay: 0.3s; }
|
|
.stagger-4 { animation-delay: 0.4s; }
|
|
.stagger-5 { animation-delay: 0.5s; }
|
|
|
|
/* Floating Animation */
|
|
@keyframes float {
|
|
0%, 100% { transform: translateY(0px); }
|
|
50% { transform: translateY(-20px); }
|
|
}
|
|
|
|
.floating {
|
|
animation: float 6s ease-in-out infinite;
|
|
}
|
|
|
|
/* Pulse Glow Animation */
|
|
@keyframes pulseGlow {
|
|
0%, 100% {
|
|
box-shadow:
|
|
0 0 5px rgba(15, 114, 181, 0.5),
|
|
0 0 10px rgba(15, 114, 181, 0.3);
|
|
}
|
|
50% {
|
|
box-shadow:
|
|
0 0 20px rgba(15, 114, 181, 0.8),
|
|
0 0 30px rgba(15, 114, 181, 0.5),
|
|
0 0 40px rgba(15, 114, 181, 0.3);
|
|
}
|
|
}
|
|
|
|
.pulse-glow {
|
|
animation: pulseGlow 2s ease-in-out infinite;
|
|
}
|
|
|
|
/* Gradient Animation */
|
|
@keyframes gradientShift {
|
|
0% { background-position: 0% 50%; }
|
|
50% { background-position: 100% 50%; }
|
|
100% { background-position: 0% 50%; }
|
|
}
|
|
|
|
.gradient-animated {
|
|
background: linear-gradient(
|
|
-45deg,
|
|
#0f72b5,
|
|
#00406e,
|
|
#0f72b5,
|
|
#1e90ff
|
|
);
|
|
background-size: 400% 400%;
|
|
animation: gradientShift 15s ease infinite;
|
|
}
|
|
|
|
/* Text Reveal Animation */
|
|
@keyframes textReveal {
|
|
from {
|
|
clip-path: polygon(0 0, 0 0, 0 100%, 0% 100%);
|
|
}
|
|
to {
|
|
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
|
|
}
|
|
}
|
|
|
|
.text-reveal {
|
|
animation: textReveal 1.5s cubic-bezier(0.77, 0, 0.175, 1) forwards;
|
|
}
|
|
|
|
/* Typewriter Effect */
|
|
@keyframes typewriter {
|
|
from { width: 0; }
|
|
to { width: 100%; }
|
|
}
|
|
|
|
@keyframes blink {
|
|
50% { border-color: transparent; }
|
|
}
|
|
|
|
.typewriter {
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
border-right: 3px solid #0f72b5;
|
|
animation:
|
|
typewriter 3s steps(40) forwards,
|
|
blink 0.75s step-end infinite;
|
|
}
|
|
|
|
/* Morphing Blob Background */
|
|
@keyframes morph {
|
|
0% { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; }
|
|
50% { border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%; }
|
|
100% { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; }
|
|
}
|
|
|
|
.blob {
|
|
background: linear-gradient(45deg, #0f72b5, #00406e);
|
|
animation: morph 8s ease-in-out infinite;
|
|
filter: blur(40px);
|
|
opacity: 0.7;
|
|
}
|
|
|
|
/* Card Hover Effects */
|
|
.card-hover-lift {
|
|
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
}
|
|
|
|
.card-hover-lift:hover {
|
|
transform: translateY(-10px) scale(1.02);
|
|
box-shadow:
|
|
0 20px 40px rgba(0, 0, 0, 0.15),
|
|
0 0 20px rgba(15, 114, 181, 0.3);
|
|
}
|
|
|
|
/* Magnetic Button Effect */
|
|
.magnetic-button {
|
|
position: relative;
|
|
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
|
|
}
|
|
|
|
.magnetic-button::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
width: 0;
|
|
height: 0;
|
|
border-radius: 50%;
|
|
background: rgba(255, 255, 255, 0.3);
|
|
transform: translate(-50%, -50%);
|
|
transition: width 0.6s, height 0.6s;
|
|
}
|
|
|
|
.magnetic-button:hover::before {
|
|
width: 300px;
|
|
height: 300px;
|
|
}
|
|
|
|
/* Parallax Layers */
|
|
.parallax-slow { transform: translateZ(-1px) scale(1.5); }
|
|
.parallax-medium { transform: translateZ(-2px) scale(2); }
|
|
.parallax-fast { transform: translateZ(-3px) scale(2.5); }
|
|
|
|
/* Reveal on Scroll */
|
|
.reveal {
|
|
opacity: 0;
|
|
transform: translateY(50px);
|
|
transition: all 1s cubic-bezier(0.4, 0, 0.2, 1);
|
|
}
|
|
|
|
.reveal.active {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
|
|
/* Glitch Effect */
|
|
@keyframes glitch {
|
|
0%, 100% {
|
|
text-shadow:
|
|
0.05em 0 0 rgba(255, 0, 0, 0.75),
|
|
-0.05em -0.025em 0 rgba(0, 255, 0, 0.75),
|
|
0.025em 0.05em 0 rgba(0, 0, 255, 0.75);
|
|
}
|
|
14% {
|
|
text-shadow:
|
|
0.05em 0 0 rgba(255, 0, 0, 0.75),
|
|
-0.05em -0.025em 0 rgba(0, 255, 0, 0.75),
|
|
0.025em 0.05em 0 rgba(0, 0, 255, 0.75);
|
|
}
|
|
15% {
|
|
text-shadow:
|
|
-0.05em -0.025em 0 rgba(255, 0, 0, 0.75),
|
|
0.025em 0.025em 0 rgba(0, 255, 0, 0.75),
|
|
-0.05em -0.05em 0 rgba(0, 0, 255, 0.75);
|
|
}
|
|
49% {
|
|
text-shadow:
|
|
-0.05em -0.025em 0 rgba(255, 0, 0, 0.75),
|
|
0.025em 0.025em 0 rgba(0, 255, 0, 0.75),
|
|
-0.05em -0.05em 0 rgba(0, 0, 255, 0.75);
|
|
}
|
|
50% {
|
|
text-shadow:
|
|
0.025em 0.05em 0 rgba(255, 0, 0, 0.75),
|
|
0.05em 0 0 rgba(0, 255, 0, 0.75),
|
|
0 -0.05em 0 rgba(0, 0, 255, 0.75);
|
|
}
|
|
99% {
|
|
text-shadow:
|
|
0.025em 0.05em 0 rgba(255, 0, 0, 0.75),
|
|
0.05em 0 0 rgba(0, 255, 0, 0.75),
|
|
0 -0.05em 0 rgba(0, 0, 255, 0.75);
|
|
}
|
|
}
|
|
|
|
.glitch {
|
|
animation: glitch 1s linear infinite;
|
|
}
|
|
|
|
/* Smooth Scroll Indicator */
|
|
@keyframes scrollDown {
|
|
0% {
|
|
transform: translateY(0);
|
|
opacity: 0;
|
|
}
|
|
40% {
|
|
opacity: 1;
|
|
}
|
|
80% {
|
|
transform: translateY(20px);
|
|
opacity: 0;
|
|
}
|
|
100% {
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
.scroll-indicator-animated {
|
|
animation: scrollDown 2s infinite;
|
|
}
|
|
|
|
/* Loading Shimmer */
|
|
@keyframes shimmer {
|
|
0% {
|
|
background-position: -1000px 0;
|
|
}
|
|
100% {
|
|
background-position: 1000px 0;
|
|
}
|
|
}
|
|
|
|
.shimmer {
|
|
background: linear-gradient(
|
|
90deg,
|
|
rgba(255, 255, 255, 0) 0%,
|
|
rgba(255, 255, 255, 0.3) 50%,
|
|
rgba(255, 255, 255, 0) 100%
|
|
);
|
|
background-size: 1000px 100%;
|
|
animation: shimmer 2s infinite;
|
|
}
|
|
|
|
/* Orbit Animation */
|
|
@keyframes orbit {
|
|
from { transform: rotate(0deg) translateX(100px) rotate(0deg); }
|
|
to { transform: rotate(360deg) translateX(100px) rotate(-360deg); }
|
|
}
|
|
|
|
.orbit {
|
|
animation: orbit 20s linear infinite;
|
|
}
|
|
|
|
/* Perspective Tilt */
|
|
.tilt-card {
|
|
transform-style: preserve-3d;
|
|
transition: transform 0.5s;
|
|
}
|
|
|
|
.tilt-card:hover {
|
|
transform: perspective(1000px) rotateX(10deg) rotateY(-10deg) scale(1.05);
|
|
}
|
|
|
|
/* Neon Glow Text */
|
|
.neon-text {
|
|
color: #fff;
|
|
text-shadow:
|
|
0 0 7px #fff,
|
|
0 0 10px #fff,
|
|
0 0 21px #fff,
|
|
0 0 42px #0f72b5,
|
|
0 0 82px #0f72b5,
|
|
0 0 92px #0f72b5,
|
|
0 0 102px #0f72b5,
|
|
0 0 151px #0f72b5;
|
|
}
|
|
|
|
/* Water Ripple Effect */
|
|
@keyframes ripple {
|
|
0% {
|
|
transform: scale(0);
|
|
opacity: 1;
|
|
}
|
|
100% {
|
|
transform: scale(4);
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
.ripple::before {
|
|
content: '';
|
|
position: absolute;
|
|
border: 1px solid #0f72b5;
|
|
border-radius: 50%;
|
|
animation: ripple 1s ease-out;
|
|
} |