lixin/NewAPI-Customize-Homepage
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: 调整区块间距与动画触发时机

Browse Source
This commit is contained in:
3127647737@qq.com 2026-08-03 16:10:57 +08:00
parent 864b197607
commit 594bdbac27
1 changed files with 53 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

88
oneinai.html
View File

@ -97,8 +97,8 @@
grid-template-columns: minmax(0, 1.22fr) minmax(330px, 0.78fr); grid-template-columns: minmax(0, 1.22fr) minmax(330px, 0.78fr);
gap: clamp(42px, 8vw, 130px); gap: clamp(42px, 8vw, 130px);
align-items: center; align-items: center;
min-height: min(790px, 100vh); min-height: min(720px, 94vh);
padding: clamp(76px, 10vw, 136px) 0 clamp(92px, 12vw, 156px); padding: clamp(72px, 8vw, 112px) 0 clamp(64px, 8vw, 96px);
border-bottom: 1px solid var(--line); border-bottom: 1px solid var(--line);
} }
@ -182,7 +182,7 @@
flex-wrap: wrap; flex-wrap: wrap;
align-items: center; align-items: center;
gap: 12px; gap: 12px;
margin-bottom: 60px; margin-bottom: 44px;
} }
.btn { .btn {
@ -388,16 +388,16 @@
} }
.section { .section {
padding: clamp(84px, 11vw, 148px) 0; padding: clamp(56px, 7vw, 88px) 0;
border-bottom: 1px solid var(--line); border-bottom: 1px solid var(--line);
} }
.section-heading { .section-heading {
display: grid; display: grid;
grid-template-columns: minmax(0, 1fr) minmax(280px, 0.72fr); grid-template-columns: minmax(0, 1fr) minmax(280px, 0.72fr);
gap: 48px; gap: 36px;
align-items: end; align-items: end;
margin-bottom: 48px; margin-bottom: 34px;
} }
.section-kicker { .section-kicker {
@ -433,7 +433,7 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: flex-start; align-items: flex-start;
min-height: 258px; min-height: 238px;
padding: 26px; padding: 26px;
gap: 16px; gap: 16px;
border: 1px solid var(--line); border: 1px solid var(--line);
@ -570,7 +570,7 @@
} }
.pricing-section { .pricing-section {
padding-top: clamp(80px, 10vw, 126px); padding-top: clamp(56px, 7vw, 88px);
} }
.pricing-layout { .pricing-layout {
@ -652,7 +652,7 @@
} }
.docs-section { .docs-section {
padding-bottom: clamp(76px, 10vw, 124px); padding-bottom: clamp(56px, 7vw, 88px);
} }
.docs-panel { .docs-panel {
@ -785,6 +785,17 @@
} }
} }
@keyframes kicker-reveal {
from {
opacity: 0;
transform: translate3d(-34px, 0, 0);
}
to {
opacity: 1;
transform: translate3d(0, 0, 0);
}
}
@keyframes reveal-from-left { @keyframes reveal-from-left {
from { from {
opacity: 0; opacity: 0;
@ -863,73 +874,79 @@
.reveal-on-scroll { .reveal-on-scroll {
animation: scroll-reveal 1s cubic-bezier(0.16, 1, 0.3, 1) both; animation: scroll-reveal 1s cubic-bezier(0.16, 1, 0.3, 1) both;
animation-timeline: view(); animation-timeline: view();
animation-range: entry 0% cover 38%; animation-range: entry 25% entry 100%;
} }
.section-heading.reveal-on-scroll { .section-heading.reveal-on-scroll {
animation-range: entry 0% cover 32%; animation: none;
}
.section-heading .section-kicker {
animation: kicker-reveal 1s cubic-bezier(0.16, 1, 0.3, 1) both;
animation-timeline: view();
animation-range: entry 25% entry 90%;
} }
.section-heading .section-title { .section-heading .section-title {
animation: title-reveal 1s cubic-bezier(0.16, 1, 0.3, 1) both; animation: title-reveal 1s cubic-bezier(0.16, 1, 0.3, 1) both;
animation-timeline: view(); animation-timeline: view();
animation-range: entry 4% cover 34%; animation-range: entry 32% contain 6%;
} }
.section-heading .section-description { .section-heading .section-description {
animation: reveal-from-right 1s cubic-bezier(0.16, 1, 0.3, 1) both; animation: reveal-from-right 1s cubic-bezier(0.16, 1, 0.3, 1) both;
animation-timeline: view(); animation-timeline: view();
animation-range: entry 12% cover 40%; animation-range: entry 48% contain 14%;
} }
.capability-row:nth-child(1) { .capability-row:nth-child(1) {
animation-name: reveal-from-left; animation-name: reveal-from-left;
animation-range: entry 0% cover 34%; animation-range: entry 12% entry 100%;
} }
.capability-row:nth-child(2) { .capability-row:nth-child(2) {
animation-range: entry 8% cover 42%; animation-range: entry 35% contain 10%;
} }
.capability-row:nth-child(3) { .capability-row:nth-child(3) {
animation-name: reveal-from-right-card; animation-name: reveal-from-right-card;
animation-range: entry 16% cover 50%; animation-range: entry 58% contain 20%;
} }
.workflow-list::before { .workflow-list::before {
animation: line-draw linear both; animation: line-draw linear both;
animation-timeline: view(); animation-timeline: view();
animation-range: entry 8% cover 58%; animation-range: entry 20% contain 40%;
} }
.workflow-step::before { .workflow-step::before {
animation: line-draw linear both; animation: line-draw linear both;
animation-timeline: view(); animation-timeline: view();
animation-range: entry 12% cover 38%; animation-range: entry 35% contain 20%;
transform-origin: left; transform-origin: left;
} }
.workflow-step:nth-child(1) { .workflow-step:nth-child(1) {
animation-range: entry 0% cover 30%; animation-range: entry 12% entry 100%;
} }
.workflow-step:nth-child(2) { .workflow-step:nth-child(2) {
animation-range: entry 10% cover 40%; animation-range: entry 35% contain 10%;
} }
.workflow-step:nth-child(3) { .workflow-step:nth-child(3) {
animation-range: entry 20% cover 50%; animation-range: entry 58% contain 20%;
} }
.pricing-layout { .pricing-layout {
animation-name: panel-unfold; animation-name: panel-unfold;
animation-range: entry 0% cover 44%; animation-range: entry 28% contain 12%;
} }
.price-main { .price-main {
animation: number-rise 1s cubic-bezier(0.16, 1, 0.3, 1) both; animation: number-rise 1s cubic-bezier(0.16, 1, 0.3, 1) both;
animation-timeline: view(); animation-timeline: view();
animation-range: entry 10% cover 38%; animation-range: entry 52% contain 18%;
} }
.price-fact { .price-fact {
@ -938,32 +955,32 @@
} }
.price-fact:nth-child(1) { .price-fact:nth-child(1) {
animation-range: entry 8% cover 30%; animation-range: entry 38% entry 100%;
} }
.price-fact:nth-child(2) { .price-fact:nth-child(2) {
animation-range: entry 16% cover 38%; animation-range: entry 52% contain 10%;
} }
.price-fact:nth-child(3) { .price-fact:nth-child(3) {
animation-range: entry 24% cover 46%; animation-range: entry 66% contain 18%;
} }
.docs-panel { .docs-panel {
animation-name: panel-unfold; animation-name: panel-unfold;
animation-range: entry 0% cover 42%; animation-range: entry 30% contain 12%;
} }
.docs-panel .section-title { .docs-panel .section-title {
animation: title-reveal 1s cubic-bezier(0.16, 1, 0.3, 1) both; animation: title-reveal 1s cubic-bezier(0.16, 1, 0.3, 1) both;
animation-timeline: view(); animation-timeline: view();
animation-range: entry 8% cover 38%; animation-range: entry 48% contain 16%;
} }
.doc-link { .doc-link {
animation: reveal-from-right 1s cubic-bezier(0.16, 1, 0.3, 1) both; animation: reveal-from-right 1s cubic-bezier(0.16, 1, 0.3, 1) both;
animation-timeline: view(); animation-timeline: view();
animation-range: entry 18% cover 46%; animation-range: entry 62% contain 22%;
} }
} }
@ -975,7 +992,7 @@
.hero { .hero {
grid-template-columns: 1fr; grid-template-columns: 1fr;
gap: 68px; gap: 52px;
min-height: auto; min-height: auto;
} }
@ -1003,7 +1020,7 @@
} }
.section-heading { .section-heading {
margin-bottom: 36px; margin-bottom: 28px;
} }
.capability-row { .capability-row {
@ -1043,9 +1060,9 @@
} }
.hero { .hero {
gap: 54px; gap: 42px;
padding-top: 64px; padding-top: 64px;
padding-bottom: 82px; padding-bottom: 58px;
} }
.eyebrow { .eyebrow {
@ -1103,11 +1120,11 @@
} }
.section { .section {
padding: 76px 0; padding: 54px 0;
} }
.section-heading { .section-heading {
margin-bottom: 32px; margin-bottom: 26px;
} }
.capability-list { .capability-list {
@ -1193,6 +1210,7 @@
} }
.reveal-on-scroll, .reveal-on-scroll,
.section-heading .section-kicker,
.section-heading .section-title, .section-heading .section-title,
.section-heading .section-description, .section-heading .section-description,
.workflow-list::before, .workflow-list::before,