diff --git a/css/index.css b/css/index.css index 5cdcde6..8fc4b9d 100644 --- a/css/index.css +++ b/css/index.css @@ -151,28 +151,42 @@ .banner-cont .swiper-slide .img { display: block; - width: 100%; - height: 100%; - max-width: 100%; - max-height: 100%; - object-fit: cover; - opacity: 0.15; - mix-blend-mode: luminosity; + position: absolute; + right: 0; + top: 50%; + transform: translateY(-50%); + width: 55%; + height: auto; + max-height: 85%; + object-fit: contain; + opacity: 0.95; + /* 移除 mix-blend-mode,让图片更清晰 */ + filter: drop-shadow(0 20px 60px rgba(56, 189, 248, 0.3)); + animation: floatImage 6s ease-in-out infinite; } -/* 轮播文字层:居中偏左覆盖在图片上 */ +@keyframes floatImage { + 0%, 100% { + transform: translateY(-50%) translateX(0); + } + 50% { + transform: translateY(-50%) translateX(-20px); + } +} + +/* 轮播文字层:左侧排列,为右侧图片留出空间 */ .banner-cont .swiper-slide .section-content { position: absolute; top: 50%; - left: 50%; - transform: translate(-50%, -50%); - max-width: 900px; + left: 8%; + transform: translateY(-50%); + max-width: 650px; z-index: 10; - text-align: center; + text-align: left; } .banner-cont .swiper-slide h1 { - font-size: 64px; + font-size: 58px; line-height: 1.2; font-weight: 700; /* 渐变文字效果 */ @@ -181,41 +195,42 @@ -webkit-text-fill-color: transparent; background-clip: text; letter-spacing: -1px; - animation: fadeInUp 1s ease-out; + animation: fadeInLeft 1s ease-out; + margin-bottom: 0; } -@keyframes fadeInUp { +@keyframes fadeInLeft { from { opacity: 0; - transform: translateY(30px); + transform: translateX(-50px); } to { opacity: 1; - transform: translateY(0); + transform: translateX(0); } } .banner-cont .banner-desc { - font-size: 18px; - margin-top: 30px; - margin-bottom: 50px; - max-width: 700px; - margin-left: auto; - margin-right: auto; + font-size: 17px; + margin-top: 24px; + margin-bottom: 40px; + max-width: 580px; color: rgba(226, 232, 240, 0.85); line-height: 1.8; - animation: fadeInUp 1s ease-out 0.2s both; + animation: fadeInLeft 1s ease-out 0.2s both; } /* 轮播文案标签(标题上方的小圆角标签) */ .banner-tags { margin-bottom: 20px; - animation: fadeInUp 1s ease-out 0.1s both; + animation: fadeInLeft 1s ease-out 0.1s both; + display: flex; + flex-wrap: wrap; + gap: 10px; } .banner-tag-pill { display: inline-block; - margin-right: 10px; padding: 6px 16px; font-size: 13px; border-radius: 999px; @@ -224,11 +239,12 @@ border: 1px solid rgba(56, 189, 248, 0.3); backdrop-filter: blur(10px); font-weight: 500; + white-space: nowrap; } /* 按钮优化 - 科技感渐变发光效果 */ .banner-cont .btn2 { - animation: fadeInUp 1s ease-out 0.4s both; + animation: fadeInLeft 1s ease-out 0.4s both; position: relative; overflow: hidden; font-size: 16px; @@ -237,6 +253,7 @@ background: linear-gradient(135deg, #38BDF8 0%, #6366F1 100%); box-shadow: 0 12px 40px rgba(56, 189, 248, 0.4); transition: all 0.3s ease; + display: inline-block; } .banner-cont .btn2::before { @@ -1313,7 +1330,11 @@ html { /* 大屏幕 1400px+ */ @media (min-width: 1400px) { .banner-cont .swiper-slide h1 { - font-size: 72px; + font-size: 64px; + } + + .banner-cont .swiper-slide .section-content { + max-width: 700px; } .section-title h2 { @@ -1328,7 +1349,11 @@ html { } .banner-cont .swiper-slide h1 { - font-size: 56px; + font-size: 52px; + } + + .banner-cont .swiper-slide .section-content { + max-width: 600px; } .service .service-box { @@ -1344,7 +1369,16 @@ html { } .banner-cont .swiper-slide h1 { - font-size: 48px; + font-size: 44px; + } + + .banner-cont .swiper-slide .section-content { + max-width: 500px; + left: 5%; + } + + .banner-cont .swiper-slide .img { + width: 50%; } .banner-s .banner-list .banner-item { @@ -1377,11 +1411,38 @@ html { } .banner-cont .swiper-slide h1 { - font-size: 40px; + font-size: 36px; } .banner-cont .banner-desc { - font-size: 16px; + font-size: 15px; + } + + /* 平板尺寸下,图片改为背景,文字居中 */ + .banner-cont .swiper-slide .img { + width: 100%; + height: 100%; + opacity: 0.15; + filter: none; + object-fit: cover; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + transform: none; + animation: none; + } + + .banner-cont .swiper-slide .section-content { + left: 50%; + transform: translate(-50%, -50%); + text-align: center; + max-width: 90%; + } + + .banner-tags { + justify-content: center; } .banner-s .banner-list {