当前位置：首页 > news >正文

仿Apple官网设计风格

news 2025/6/26 11:01:35

苹果风格实现详解

1. 设计理念与苹果风格分析

苹果风格（Apple Style）以简洁、现代、明亮、层次分明为核心，强调：

清新柔和的渐变色背景
大量留白与圆角卡片
主色蓝色系点缀，icon/按钮/标题高亮
细腻的阴影和毛玻璃效果
平滑的动画和交互反馈

本页面以苹果官网为灵感，结合 Vue3 + Ant Design Vue 组件，打造极致流畅的现代感首页。

2. 主要配色与分区布局

主色与辅助色

主色：#0071e3（Apple 蓝）、#2997ff（亮蓝）
辅色：#f5f6fa（淡灰白）、#e3f0ff（淡蓝）、#fafdff（极浅蓝）

分区布局

主背景：淡蓝渐变，提升页面通透感
各 section 用不同浅色或渐变区分，增强层次

.main-view {background: linear-gradient(135deg, #fafdff 0%, #e3f0ff 100%);margin-bottom: 48px; /* 与底部留白 */
}
.features-section, .domains-section {background: linear-gradient(90deg, #fafdff 0%, #e3f0ff 100%);
}
.workflow-section {background: #fff;
}
.cta-section {background: linear-gradient(90deg, #e3f0ff 0%, #fafdff 100%);
}

3. 卡片与按钮设计

卡片

白到淡灰渐变背景，圆角大阴影，hover 时主色描边和高光

.feature-card, .domain-card {background: linear-gradient(135deg, #fff 60%, #f5f6fa 100%);border: 1.5px solid #e5eaf0;box-shadow: 0 12px 48px 0 rgba(0,113,227,0.10);border-radius: 32px;
}
.feature-card:hover, .domain-card:hover {box-shadow: 0 24px 56px 0 rgba(0,113,227,0.18);border: 1.5px solid #2997ff;background: linear-gradient(90deg, #fafdff 60%, #e3f0ff 100%);
}

按钮

主色蓝渐变，圆角高光，hover 有轻微放大和阴影

.hero-actions .ant-btn-primary,
.cta-section .ant-btn-primary {background: linear-gradient(90deg, #0071e3 0%, #2997ff 100%);border: none;color: #fff !important;
}

4. 标题与 icon 高亮

主标题与分区标题

主色蓝渐变文字，配合浅色阴影，突出品牌感

.hero-title, .section-title {background: linear-gradient(90deg, #0071e3 0%, #2997ff 100%);-webkit-background-clip: text;-webkit-text-fill-color: transparent;color: #0071e3;text-shadow: 0 2px 8px #fafdff, 0 1px 0 #fff;
}

icon

主色蓝渐变，配合阴影，视觉统一

.feature-icon, .domain-icon {color: #2997ff !important;background: linear-gradient(90deg, #0071e3 0%, #2997ff 100%);-webkit-background-clip: text;-webkit-text-fill-color: transparent;
}

5. 动画与交互细节

IntersectionObserver 动画

使用自定义指令 v-intersect，当元素进入视口时添加 is-visible 类，触发淡入上移动画

const vIntersect = {mounted(el, binding) {const observer = new window.IntersectionObserver(([entry]) => {if (entry.isIntersecting) {if (binding.modifiers.once) observer.disconnect();if (typeof binding.value === 'function') {binding.value(el, binding);} else {el.classList.add('is-visible');}}},{ threshold: 0.15 });observer.observe(el);}
}

动画样式

卡片、步骤等元素初始透明并下移，进入视口后平滑上移并渐显

.fade-in-up {opacity: 0;transform: translateY(40px) scale(0.98);
}
.fade-in-up.is-visible {opacity: 1;transform: translateY(0) scale(1);transition: opacity 0.7s cubic-bezier(.4,0,.2,1), transform 0.7s cubic-bezier(.4,0,.2,1);
}

6. 代码片段示例

卡片动画指令用法

<divclass="feature-card fade-in-up"v-for="(feature, index) in features":key="index":style="{ animationDelay: (index * 0.12) + 's' }"v-intersect.once="onIntersect"
><!-- ... -->
</div>