style：完善主页动画样式
This commit is contained in:
+209
-28
@@ -130,14 +130,17 @@ a:focus-visible {
|
||||
position: relative;
|
||||
height: min(32.2vw, 617px);
|
||||
min-height: 430px;
|
||||
background: #f4f8ff;
|
||||
background: linear-gradient(90deg, #f7faff 0%, #e6eefc 100%);
|
||||
isolation: isolate;
|
||||
}
|
||||
.hero-art {
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
inset: 0;
|
||||
background: url('/images/lanhu/slices/home-container25-image2@2x.png') center/cover no-repeat;
|
||||
background-image: url('/images/lanhu/slices/hero-geo-visual@2x.png');
|
||||
background-repeat: no-repeat;
|
||||
background-position: right center;
|
||||
background-size: auto 100%;
|
||||
}
|
||||
.hero-content {
|
||||
height: 100%;
|
||||
@@ -272,6 +275,7 @@ a:focus-visible {
|
||||
text-align: center;
|
||||
}
|
||||
.section-title h2 {
|
||||
position: relative;
|
||||
margin: 0;
|
||||
color: #414141;
|
||||
font-weight: 700;
|
||||
@@ -334,6 +338,7 @@ a:focus-visible {
|
||||
color: #0875f9;
|
||||
font-size: 34px;
|
||||
line-height: 1;
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
.stat-item span {
|
||||
color: #555;
|
||||
@@ -342,40 +347,145 @@ a:focus-visible {
|
||||
}
|
||||
|
||||
.model-section {
|
||||
position: relative;
|
||||
min-height: 791px;
|
||||
padding: 76px 0 80px;
|
||||
overflow: hidden;
|
||||
background: linear-gradient(135deg, #f8fbff 5%, #fff 44%, #eff4ff 100%);
|
||||
}
|
||||
.model-section::before {
|
||||
position: absolute;
|
||||
right: -8%;
|
||||
bottom: -42%;
|
||||
left: -8%;
|
||||
height: 72%;
|
||||
content: '';
|
||||
pointer-events: none;
|
||||
background:
|
||||
radial-gradient(circle at 20% 64%, rgba(245, 195, 204, 0.4), transparent 31%),
|
||||
radial-gradient(circle at 78% 66%, rgba(120, 224, 255, 0.45), transparent 35%);
|
||||
filter: blur(22px);
|
||||
}
|
||||
.model-section > .page-width {
|
||||
position: relative;
|
||||
}
|
||||
.model-layout {
|
||||
display: grid;
|
||||
grid-template-columns: 0.95fr 0.95fr 1.2fr;
|
||||
grid-template-columns: minmax(280px, 370px) minmax(280px, 370px) minmax(310px, 1fr);
|
||||
align-items: center;
|
||||
gap: 25px;
|
||||
margin-top: 52px;
|
||||
justify-content: center;
|
||||
gap: 20px;
|
||||
margin-top: 48px;
|
||||
}
|
||||
.ring {
|
||||
width: 100%;
|
||||
max-width: 370px;
|
||||
justify-self: center;
|
||||
border: 0;
|
||||
outline: 0;
|
||||
box-shadow: none;
|
||||
background: transparent;
|
||||
}
|
||||
.ring-diagram {
|
||||
position: relative;
|
||||
aspect-ratio: 1;
|
||||
isolation: isolate;
|
||||
}
|
||||
.ring-diagram:focus,
|
||||
.ring-diagram:focus-visible {
|
||||
border: 0;
|
||||
outline: 0;
|
||||
box-shadow: none;
|
||||
}
|
||||
.ring-base {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: block;
|
||||
object-fit: contain;
|
||||
border: 0;
|
||||
outline: 0;
|
||||
box-shadow: none;
|
||||
background: transparent;
|
||||
}
|
||||
.ring-label {
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
color: #4b83e8;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
line-height: 1;
|
||||
letter-spacing: 0.04em;
|
||||
white-space: nowrap;
|
||||
text-shadow: 0 1px 8px rgba(255, 255, 255, 0.95);
|
||||
}
|
||||
.ring-label-1 {
|
||||
top: 27%;
|
||||
left: 20%;
|
||||
transform: rotate(-39deg);
|
||||
}
|
||||
.ring-label-2 {
|
||||
top: 27%;
|
||||
right: 18%;
|
||||
transform: rotate(39deg);
|
||||
}
|
||||
.ring-label-3 {
|
||||
right: 17%;
|
||||
bottom: 25%;
|
||||
transform: rotate(-39deg);
|
||||
}
|
||||
.ring-label-4 {
|
||||
bottom: 25%;
|
||||
left: 18%;
|
||||
transform: rotate(39deg);
|
||||
}
|
||||
.ring-center-label {
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
width: 36%;
|
||||
display: grid;
|
||||
justify-items: center;
|
||||
gap: 8px;
|
||||
color: #fff;
|
||||
transform: translate(-50%, -45%);
|
||||
text-align: center;
|
||||
text-shadow: 0 2px 7px rgba(49, 83, 205, 0.26);
|
||||
}
|
||||
.ring-center-label svg {
|
||||
width: 42px;
|
||||
height: 42px;
|
||||
fill: none;
|
||||
stroke: currentColor;
|
||||
stroke-linecap: round;
|
||||
stroke-linejoin: round;
|
||||
stroke-width: 2.2;
|
||||
filter: drop-shadow(0 4px 7px rgba(27, 79, 196, 0.22));
|
||||
}
|
||||
.ring-center-label strong {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.08em;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.core-value {
|
||||
padding: 12px 0 0 10px;
|
||||
padding: 6px 0 0 16px;
|
||||
}
|
||||
.core-value h3 {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 13px;
|
||||
margin: 0 0 17px;
|
||||
margin: 0 0 12px;
|
||||
color: #1578fa;
|
||||
font-size: 21px;
|
||||
}
|
||||
.core-value h3 img {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
width: 46px;
|
||||
height: 46px;
|
||||
object-fit: contain;
|
||||
}
|
||||
.core-point {
|
||||
padding: 15px 0 17px;
|
||||
padding: 13px 0 14px;
|
||||
border-bottom: 1px dashed #d3d3d3;
|
||||
}
|
||||
.core-point h4 {
|
||||
@@ -393,13 +503,14 @@ a:focus-visible {
|
||||
background: linear-gradient(135deg, #a0e1ff, #3c67ff);
|
||||
}
|
||||
.core-point p {
|
||||
margin: 10px 0 0;
|
||||
max-width: 35em;
|
||||
margin: 8px 0 0;
|
||||
color: #757575;
|
||||
font-size: 16px;
|
||||
line-height: 1.7;
|
||||
font-size: 14px;
|
||||
line-height: 1.65;
|
||||
}
|
||||
.core-value .primary-button {
|
||||
margin-top: 34px;
|
||||
margin-top: 25px;
|
||||
}
|
||||
|
||||
.advantages-section {
|
||||
@@ -868,6 +979,72 @@ a:focus-visible {
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 761px) {
|
||||
.site-header {
|
||||
transition:
|
||||
background 0.3s ease,
|
||||
box-shadow 0.3s ease,
|
||||
backdrop-filter 0.3s ease;
|
||||
}
|
||||
.site-header.scrolled {
|
||||
background: rgba(255, 255, 255, 0.9);
|
||||
box-shadow: 0 10px 30px rgba(68, 122, 196, 0.1);
|
||||
backdrop-filter: blur(18px) saturate(1.16);
|
||||
}
|
||||
.hero-copy {
|
||||
will-change: transform;
|
||||
}
|
||||
.section-title h2::after {
|
||||
position: absolute;
|
||||
right: 42%;
|
||||
bottom: -13px;
|
||||
left: 42%;
|
||||
height: 2px;
|
||||
content: '';
|
||||
border-radius: 2px;
|
||||
background: linear-gradient(90deg, transparent, rgba(20, 120, 251, 0.78), transparent);
|
||||
opacity: 0;
|
||||
transform: scaleX(0);
|
||||
transition:
|
||||
transform 0.75s cubic-bezier(0.22, 1, 0.36, 1),
|
||||
opacity 0.45s ease;
|
||||
}
|
||||
.section-title.is-visible h2::after {
|
||||
opacity: 1;
|
||||
transform: scaleX(1);
|
||||
}
|
||||
.motion-card {
|
||||
--spot-x: 50%;
|
||||
--spot-y: 50%;
|
||||
--spot-opacity: 0;
|
||||
position: relative;
|
||||
isolation: isolate;
|
||||
}
|
||||
.motion-card::after {
|
||||
position: absolute;
|
||||
z-index: 3;
|
||||
inset: 0;
|
||||
content: '';
|
||||
pointer-events: none;
|
||||
border-radius: inherit;
|
||||
background: radial-gradient(
|
||||
280px circle at var(--spot-x) var(--spot-y),
|
||||
rgba(71, 145, 255, 0.16),
|
||||
transparent 58%
|
||||
);
|
||||
box-shadow: inset 0 0 0 1px rgba(113, 169, 255, 0.24);
|
||||
opacity: var(--spot-opacity);
|
||||
}
|
||||
.motion-card img {
|
||||
will-change: transform;
|
||||
}
|
||||
.case-background,
|
||||
.delivery-banner,
|
||||
.testimonial-track {
|
||||
will-change: transform;
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
*,
|
||||
*::before,
|
||||
@@ -1017,21 +1194,10 @@ a:focus-visible {
|
||||
height: min(720px, calc(100svh - 55px));
|
||||
min-height: 570px;
|
||||
}
|
||||
.hero-section::after {
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
inset: 0;
|
||||
content: '';
|
||||
background: linear-gradient(
|
||||
90deg,
|
||||
rgba(246, 250, 255, 0.98) 0%,
|
||||
rgba(246, 250, 255, 0.9) 46%,
|
||||
rgba(246, 250, 255, 0.15) 100%
|
||||
);
|
||||
}
|
||||
.hero-art {
|
||||
background-position: 66% center;
|
||||
opacity: 0.86;
|
||||
background-position: right bottom;
|
||||
background-size: auto 74%;
|
||||
opacity: 0.72;
|
||||
will-change: transform;
|
||||
}
|
||||
.hero-content {
|
||||
@@ -1141,6 +1307,21 @@ a:focus-visible {
|
||||
max-width: 220px;
|
||||
will-change: transform;
|
||||
}
|
||||
.ring-label {
|
||||
font-size: clamp(7px, 2.15vw, 9px);
|
||||
letter-spacing: 0;
|
||||
}
|
||||
.ring-center-label {
|
||||
gap: 4px;
|
||||
}
|
||||
.ring-center-label svg {
|
||||
width: clamp(24px, 7vw, 32px);
|
||||
height: clamp(24px, 7vw, 32px);
|
||||
}
|
||||
.ring-center-label strong {
|
||||
font-size: clamp(9px, 2.7vw, 12px);
|
||||
letter-spacing: 0.02em;
|
||||
}
|
||||
.core-value {
|
||||
grid-column: 1 / -1;
|
||||
padding: 26px 0 0;
|
||||
|
||||
Reference in New Issue
Block a user