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