创建分屏布局的8个CSS片段分屏用户界面已经成为展示内容的一种流行方式。我们通常认为它们被用于希望用户在两个选项中进行选

分屏用户界面已经成为展示内容的一种流行方式。我们通常认为它们被用于希望用户在两个选项中进行选择的地方。但我们也看到这种技术的其他创造性使用。

例如，分屏也可以作为一个整页布局，甚至作为一个过渡性的动画来使用，效果非常好。

这里有10个分屏用户界面的例子，附有源代码，你可以根据自己的需要进行编辑。每个例子都有其独特之处。

做出选择作者：Bridget Reed

这当然是使用分屏的最常见方式。一个网站的访问者会有两个选择。在这里，背景图片的颜色帮助提供了很好的分离，而中间的圆形标志则将一切联系在一起。

见笔者的网站--分屏作者：Bridget Reed

分屏也能产生有趣的过渡效果，正如我们在下面的幻灯片例子中看到的那样。向下滚动会使屏幕的每一半分开，并显示出队列中的下一张图片。其结果是一个非常流畅和高端的用户界面。

请看法比奥-奥塔维尼设计的 "分页幻灯片"（PenSplit Slick Slideshow）。

随着高清屏幕占主导地位和4K的普及，越来越多的设计师开始利用这些额外的屏幕空间。这个例子的布局提供了一个带有大胆背景图片的静态侧边栏。但它在小屏幕上看起来也很好，因为这个侧边栏变成了一个标题。它既有吸引力又有功能性。

另一个趋势是利用分屏来比较 "之前 "和 "之后 "的图片。这里我们有一个设置，允许用户简单地移动他们的鼠标来查看两张图片之间的差异。仅仅利用一点点的JavaScript，这个用户界面是对该技术的一个有趣的转折。

查看Envato Tuts+的PenSplit-Screen UI

这个例子中的 "一半对一半 "的滚动效果增加了一种独特的感觉。当你滚动时，它几乎就像卡片和照片交替堆叠在一起一样。由于它使用了不到150行的纯CSS，加载时间不应该是一个很大的问题。

这个布局模仿了你可能在印刷杂志上看到的东西。左边的粗体标题和介绍性文字与右边的照片和多栏文章形成了强烈的对比。总的来说，它使人看起来非常光滑和专业。

查看笔者的个人简介 // 基努-里维斯by Brian Haferkamp

从品牌的角度来看，这里的概念真的很酷。它在一个页面中使用了分屏，左边是静态的品牌信息，右边是可滚动的服务列表。这是一个不同的方式，可以从人群中脱颖而出。

见笔作者：Luke Meyrick

在这个旋转木马中，幻灯片之间的转换为分割屏幕增加了一个新的维度。每张幻灯片 "分裂 "成两半，而下一张则以很酷的3D格式显示。这里有一种类似于机器的质量，可以很好地适用于工程或工业公司。

请看保罗-诺布尔的 "分笔式3D旋转"

起初是在A或B之间进行选择的方式，现在已经变成了更多的东西。分割式布局和动画为设计师提供了另一种鼓励互动的创造性途径。

虽然我们仍然看到它们的传统形式，但我们也发现它们正被用来增强诸如滚动浏览内容和图片库的功能。它甚至被用来模仿印刷设计技术。

希望上面的例子能给你带来灵感，让你在自己的项目中加入分割式用户界面。请享受实验的乐趣，并实现那些既好看又能为组合添加独特内容的功能。