前端练手项目我做过不少电商页面、后台管理系统、营销落地页都反复写过但真正让我有原来CSS还能这么用这种感觉的是仿写无畏契约官网。第一眼打开VALORANT官网的时候我脑子里只有两个字带感。那种大面积的暗色、红色斜切、锐利的裁剪、滚动时一波接一波的入场动效视觉冲击力比绝大多数企业官网强太多了。于是我决定把这套页面作为自己动效专项的练手项目从零开始仿写一遍。这个项目做完以后我最大的感慨是一个FPS游戏的官网它的前端工程密度完全不亚于一个中型业务系统。信息架构虽然不复杂但视觉还原、动效编排、性能优化、响应式降级这些环节全都要过一遍。这篇文章我会把整个仿写过程从拆解、选型、实现到调优完整拆开讲不是贴几百行能跑的源码而是讲清楚每一步为什么这么做踩了哪些坑有哪些经验可以迁移到你自己的项目里。如果你正好也想找一个能快速提升前端动效功力的实战项目这篇应该能帮你少走不少弯路。1. 把帅翻译成需求无畏契约官网的视觉符号与页面骨架1.1 一看就知道是VALORANT那些贯穿全站的视觉符号我动手之前没有急着开IDE而是先把无畏契约官网从头到尾滚动了好几遍一边滚一边截图最后把截图放在一块儿对比。这时候你会看得非常清楚整个站点的视觉语言极度统一不是设计师随便拼出来的而是有一套明确的设计系统在支撑。第一层是颜色。全站几乎只有三个主色背景的深蓝黑接近#0f1923、主红色的#ff4655、以及大量留白用的米白色#ece8e1。这套颜色在Hero区、特工展示区、地图区反复出现形成了很强的品牌记忆点。第二层是切角语言。按钮、卡片、输入框、图片遮罩几乎所有块状元素都带有一个几像素到十几像素的斜切角整个页面没有一个是方方正正的。第三层是字体气质全站的标题几乎都是几何感极强的大写无衬线字体配上细长的字重变化和文字描边传递出一种军事、硬派、速度感并存的氛围。作为前端看到这些元素以后要做的事情是翻译把红色斜切的卡片翻译成clip-path: polygon(...)把带描边的大标题翻译成-webkit-text-stroke把背景的灰色网格翻译成repeating-linear-gradient。这一步拆解得越细后面写代码就越有谱。1.2 一屏一世界的滚动叙事页面结构拆解无畏契约官网首页的结构并不复杂基本就是一条纵向的滚动叙事线首屏Hero区放主视觉和标语往下是游戏模式、特工阵容、地图展示、社交社区和下载区。每个分区都独占一个大屏幕分区与分区之间没有传统网站那种密集的信息堆叠。这个结构对仿写来说非常有利。因为每个区块天然是独立的我可以把首页拆成一个个组件先分别把每个组件做到静态看上去差不多然后再处理区块进入视口时的入场动效。换句话说整个页面不是一体的而是一屏一个主题的模块组合。这么做还有一个额外的好处我可以把仿写的范围按区块划分优先级。Hero区和特工区是动效最密集、最值得练手的地方我就花最多时间社交社区那块主要是图片铺排和文字排版的简单组合我就快速过一遍。前端仿写最忌讳的是一上来就想着整个页面全做完结果每个区块都做得不细最后只能看起来像却经不起对比。1.3 仿写范围清单我需要做到哪一档在动手前我给自己列了一张范围清单区分什么必须做、什么可以简化、什么直接跳过模块实现方式完成标准首屏Hero区全屏背景、镂空标题、入场动画与原版视觉差距在10%以内游戏模式区三张斜切卡片带hover反馈结构一致交互可用特工展示区滚动批量入场 卡片hover扫光动效节奏接近原版地图展示区静态地图卡片 鼠标视差视觉高级交互克制下载与社区区简化版CTA区块能跳转、能链接即可多语言切换保留按钮数据写死不实现真实切换逻辑有了这张表后面开发就很清晰了。写到一个区块的时候我只关心这个区块的目标是什么不被原版是不是还有其他效果干扰。这是我从这个项目里学到的第一个实用方法论仿写不是一比一复刻而是带着明确目标的取舍。2. 技术选型与工程初始化让精力留在动效上2.1 框架怎么选Vite Vue 3的理由做这种动效密集型的官网选型的核心标准不是哪个框架热门而是哪个工具链能让我把时间花在动效上而不是配置上。我最终选的是 Vite Vue 3理由很直接无畏契约官网的交互可以分成两类一类是滚动触发的入场动画另一类是鼠标悬停触发的局部反馈。这两类需求都不需要复杂的全局状态管理但如果用原生JS来切换class和监听滚动代码会变得很啰嗦。Vue的响应式特性配合v-if、:class绑定能让我把注意力集中在什么条件下这个元素应该呈现什么状态上代码量比原生JS少很多。当然React也能做我不打算挑起框架之争。只是单页展示站这个场景下Vue模板的表达方式更贴合写网页的心智模型组件边界也更清晰。至于UI组件库我完全没有引入——春节这种强设计感的页面任何组件库的默认样式都是累赘你需要的是完全可控的原生DOM结构。2.2 建项目时的目录和基础配置初始化项目可以直接用 Vite 的 Vue 模板一条命令就能起npm create vitelatest valorant-clone -- --template vue装好以后我习惯先做两件事配路径别名、引入全局基础样式。// vite.config.js import { defineConfig } from vite import vue from vitejs/plugin-vue import path from path export default defineConfig({ plugins: [vue()], resolve: { alias: { : path.resolve(__dirname, src) } } })目录结构我按区块即组件的思路组织src/ ├── components/ │ ├── HeroSection.vue │ ├── GameModesSection.vue │ ├── AgentsSection.vue │ ├── MapsSection.vue │ └── CtaSection.vue ├── composables/ │ └── useReveal.js ├── styles/ │ ├── tokens.css │ └── base.css └── App.vue样式方面我用的纯CSS加CSS Modules。可能有朋友习惯Sass的嵌套但在这个项目里我发现现代CSS的原生能力已经足够了CSS自定义属性管理设计变量CSS Modules隔离组件样式嵌套用原生写法其实也清晰。少一层编译概念就少一层排查成本。2.3 GSAP的引入时机先别急着上库关于动效库我的建议是先写一个区块再决定要不要GSAP。无畏契约官网的动效看起来很炫但拆开看很多效果是CSS过渡就能完成的。如果一个效果只是元素进入视口时从透明变为不透明、从下方稍微上移IntersectionObserver加CSS class切换就够了完全不需要引入一个几十KB的库。但官网中有几个动效是真的需要时间线控制的。比如特工卡片滚动入场时是多个元素按顺序、有重叠地运动还要配合滚动进度做scrub式的实时反馈这种情况下用CSS过渡会写得非常痛苦。GSAP的ScrollTrigger插件就是为这种滚动位置驱动动画进度的场景设计的它让复杂动效的代码可读性高很多。我最终的方案是全站只用GSAP做特工区的时间线动画其他区块全部用CSS。这是一个经过权衡的决定不是为了炫技而是每个工具用在它最合适的位置。3. 全局设计系统用CSS自定义属性定义VALORANT感3.1 色板和字体的统一入口仿写这种品牌感强的网站第一步一定是把设计变量抽出来我建了一个tokens.css作为全站视觉的唯一事实来源:root { --valorant-red: #ff4655; --valorant-dark: #0f1923; --valorant-dark-light: #1f2733; --valorant-cream: #ece8e1; --valorant-gray: #768079; --font-display: Russo One, Arial Black, sans-serif; --font-body: Inter, Microsoft YaHei, sans-serif; --clip-angle: 3px; --border-thin: 1px solid rgba(236, 232, 225, 0.15); }这里特别说下字体。无畏契约官方字体是一款较宽的几何无衬线体从版权角度考虑我不建议你直接下载官方的字体文件而是找一个气质接近的开源替代。我选了Google Fonts的Russo One做标题字体它的几何感和硬朗感与官网风格很接近正文用Inter。字体加载要注意顺序在HTML的head里用preconnect提前连到字体服务避免标题渲染时出现明显的字体切换闪烁。3.2 斜切视觉语言clip-path的几种写法斜切是VALORANT感的核心几乎每个按钮、卡片、内外边框都有切角。CSS实现斜切最直接的方案是clip-path: polygon()。一个右上角和右下角被切掉的矩形长这样.valorant-card { clip-path: polygon( 0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 16px 100%, 0 calc(100% - 16px) ); }但clip-path有一个坑它会裁剪掉元素的所有内容包括阴影。如果给带有box-shadow的卡片加clip-path你会发现阴影直接被裁没了。所以纯粹为了装饰性的切角我更推荐用伪元素叠加方案父元素正常保留阴影两个伪元素分别覆盖右上角和右下角的缺口用背景色填充出切掉的视觉。两种方案我都有用到按钮上的小切角用clip-path就够了因为没有阴影需求卡片类元素则用伪元素方案保证阴影和hover状态下的光影变化能正常展示。这些细节是远远看着像和凑近了还是像的区别。3.3 背景纹理与文字描边细节无畏契约官网的背景不是死黑的仔细看有一层极淡的网格纹理和噪点感。网格我用一个半透明的repeating-linear-gradient叠加在背景上就能实现.background-grid { background-image: linear-gradient(rgba(236, 232, 225, 0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(236, 232, 225, 0.03) 1px, transparent 1px); background-size: 40px 40px; }文字描边是另外一个标志性细节。Hero区的大标题经常是透明填充红色或白色描边的形式实现方法是.text-outline { color: transparent; -webkit-text-stroke: 2px var(--valorant-red); }如果还要叠加渐变填充需要配合background-clip: text但注意这两个属性同时使用时-webkit-text-stroke的描边会覆盖在渐变文字上层效果可能会很奇怪需要多调试几个组合。这里我踩过一次坑局部不能用color: transparent配background-clip: text的同时又依赖-webkit-text-stroke描边因为描边会把背景渐变压住。最终这类文字我用了两层元素叠加底层做描边上层做渐变填充用position: absolute重叠在一起。4. 首屏Hero区全屏背景、镂空标题与开场动画4.1 结构设计与层级Hero区是整个官网的门面实现上分为三个层级最底层是覆盖全屏的背景图我用了一张自己合成的暗色渐变图搭配微弱的径向高光中间层是巨大的镂空标题和一个对角线斜切的分割元素最上层是LOGO、一句简短介绍和一个CTA按钮。层级顺序要特别注意因为要做出标题被压在背景和前景之间的深度感。我是这样组织的section classhero div classhero__bg/div h1 classhero__title span classhero__title-outlineVALORANT/span /h1 div classhero__content p classhero__tagline一款定义全新竞技体验的战术射击游戏/p a classhero__cta href#立即游玩/a /div div classhero__diagonal/div /section其中hero__diagonal是一个绝对定位的斜切色块从画面右下角切入把Hero区底部分割出一道斜线形成一种速度感。这个元素用clip-path就能实现不需要任何图片资源。4.2 开场动画CSS实现的三段式入场Hero区的开场动画我完全用CSS实现。思路是把三个主要元素背景、标题、内容区分别用animation控制利用animation-delay制造依次进场的节奏感.hero__bg { animation: heroBgIn 0.8s ease-out both; } .hero__title { animation: heroTitleIn 0.9s ease-out 0.4s both; } .hero__content { animation: heroContentIn 0.8s ease-out 0.7s both; } keyframes heroBgIn { from { opacity: 0; transform: scale(1.05); } to { opacity: 1; transform: scale(1); } } keyframes heroTitleIn { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: translateY(0); } }关键点在于animation的both填充模式。both的含义是动画开始前应用from状态动画结束后保持to状态。这样即使动画延迟0.4秒开始元素在延迟期间也已经处于opacity: 0的状态不会在页面加载时闪一下又消失。4.3 首屏体验的取舍首屏有一个经常被忽略的问题背景图加载。Hero区背景如果是一张大尺寸图片用户在弱网环境下会先看到一片空白或者纯色背景等几秒后图片突然蹦出来体验很差。我的方案是给hero__bg加一个background-color兜底用接近图片主色调的深色#0f1923同时把背景图压缩到合理大小并用preload提前加载关键背景图。另外Hero区我做了一个降级处理原本想在这个区域加一个Canvas粒子效果来模拟官网的呼吸光点但实测在低端手机预览时掉帧明显而且粒子动效和页面其他CSS动效叠加后滚动时视觉噪声太大。最终我放弃了这个效果保留了一张带微小噪点的静态背景图。做完以后我觉得这是个正确的决定——动效服务于氛围而不是氛围的负担。5. 特工展示区滚动驱动和卡片交互的完整实现5.1 滚动到区块时的批量入场特工区是整个仿写项目里最值得讲的地方。官网在这个区域展示了一批特工角色每个角色是一张竖版卡片滚动到该区块时这些卡片并不是同时出现在视口里而是像牌堆滑出一样有先有后、有重叠地飞入。我用ScrollTrigger精确控制这批卡片的入场时间线。核心逻辑是这样import gsap from gsap import { ScrollTrigger } from gsap/ScrollTrigger gsap.registerPlugin(ScrollTrigger) const cards gsap.utils.toArray(.agent-card) cards.forEach((card, index) { gsap.fromTo(card, { y: 80, opacity: 0, rotateY: 10 }, { y: 0, opacity: 1, rotateY: 0, duration: 0.8, ease: power3.out, scrollTrigger: { trigger: .agents-grid, start: top 75%, toggleActions: play none none none }, delay: index * 0.12 } ) })这里有一个关键细节delay是按索引递增的但ScrollTrigger的start位置只有一个。实际效果是——当滚动使.agents-grid的顶边触达视口75%位置时第一张卡片开始入场然后每隔0.12秒下一张跟进。看起来像批量入场但控制上极其清晰。我还把这段逻辑封装成了useReveal的组合式函数方便其他区块复用比如游戏模式区的三张卡片也用了相同的入场方式只是参数不同。封装的时候要注意每个组件卸载时要调用ScrollTrigger.getAll().forEach(t t.kill())否则切换路由后滚动监听会残留造成性能浪费和重复触发。5.2 hover时的斜切色块扫过效果特工卡片的hover效果是官网很经典的一个细节鼠标悬停时卡片底部会有一个红色斜切色块从左下角扫到右上角同时卡片整体微微抬升。这个效果不需要任何JS纯CSS就能实现.agent-card { position: relative; overflow: hidden; transition: transform 0.3s ease; } .agent-card::before { content: ; position: absolute; left: 0; bottom: 0; width: 120%; height: 120%; background: linear-gradient(135deg, transparent 20%, var(--valorant-red) 100%); transform: translateX(-110%) skewX(-15deg); transition: transform 0.45s ease; z-index: 1; } .agent-card:hover::before { transform: translateX(0) skewX(-15deg); } .agent-card:hover { transform: translateY(-6px); }这里最关键的是那个skewX(-15deg)。色块本身是一个宽大的矩形当我们给它加上一个负角度倾斜后它的边缘从竖直变成斜向。再配合translateX从负值移向0视觉上就是一个斜着的色块从卡片下缘滑过。这个效果我一开始用了clip-path做动画结果发现clip-path的动画性能比transform差不少而且会出现锯齿换成这个伪元素方案后流畅多了。5.3 中间聚焦布局的细节特工展示区下半部分还有一种布局一排五六个特工头像中间的卡片比两边的更大、更亮当鼠标移动到某个头像时焦点会切换到那张卡片。这种焦点切换用JS控制但布局上用CSS Grid实现很自然.agents-focus { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; align-items: center; } .agent-focus-item { transition: transform 0.3s ease, filter 0.3s ease; } .agent-focus-item.is-active { transform: scale(1.15); filter: none; } .agent-focus-item:not(.is-active) { filter: grayscale(0.6) brightness(0.7); }没有用JS做任何尺寸计算纯粹靠CSS Grid的1fr均分和transform: scale()实现视觉差。这里需要留意的是被放大的卡片会盖住左右相邻卡片的边缘如果卡片本身没有position: relative和z-index放大效果会被相邻元素遮挡。我在激活态里加了position: relative; z-index: 2保证被选中的卡片永远在最上层。6. 地图与模式区块静态页面怎么做出高级感6.1 卡片比例和切角复用地图展示区看起来没有很多动效但它是全站最容易做塌的地方——如果信息层级不清晰整个页面会显得很平。官网的做法是把地图卡做成一个大的斜切框架里面放地图预览图下面配地图名称、模式描述和一个细小的装饰分割线。我做这部分时花了较多时间调比例。地图图片的尺寸不固定但卡片容器要保持统一的宽高比否则网格会参差不齐。CSS的aspect-ratio属性在这里非常省心我直接给地图卡片的图片容器设置aspect-ratio: 4 / 3再把图片用object-fit: cover塞进去任何尺寸的图片都能完美填充且所有卡片保持一致的比例。信息部分我用了更克制的文字排布地图名称用大写的Russo One二级信息用小字号的var(--valorant-gray)两者之间有一段细线分隔符。这种大标题、细信息、留白充足的排布方式几乎适用于所有品牌展示页比把所有信息堆成一团要高级得多。6.2 鼠标视差的轻量实现为了让静态区块不显得死板我给地图展示区加了一个很轻量的鼠标视差效果鼠标在区块内移动时地图图片会相对容器产生几个像素的偏移形成一种图片在框内微微浮动的错觉。实现上用的mousemove加requestAnimationFrame节流避免频繁触发重绘const handleMouseMove (e) { const rect container.getBoundingClientRect() const x (e.clientX - rect.left) / rect.width - 0.5 const y (e.clientY - rect.top) / rect.height - 0.5 requestAnimationFrame(() { image.style.transform translate3d(${x * 12}px, ${y * 12}px, 0) }) }视差范围我控制在12像素以内超过这个数值就会显得飘失去高级感。而且这个效果我在移动端直接禁用了因为手机上没有悬停概念触屏上的mousemove行为也诡异不值得为了一个增强效果去处理移动端的各种边界情况。数据上用一个简单的window.matchMedia((pointer: fine))判断是否支持精细指针就可以实现桌面端启用、移动端禁用的降级。7. 从能看到流畅动效性能调优与踩坑记录7.1 卡顿排查都用transform和opacity了吗我第一版写完以后在Chrome DevTools的Performance面板里测试滚动发现有明显的卡顿。逐个排查后问题集中在几个地方一部分卡顿是我的入场动画用了margin-top和left做位移动效。margin、left、top这些属性变化会触发浏览器的布局计算而transform只触发合成性能差了一个量级。我把所有位移全部改成了transform: translate3d(...)卡顿立刻缓解。另一部分是我给很多卡片加了比较重的box-shadow而hover时阴影还在变化。盒阴影的绘制成本比一般属性高在滚动过程中尤其明显。我的处理是静态阴影保留hover时的阴影变化改成用opacity配合伪元素的阴影图层过渡。这样视觉上还是有一个阴影变深的效果但性能开销小了很多。7.2 字体闪烁问题与preload方案无畏契约官网的标题字体非常有个性但代价是字体文件体积不小。我在开发时遇到过一个让人崩溃的问题每次刷新页面标题先是显示成系统字体零点几秒后才啪地换成目标字体。这是一个典型的FOUTFlash of Unstyled Text无样式文本闪烁问题。解决思路是双管齐下。首先在HTML中预加载关键字体文件link relpreload href/fonts/russo-one.woff2 asfont typefont/woff2 crossorigin其次在font-face中设置font-display: swap或font-display: block。swap会先显示后备字体然后替换block会短暂隐藏文字直到字体加载完成。对于超大号的Hero标题来说我倾向用block因为标题短暂空白比突然换字体更不显眼。这只是个人取舍如果你更在意义字可访问性swap会更友好。7.3 移动端降级不要为了动效牺牲可用性这个项目做完桌面端后我在手机上打开测试发现滚动时有明显的滞涩感。原因很简单移动端GPU性能有限同时运行那么多滚动驱动的动画必然掉帧。降级策略我定了几条移动端关闭特工卡片的3D旋转入场只保留透明度变化关闭鼠标视差效果滚动触发位置从卡片进入视口改成区块进入视口后再触发减少监听数量。这些通过gsap.matchMedia()的媒体查询配置就能实现代码上不增加太多复杂度。如果你也在做这类带大量动效的页面可以用这三条当默认规则。动效是锦上添花内容访问永远是第一位的。7.4 素材与字体版权仿写项目的红线最后必须提醒一句仿写官网这个事只建议用来做个人学习和技术练习不建议直接拿去做商业项目。具体到素材使用官网的官方图片、Logo、字体文件都有版权直接下载原图用到自己项目里是有风险的。我的做法是地图用的占位图是自己在设计工具里合成的抽象地形图特工卡片用的是开源图库的无版权人物剪影图字体换成了开源的Russo One。这样一来页面视觉效果保留了那种感觉但每一份素材的来源都是干净的。这也是我在整个项目里最想强调的东西仿写的核心价值是练习把视觉翻译成代码的能力不是囤积一份可以随时偷懒复制的模板。当你把素材都换成自己的还能做出接近原版的效果那才是真的学到了。做完这个项目我对动效型官网的整套工作流已经形成了自己的习惯先用设计变量统一视觉语言再按静态还原—入场动效—交互反馈—性能调优的顺序逐个区块推进。现在再回头看这个仿写项目很多当初觉得是不是要上WebGL才能做出来的效果其实用CSS和JS的常规组合就能实现。下次如果你也想找个项目练手我建议你挑一个视觉上有强烈风格、动效密集的官网试试拆解它的视觉语言然后动手实现。从觉得好看到知道怎么实现这中间的差距就是做这类项目最值钱的收获。