71 lines
1.2 KiB
CSS
71 lines
1.2 KiB
CSS
/* HomePage动画样式 */
|
|
|
|
@keyframes float {
|
|
0%, 100% {
|
|
transform: translateY(0px);
|
|
}
|
|
50% {
|
|
transform: translateY(-20px);
|
|
}
|
|
}
|
|
|
|
@keyframes pulse {
|
|
0%, 100% {
|
|
opacity: 0.5;
|
|
}
|
|
50% {
|
|
opacity: 0.8;
|
|
}
|
|
}
|
|
|
|
@keyframes slideInUp {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(30px);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
.float-animation {
|
|
animation: float 6s ease-in-out infinite;
|
|
}
|
|
|
|
.float-animation-reverse {
|
|
animation: float 8s ease-in-out infinite reverse;
|
|
}
|
|
|
|
.pulse-animation {
|
|
animation: pulse 4s ease-in-out infinite;
|
|
}
|
|
|
|
.slide-in-animation {
|
|
animation: slideInUp 0.8s ease-out;
|
|
}
|
|
|
|
/* 毛玻璃效果 */
|
|
.glassmorphism {
|
|
background: rgba(255, 255, 255, 0.1);
|
|
backdrop-filter: blur(10px);
|
|
border: 1px solid rgba(255, 255, 255, 0.2);
|
|
}
|
|
|
|
/* 渐变边框 */
|
|
.gradient-border {
|
|
position: relative;
|
|
background: linear-gradient(135deg, rgba(255, 215, 0, 0.1) 0%, rgba(255, 165, 0, 0.05) 100%);
|
|
}
|
|
|
|
.gradient-border::before {
|
|
content: '';
|
|
position: absolute;
|
|
inset: 0;
|
|
padding: 2px;
|
|
background: linear-gradient(135deg, #FFD700, #FFA500);
|
|
border-radius: inherit;
|
|
mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
|
|
mask-composite: xor;
|
|
}
|