优化

Author: LeonardoC37

css/style.css

@@ -37,26 +37,49 @@ body {
     overflow: hidden;
 }
 
+/* 数字雨效果 */
 .bg-animation::before {
+    content: '';
+    position: absolute;
+    top: -100%;
+    left: 0;
+    width: 100%;
+    height: 200%;
+    background-image: 
+        linear-gradient(0deg, transparent 70%, rgba(99, 102, 241, 0.1) 71%, rgba(99, 102, 241, 0.1) 72%, transparent 73%),
+        linear-gradient(90deg, transparent 70%, rgba(139, 92, 246, 0.08) 71%, rgba(139, 92, 246, 0.08) 72%, transparent 73%);
+    background-size: 50px 50px, 80px 80px;
+    animation: matrix-rain 20s linear infinite;
+}
+
+/* 光束扫描效果 */
+.bg-animation::after {
     content: '';
     position: absolute;
     top: 0;
     left: -100%;
     width: 200%;
     height: 100%;
-    background: repeating-linear-gradient(
+    background: linear-gradient(
         90deg,
-        transparent,
-        transparent 2px,
-        rgba(99, 102, 241, 0.03) 2px,
-        rgba(99, 102, 241, 0.03) 4px
+        transparent 0%,
+        transparent 40%,
+        rgba(99, 102, 241, 0.05) 50%,
+        rgba(236, 72, 153, 0.05) 60%,
+        transparent 100%
     );
-    animation: scan 8s linear infinite;
+    animation: cyber-scan 12s ease-in-out infinite;
+}
+
+@keyframes matrix-rain {
+    0% { transform: translateY(0) translateX(0); }
+    100% { transform: translateY(100%) translateX(20px); }
 }
 
-@keyframes scan {
+@keyframes cyber-scan {
     0% { transform: translateX(0); }
-    100% { transform: translateX(50%); }
+    50% { transform: translateX(50%); }
+    100% { transform: translateX(0); }
 }
 
 /* ===== 导航栏 ===== */
@@ -451,7 +474,7 @@ tr:hover {
     margin: 1rem 0;
 }
 
-/* ===== 粒子动画背景 ===== */
+/* ===== 高级粒子动画背景 ===== */
 .particles {
     position: fixed;
     top: 0;
@@ -462,35 +485,44 @@ tr:hover {
     pointer-events: none;
 }
 
-.particles::before,
-.particles::after {
+/* 粒子群1 */
+.particles::before {
     content: '';
     position: absolute;
-    width: 2px;
-    height: 2px;
-    background: var(--primary-color);
-    box-shadow: 0 0 10px var(--primary-color);
-    animation: float 15s infinite;
-}
-
+    width: 100%;
+    height: 100%;
+    background-image: 
+        radial-gradient(2px 2px at 20px 30px, rgba(99, 102, 241, 0.3), transparent),
+        radial-gradient(2px 2px at 40px 70px, rgba(139, 92, 246, 0.2), transparent),
+        radial-gradient(1px 1px at 90px 40px, rgba(236, 72, 153, 0.4), transparent),
+        radial-gradient(1px 1px at 130px 80px, rgba(99, 102, 241, 0.2), transparent),
+        radial-gradient(2px 2px at 160px 30px, rgba(139, 92, 246, 0.3), transparent);
+    background-repeat: repeat;
+    background-size: 200px 100px;
+    animation: cosmic-drift 25s linear infinite;
+}
+
+/* 粒子群2 */
 .particles::after {
-    animation-delay: 7.5s;
-    background: var(--accent-color);
-    box-shadow: 0 0 10px var(--accent-color);
-}
-
-@keyframes float {
-    0%, 100% {
-        transform: translate(0, 0) scale(0);
-        opacity: 0;
-    }
-    10% {
-        transform: translate(10vw, 10vh) scale(1);
-        opacity: 1;
+    content: '';
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    background-image: 
+        radial-gradient(1px 1px at 60px 50px, rgba(236, 72, 153, 0.2), transparent),
+        radial-gradient(2px 2px at 120px 20px, rgba(99, 102, 241, 0.1), transparent),
+        radial-gradient(1px 1px at 180px 90px, rgba(139, 92, 246, 0.3), transparent);
+    background-repeat: repeat;
+    background-size: 250px 120px;
+    animation: cosmic-drift 30s linear infinite reverse;
+}
+
+@keyframes cosmic-drift {
+    0% {
+        transform: translateX(0) translateY(0);
     }
-    90% {
-        transform: translate(90vw, 90vh) scale(1);
-        opacity: 1;
+    100% {
+        transform: translateX(-200px) translateY(-100px);
     }
 }
 
@@ -916,10 +948,13 @@ footer {
     margin: 0 auto;
     padding: 0 2rem;
     color: var(--text-secondary);
+    font-size: 0.9rem;
+    line-height: 1.4;
 }
 
 .footer-content p {
     margin: 0.5rem 0;
+    font-size: 0.85rem;
 }
 
 /* ===== Hero 副标题 ===== */
@@ -1158,4 +1193,205 @@ footer {
         padding: 0.5rem 0.75rem;
         font-size: 0.85rem;
     }
+
+    .floating-contact-btn {
+        width: 50px;
+        height: 50px;
+        bottom: 20px;
+        right: 20px;
+    }
+
+    .modal-content {
+        width: 95%;
+        margin: 10% auto;
+        padding: 1rem;
+    }
+}
+
+/* ===== 邮箱链接样式 ===== */
+.email-link {
+    color: var(--primary-color);
+    text-decoration: none;
+    border-bottom: 1px solid transparent;
+    transition: all 0.3s ease;
+}
+
+.email-link:hover {
+    border-bottom-color: var(--primary-color);
+    text-shadow: 0 0 5px rgba(99, 102, 241, 0.5);
+}
+
+/* ===== 全局联系按钮 ===== */
+.floating-contact-btn {
+    position: fixed;
+    bottom: 30px;
+    right: 30px;
+    width: 60px;
+    height: 60px;
+    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    box-shadow: 0 4px 20px rgba(99, 102, 241, 0.4);
+    cursor: pointer;
+    z-index: 1000;
+    transition: all 0.3s ease;
+    animation: pulse-float 3s ease-in-out infinite;
+}
+
+.floating-contact-btn:hover {
+    transform: scale(1.1);
+    box-shadow: 0 6px 25px rgba(99, 102, 241, 0.6);
+}
+
+.contact-icon {
+    font-size: 1.5rem;
+    animation: bounce 2s ease-in-out infinite;
+}
+
+@keyframes pulse-float {
+    0%, 100% {
+        transform: translateY(0);
+        box-shadow: 0 4px 20px rgba(99, 102, 241, 0.4);
+    }
+    50% {
+        transform: translateY(-5px);
+        box-shadow: 0 8px 25px rgba(99, 102, 241, 0.6);
+    }
+}
+
+@keyframes bounce {
+    0%, 20%, 50%, 80%, 100% {
+        transform: translateY(0);
+    }
+    40% {
+        transform: translateY(-3px);
+    }
+    60% {
+        transform: translateY(-2px);
+    }
+}
+
+/* ===== 联系弹窗样式 ===== */
+.modal {
+    display: none;
+    position: fixed;
+    z-index: 2000;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0, 0, 0, 0.8);
+    backdrop-filter: blur(5px);
+    animation: fadeIn 0.3s ease;
+}
+
+.modal-content {
+    background: var(--bg-medium);
+    margin: 5% auto;
+    padding: 2rem;
+    border: 1px solid var(--border-color);
+    border-radius: 1rem;
+    width: 80%;
+    max-width: 500px;
+    position: relative;
+    animation: slideDown 0.3s ease;
+}
+
+.modal-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 1.5rem;
+    padding-bottom: 1rem;
+    border-bottom: 1px solid var(--border-color);
+}
+
+.modal-header h2 {
+    color: var(--primary-color);
+    margin: 0;
+}
+
+.close {
+    color: var(--text-secondary);
+    font-size: 2rem;
+    font-weight: bold;
+    cursor: pointer;
+    transition: color 0.3s ease;
+}
+
+.close:hover {
+    color: var(--accent-color);
+}
+
+.contact-info {
+    margin-bottom: 2rem;
+}
+
+.contact-item {
+    display: flex;
+    align-items: center;
+    margin-bottom: 1rem;
+    padding: 0.75rem;
+    background: rgba(99, 102, 241, 0.05);
+    border-radius: 0.5rem;
+    border: 1px solid rgba(99, 102, 241, 0.1);
+}
+
+.contact-label {
+    font-weight: bold;
+    margin-right: 0.5rem;
+    min-width: 80px;
+}
+
+.quick-contact h3 {
+    color: var(--primary-color);
+    margin-bottom: 1rem;
+}
+
+.form-group {
+    margin-bottom: 1rem;
+}
+
+.form-group label {
+    display: block;
+    margin-bottom: 0.5rem;
+    color: var(--text-primary);
+    font-weight: 500;
+}
+
+.form-group input,
+.form-group textarea {
+    width: 100%;
+    padding: 0.75rem;
+    background: var(--bg-light);
+    border: 1px solid var(--border-color);
+    border-radius: 0.5rem;
+    color: var(--text-primary);
+    transition: all 0.3s ease;
+    font-family: inherit;
+}
+
+.form-group input:focus,
+.form-group textarea:focus {
+    outline: none;
+    border-color: var(--primary-color);
+    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
+}
+
+.form-group textarea {
+    resize: vertical;
+    min-height: 100px;
+}
+
+@keyframes slideDown {
+    from {
+        opacity: 0;
+        transform: translateY(-50px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
 }