我们最近发布了一个新的改进版的Connect，这是我们为平台和市场设计的工具套件。Stripe的设计团队努力创建独特的登录页面，为我们的主要产品讲述一个故事。对于这个版本，我们设计了Connect的登录页，以反映其复杂的、尖端的功能，同时保持事物的轻巧和简单。在这篇博客文章中，我们将描述我们如何使用几种下一代web技术来实现连接，并介绍一些更精细的技术细节（和兴奋点！）在我们的前端旅程中。CSS网格布局今年早些时候，三大浏览器（Firefox、Chrome和Safari）几乎同时发布了新CSS网格布局模块的实现。该规范为作者提供了一个易于使用且功能强大的二维布局系统。Connect的登录页几乎处处依赖CSS网格，使得一些看似棘手的设计几乎可以轻而易举地实现。作为一个例子，让我们隐藏标题的内容并关注其背景：历史上，我们通过使用绝对定位来精确地将每个条纹放置在页面上，从而创建了这些背景条纹（我们显然称之为它们）。这种方法可行，但脆弱的定位通常会导致一些微妙的问题：例如，舍入误差可能会导致两条条纹之间出现1px的间隙。CSS样式表也很快变得冗长且难以维护，因为媒体查询需要更复杂来解释不同视区大小的背景差异。有了CSS网格，几乎所有以前的问题都会消失。我们只需定义一个灵活的网格，并将这些条带放置在相应的单元格中。Firefox有一个方便的网格检查器，允许您可视化布局的结构。让我们看看它的样子：我们突出显示了三个条纹，并去掉了倾斜效果，使事情更容易理解。下面是我们网格的CSS：标题。条纹{显示：网格；网格：重复（5200px）/重复（101fr）；}标题。条纹：第n个子项（1）{网格柱：跨度3；}标题。条纹：第n个子项（2）{网格面积：3/span 3/auto/-1；}标题。条纹：第n个子项（3）{网格行：4；网格柱：跨度5；}然后我们就可以变换整个.stripes容器来生成倾斜的背景：标题。条纹{变换：倾斜（-12度）；变换原点：0；}瞧！CSS网格乍一看可能很吓人，因为它有一个不寻常的语法和许多新的属性和值，但心理模式实际上非常简单。如果您习惯于Flexbox，那么您已经熟悉Box对齐模块，这意味着您可以重用您知道并喜爱的属性，例如对齐内容和对齐项目。CSS三维登录页的标题显示了几个立方体，作为组成Connect的构建块的可视化隐喻。这些浮动立方体以随机速度（在一定范围内）在3D中旋转，并受益于同一光源，该光源可动态照亮相应的面：这些多维数据集是用JavaScript生成并设置动画的简单DOM元素。它们各自实例化相同的HTML模板：

//JavaScriptconst createCube=（）=>{常量模板=文档.getElementById（"多维数据集模板"）；常量片段=document.importNode(模板.content，真）；返回碎片；};很直接。我们现在可以很容易地将这些空白和空白元素变成三维形状。得益于3D变换，添加透视图和沿z轴移动边相当自然：.cube，.cube*{位置：绝对；宽度：100px；高度：100px}.侧面{变换样式：preserve-3d；透视图：600像素}.front{transform:rotateY（0deg）translateZ（50px）}.back{transform:rotateY（-180deg）translateZ（50px）}.left{transform:rotateY（-90度）translateZ（50px）}.right{transform:rotateY（90度）translateZ（50px）}.top{transform:rotateX（90度）translateZ（50px）}.bottom{transform:rotateX（-90度）translateZ（50px）}虽然CSS使立方体建模变得很简单，但它不提供高级动画功能，如动态着色。立方体的动画依赖于requestAnimationFrame来计算和更新旋转过程中任何一点的每一面。每一帧都有三件事要确定：能见度。同时可见的面永远不会超过三个，因此我们可以避免任何计算和昂贵的重绘隐藏面。转变。立方体的每个可见边都需要根据其初始旋转、当前动画状态和每个轴的速度进行变换。阴影。虽然CSS允许您在三维空间中定位元素，但是没有来自3D环境的传统概念（例如光源）。为了模拟3D环境，我们可以通过逐渐变暗立方体的侧面来渲染光源，因为它们远离特定的点。还需要考虑其他因素（例如在JavaScript中使用requestIdleCallback和CSS中使用backface可见性来提高性能），但这些是动画逻辑背后的主要支柱。我们可以通过不断跟踪它们的状态并用基本的数学运算更新它们来计算每一方的可见性和转换。在纯函数和ES2015功能（如模板文本）的帮助下，事情变得更加简单。下面是两个JavaScript代码的简短摘录，用于计算和定义当前转换：const getDistance=（状态，旋转）=>x，"y"]。减少（（对象，轴）=>{对象[轴]=数学.abs（状态[轴]+旋转[轴]）；返回对象；}, {});const getRotation=（state，size，rotate）=>{const axis=rotate.x？"Z："Y"；常数方向=旋转。x>0？-1:1；返回`rotateX（${state.x+rotate.x}度）旋转${axis}（${direction*（state.y+rotate.y）}度）translateZ（${size/2}px）`;};难题中最具挑战性的部分是如何正确计算立方体每个面的着色。为了模拟舞台中心的虚拟光源，我们可以逐渐增加每个面在所有轴上接近中心点时的照明效果。具体来说，这意味着我们需要计算每个面的亮度和颜色。我们将通过插值基础颜色和当前着色因子对每个帧执行此计算。//a和b之间的线性插值//示例：（100，200，.5）=150常数插值=（a，b，i）=>a*（1-i）+b*i；const getShading=（淡色、旋转、距离）=>{常量变暗=x"，"y"]。减少（（对象，轴）=>{const delta=距离[轴]；常数比=δ/180；对象[轴]=增量>180？数学.abs（2-比率）：比率；返回对象；}, {});if（rotate.x）变暗。y=0；其他{const{x}=距离；如果（x>90&&x变暗[轴]=1-变暗[轴]）；}const alpha=（darken.x+darken.y）/2；常数混合=（值，索引）=>数学.圆形（插值（值，着色着色[索引]，α）；常数[r，g，b]=淡色.color.map（混合）；返回"rgb（${r}，${g}，${b}）`；};嘘！幸运的是，其余的代码没有那么复杂，主要由样板代码、DOM helpers和其他基本抽象组成。最后一个值得一提的细节是，根据用户的喜好，使用了一种使动画不那么显眼的技术：在macOS上，当在系统首选项中启用了Reduce Motion时，新的Preferences reduced Motion media查询将被触发（目前仅在Safari中），页面上的所有装饰性动画都将被禁用。立方体使用CSS动画淡入，JavaScript动画旋转。我们可以结合@media块和MediaQueryList接口取消这些动画：/*CSS*/@媒体（倾向于减少运动）{#头球英雄*{动画：无}}//JavaScriptconst reduceemotion=matchMedia（"（首选简化的运动）"）.matches；常数刻度=（）=>{立方体.forEach（更新代码）；如果（还原情感）返回；请求动画帧（勾号）；};更多CSS 3D！我们在整个网站上使用定制的3D渲染设备来现场展示条纹客户和应用程序。在我们不断寻求减少文件大小和加载时间的过程中，我们考虑了一些选项，以实现轻量级和分辨率无关的资产的软三维外观。直接在CSS中绘制设备实现了我们的目标。这是CSS笔记本电脑：在CSS中定义对象显然不如导出位图方便，但这是值得的。上面的笔记本电脑重量不到1KB，很容易调整。我们可以添加硬件加速，动画任何部分，使其响应而不丢失图像质量，并精确定位DOM元素（例如其他图像）在笔记本电脑的显示器中。这种灵活性并不意味着放弃干净的代码—标记保持清晰、简洁和描述性：