@@ -37,49 +37,26 @@ body {
3737 overflow : hidden;
3838}
3939
40- /* 数字雨效果 */
4140.bg-animation ::before {
42- content : '' ;
43- position : absolute;
44- top : -100% ;
45- left : 0 ;
46- width : 100% ;
47- height : 200% ;
48- background-image :
49- linear-gradient (0deg , transparent 70% , rgba (99 , 102 , 241 , 0.1 ) 71% , rgba (99 , 102 , 241 , 0.1 ) 72% , transparent 73% ),
50- linear-gradient (90deg , transparent 70% , rgba (139 , 92 , 246 , 0.08 ) 71% , rgba (139 , 92 , 246 , 0.08 ) 72% , transparent 73% );
51- background-size : 50px 50px , 80px 80px ;
52- animation : matrix-rain 20s linear infinite;
53- }
54-
55- /* 光束扫描效果 */
56- .bg-animation ::after {
5741 content : '' ;
5842 position : absolute;
5943 top : 0 ;
6044 left : -100% ;
6145 width : 200% ;
6246 height : 100% ;
63- background : linear-gradient (
47+ background : repeating- linear-gradient (
6448 90deg ,
65- transparent 0% ,
66- transparent 40% ,
67- rgba (99 , 102 , 241 , 0.05 ) 50% ,
68- rgba (236 , 72 , 153 , 0.05 ) 60% ,
69- transparent 100%
49+ transparent,
50+ transparent 2px ,
51+ rgba (99 , 102 , 241 , 0.03 ) 2px ,
52+ rgba (99 , 102 , 241 , 0.03 ) 4px
7053 );
71- animation : cyber-scan 12s ease-in-out infinite;
72- }
73-
74- @keyframes matrix-rain {
75- 0% { transform : translateY (0 ) translateX (0 ); }
76- 100% { transform : translateY (100% ) translateX (20px ); }
54+ animation : scan 8s linear infinite;
7755}
7856
79- @keyframes cyber- scan {
57+ @keyframes scan {
8058 0% { transform : translateX (0 ); }
81- 50% { transform : translateX (50% ); }
82- 100% { transform : translateX (0 ); }
59+ 100% { transform : translateX (50% ); }
8360}
8461
8562/* ===== 导航栏 ===== */
@@ -474,7 +451,7 @@ tr:hover {
474451 margin : 1rem 0 ;
475452}
476453
477- /* ===== 高级粒子动画背景 ===== */
454+ /* ===== 粒子动画背景 ===== */
478455.particles {
479456 position : fixed;
480457 top : 0 ;
@@ -485,44 +462,35 @@ tr:hover {
485462 pointer-events : none;
486463}
487464
488- /* 粒子群1 */
489- .particles ::before {
490- content : '' ;
491- position : absolute;
492- width : 100% ;
493- height : 100% ;
494- background-image :
495- radial-gradient (2px 2px at 20px 30px , rgba (99 , 102 , 241 , 0.3 ), transparent),
496- radial-gradient (2px 2px at 40px 70px , rgba (139 , 92 , 246 , 0.2 ), transparent),
497- radial-gradient (1px 1px at 90px 40px , rgba (236 , 72 , 153 , 0.4 ), transparent),
498- radial-gradient (1px 1px at 130px 80px , rgba (99 , 102 , 241 , 0.2 ), transparent),
499- radial-gradient (2px 2px at 160px 30px , rgba (139 , 92 , 246 , 0.3 ), transparent);
500- background-repeat : repeat;
501- background-size : 200px 100px ;
502- animation : cosmic-drift 25s linear infinite;
503- }
504-
505- /* 粒子群2 */
465+ .particles ::before ,
506466.particles ::after {
507467 content : '' ;
508468 position : absolute;
509- width : 100% ;
510- height : 100% ;
511- background-image :
512- radial-gradient (1px 1px at 60px 50px , rgba (236 , 72 , 153 , 0.2 ), transparent),
513- radial-gradient (2px 2px at 120px 20px , rgba (99 , 102 , 241 , 0.1 ), transparent),
514- radial-gradient (1px 1px at 180px 90px , rgba (139 , 92 , 246 , 0.3 ), transparent);
515- background-repeat : repeat;
516- background-size : 250px 120px ;
517- animation : cosmic-drift 30s linear infinite reverse;
518- }
519-
520- @keyframes cosmic-drift {
521- 0% {
522- transform : translateX (0 ) translateY (0 );
469+ width : 2px ;
470+ height : 2px ;
471+ background : var (--primary-color );
472+ box-shadow : 0 0 10px var (--primary-color );
473+ animation : float 15s infinite;
474+ }
475+
476+ .particles ::after {
477+ animation-delay : 7.5s ;
478+ background : var (--accent-color );
479+ box-shadow : 0 0 10px var (--accent-color );
480+ }
481+
482+ @keyframes float {
483+ 0% , 100% {
484+ transform : translate (0 , 0 ) scale (0 );
485+ opacity : 0 ;
523486 }
524- 100% {
525- transform : translateX (-200px ) translateY (-100px );
487+ 10% {
488+ transform : translate (10vw , 10vh ) scale (1 );
489+ opacity : 1 ;
490+ }
491+ 90% {
492+ transform : translate (90vw , 90vh ) scale (1 );
493+ opacity : 1 ;
526494 }
527495}
528496
@@ -948,13 +916,10 @@ footer {
948916 margin : 0 auto;
949917 padding : 0 2rem ;
950918 color : var (--text-secondary );
951- font-size : 0.9rem ;
952- line-height : 1.4 ;
953919}
954920
955921.footer-content p {
956922 margin : 0.5rem 0 ;
957- font-size : 0.85rem ;
958923}
959924
960925/* ===== Hero 副标题 ===== */
@@ -1193,205 +1158,4 @@ footer {
11931158 padding : 0.5rem 0.75rem ;
11941159 font-size : 0.85rem ;
11951160 }
1196-
1197- .floating-contact-btn {
1198- width : 50px ;
1199- height : 50px ;
1200- bottom : 20px ;
1201- right : 20px ;
1202- }
1203-
1204- .modal-content {
1205- width : 95% ;
1206- margin : 10% auto;
1207- padding : 1rem ;
1208- }
1209- }
1210-
1211- /* ===== 邮箱链接样式 ===== */
1212- .email-link {
1213- color : var (--primary-color );
1214- text-decoration : none;
1215- border-bottom : 1px solid transparent;
1216- transition : all 0.3s ease;
1217- }
1218-
1219- .email-link : hover {
1220- border-bottom-color : var (--primary-color );
1221- text-shadow : 0 0 5px rgba (99 , 102 , 241 , 0.5 );
1222- }
1223-
1224- /* ===== 全局联系按钮 ===== */
1225- .floating-contact-btn {
1226- position : fixed;
1227- bottom : 30px ;
1228- right : 30px ;
1229- width : 60px ;
1230- height : 60px ;
1231- background : linear-gradient (135deg , var (--primary-color ), var (--secondary-color ));
1232- border-radius : 50% ;
1233- display : flex;
1234- align-items : center;
1235- justify-content : center;
1236- box-shadow : 0 4px 20px rgba (99 , 102 , 241 , 0.4 );
1237- cursor : pointer;
1238- z-index : 1000 ;
1239- transition : all 0.3s ease;
1240- animation : pulse-float 3s ease-in-out infinite;
1241- }
1242-
1243- .floating-contact-btn : hover {
1244- transform : scale (1.1 );
1245- box-shadow : 0 6px 25px rgba (99 , 102 , 241 , 0.6 );
1246- }
1247-
1248- .contact-icon {
1249- font-size : 1.5rem ;
1250- animation : bounce 2s ease-in-out infinite;
1251- }
1252-
1253- @keyframes pulse-float {
1254- 0% , 100% {
1255- transform : translateY (0 );
1256- box-shadow : 0 4px 20px rgba (99 , 102 , 241 , 0.4 );
1257- }
1258- 50% {
1259- transform : translateY (-5px );
1260- box-shadow : 0 8px 25px rgba (99 , 102 , 241 , 0.6 );
1261- }
1262- }
1263-
1264- @keyframes bounce {
1265- 0% , 20% , 50% , 80% , 100% {
1266- transform : translateY (0 );
1267- }
1268- 40% {
1269- transform : translateY (-3px );
1270- }
1271- 60% {
1272- transform : translateY (-2px );
1273- }
1274- }
1275-
1276- /* ===== 联系弹窗样式 ===== */
1277- .modal {
1278- display : none;
1279- position : fixed;
1280- z-index : 2000 ;
1281- left : 0 ;
1282- top : 0 ;
1283- width : 100% ;
1284- height : 100% ;
1285- background-color : rgba (0 , 0 , 0 , 0.8 );
1286- backdrop-filter : blur (5px );
1287- animation : fadeIn 0.3s ease;
1288- }
1289-
1290- .modal-content {
1291- background : var (--bg-medium );
1292- margin : 5% auto;
1293- padding : 2rem ;
1294- border : 1px solid var (--border-color );
1295- border-radius : 1rem ;
1296- width : 80% ;
1297- max-width : 500px ;
1298- position : relative;
1299- animation : slideDown 0.3s ease;
1300- }
1301-
1302- .modal-header {
1303- display : flex;
1304- justify-content : space-between;
1305- align-items : center;
1306- margin-bottom : 1.5rem ;
1307- padding-bottom : 1rem ;
1308- border-bottom : 1px solid var (--border-color );
1309- }
1310-
1311- .modal-header h2 {
1312- color : var (--primary-color );
1313- margin : 0 ;
1314- }
1315-
1316- .close {
1317- color : var (--text-secondary );
1318- font-size : 2rem ;
1319- font-weight : bold;
1320- cursor : pointer;
1321- transition : color 0.3s ease;
1322- }
1323-
1324- .close : hover {
1325- color : var (--accent-color );
1326- }
1327-
1328- .contact-info {
1329- margin-bottom : 2rem ;
1330- }
1331-
1332- .contact-item {
1333- display : flex;
1334- align-items : center;
1335- margin-bottom : 1rem ;
1336- padding : 0.75rem ;
1337- background : rgba (99 , 102 , 241 , 0.05 );
1338- border-radius : 0.5rem ;
1339- border : 1px solid rgba (99 , 102 , 241 , 0.1 );
1340- }
1341-
1342- .contact-label {
1343- font-weight : bold;
1344- margin-right : 0.5rem ;
1345- min-width : 80px ;
1346- }
1347-
1348- .quick-contact h3 {
1349- color : var (--primary-color );
1350- margin-bottom : 1rem ;
1351- }
1352-
1353- .form-group {
1354- margin-bottom : 1rem ;
1355- }
1356-
1357- .form-group label {
1358- display : block;
1359- margin-bottom : 0.5rem ;
1360- color : var (--text-primary );
1361- font-weight : 500 ;
1362- }
1363-
1364- .form-group input ,
1365- .form-group textarea {
1366- width : 100% ;
1367- padding : 0.75rem ;
1368- background : var (--bg-light );
1369- border : 1px solid var (--border-color );
1370- border-radius : 0.5rem ;
1371- color : var (--text-primary );
1372- transition : all 0.3s ease;
1373- font-family : inherit;
1374- }
1375-
1376- .form-group input : focus ,
1377- .form-group textarea : focus {
1378- outline : none;
1379- border-color : var (--primary-color );
1380- box-shadow : 0 0 0 3px rgba (99 , 102 , 241 , 0.1 );
1381- }
1382-
1383- .form-group textarea {
1384- resize : vertical;
1385- min-height : 100px ;
1386- }
1387-
1388- @keyframes slideDown {
1389- from {
1390- opacity : 0 ;
1391- transform : translateY (-50px );
1392- }
1393- to {
1394- opacity : 1 ;
1395- transform : translateY (0 );
1396- }
13971161}
0 commit comments