CodePen已经成为开发者的游乐场，你可以在它的sandbox里面构建任何你想要的东西。实际上，试验性的概念是一个百宝箱，必能点燃你的创意。我们已经挖掘和发现了一些有趣的令人沉迷和以来的UI概念模型：对话模态窗口、注册登录界面、菜单和导航、滑动和切换。一点小趣味能使用户界面更愉悦。享受此刻吧！

       对话&模态窗口

       舞动的对话框

       Alex Wright 的舞动的对话框是根据Peter Main发布在Dribbble的概念编码的。这个对话框的特色是两个舞动的按钮。当用户将鼠标移到上面，它会移动一个角度；当用户点击时，整个对话框翻转过来然后消失了。这是一个有趣的方式使窗口和内容更突出，特别是这些用户通常不怎么注意的，点击“是”或“否”的常规交互。

‘Flappy Dialog’ coded by Alex Wright. Concept: Peter Main.

        破坏性的模态窗口概念

        一个产品能否吸引用户使用是一个值得讨论的话题。这里有个简单又引人注目的想法：LegoMushroom的破坏性模态窗口概念。一旦用户关闭这个窗口，它会爆裂成碎片。多么令人惊叹的效果！

‘Modal Window Destroy Concept’ by LegoMushroom.

       材料设计模态

       Ettrics的材料设计模态的关键是动效：当你点击这个按钮时，窗口会扩展开。它看是去是按钮扩展了，但实际上是按钮上动态地添加了一个div标签，扩展到和窗口一样大。当模态窗口出现时，div标签就隐藏了。真聪明！

‘Material Design Modal’ by Ettrics

         注册&登录

       互动的注册列表

       Riccardo Pasianotto的呈现注册列表是互动的，对于用户而言不会无聊乏味。他没有一开始就将所有的表单全部展现出来，而是将必要的信息分成了好几块。这个表单实际上是由3个一次叠在一起的卡片组成的。当你在上面输入信息时，表单边上的图标变成了一个带有向上的箭头的按钮。点击按钮时，表单向上收起，出现下一个表单。多么美好而令人兴奋的交互！

‘Interactive Sign Up Form’ by Riccardo Pasianotto. Concept:Denis Abdullin.

       纯CSS互动表单

       Emmanuel Pilande 的互动表单模型在视觉和代码上都非常流畅，它是完全用CSS建立的。每一个表单都是独立的，红色的长线条上方有一个标签和默认文字，按下Tab键可以转到下一个表单。多么优雅！

‘Interactive Form’ by Emmanuel Pilande.

       材料注册交互

       Srikant Shetty的材料注册交互由3个协调地融合在一起的状态组成——它们都是围绕注册按钮设计的。屏幕上的注册按钮扩展出了注册列表，当填完列表并按下“完成”按钮时，“完成”按钮变成了一个圆移到了屏幕的右下角。在新的页面中起到新的作用。以代码为生命的Kyle Lavery写出了这个无比流畅的交互。

‘Material Design Signup Interaction’ coded by Kyle Lavery. Concept: Srikant Shetty. (Via MaterialUp)

       简洁登录

       Boris Borisov的简洁登录包括了注册和登录。在登录屏幕上，一个带“+”的红色小圆隐藏了注册表单。当点击时，它会扩展开覆盖整个登录页面。另一个漂亮的效果是：“go”按钮的外观根据用户填写表单的进度由极浅的灰色变成了加粗的红色。Andy Tran 和 Yusuf Bakir写出了这个概念的变化。

Compact Login. Concept: Boris Borisov. (Via MaterialUp)

       材料设计信息输入

       一个来自于Ben Mildren的轻量级信息输入模型。鼠标点击输入框时，文字提示上移并变成绿色。当用户开始输入时，标签完全消失。清爽又简单。

‘Material Design Input Text’ by Ben Mildren.

       导航&菜单

       筛选菜单

       筛选菜单将它的筛选选项隐藏在菜单按钮的后面，但并不是像你想象的那样。点击时，这个按钮变成了一个关闭按钮，扩展成了一个更大的圆，圆上排列着筛选选项。流畅又漂亮。

‘Filter Menu’ coded by Arjun Amgain. Concept: Anton Aheichanka. (Via MaterialUp)

        纯CSS下拉菜单

       Jamie Coulter 的漂亮的纯CSS下拉菜单很好地修饰了非JavaScript界面。它利用纯CSS在标签菜单上的切换动画来展示子菜单。

‘Swanky Pure CSS Drop Down Menu’ by Jamie Coulter.

       CSS衍生菜单

       Lucas Bebber利用CSS和SVG而不是JavaScript筛选达到衍生菜单的效果。圆形的汉堡包按钮下面隐藏着菜单。当你点击它时，按钮变小并衍生出（吐出）4个圆形菜单按钮，依次整齐排列。汉堡包按钮则变成了一个关闭按钮。多俏皮的效果。

‘CSS Gooey Menu’ by Lucas Bebber.

       CSS收件箱界面

       Jamie Coulte的CSS收件箱界面是另一个纯CSS的案例。当用户点击一条信息时，它会向右滑动打开展示邮件正文，原页面的预览列表被“正在阅读”的便签替换。这是一个很好的效果，它可以适用于一些导航条（例如：全屏宽的导航条）。

‘CSS Inbox User Interface’ by Jamie Coulter.

       APP中的响应式菜单

       响应式菜单原先是为实际中在酒吧点饮料的情形而设计的，但它后来被应用到了APP和电子商务的菜单中。在默认状态中，所有的菜单选项占据了同样的空间。当鼠标移到上面时，菜单选项扩展，展示更多的信息。当被点击时，它会进一步展开填满整个屏幕。底栏从页面底部显示出来，上面有购买选项。

‘Responsive Menu App’ coded by Woodrow Barlow. Concept:Gal Shir.

       滑动&切换

       预算滑块

       jQuery预算滑块是一个受欢迎的扁平化趋势的替代品。当你拖动滑块时，3个不同尺寸的空间会被颜色填充。

‘budgetSlider’ coded by Hornebom. Concept: Erik Deiner.

       纯CSS扁平滑块

       Ana Tudor的扁平滑块全是用CSS开发的，看上去像温度计，简单又不失时尚。Simon Goellner的响应式滑块也是受到了这个启发。它的升降伴随着指针上数字的变化。

‘Pure CSS Flat Sliders’ by Ana Tudor.

       纯CSS切换

       Rafael González的纯CSS切换又别于我们习惯的切换方式。它由2个方格组成来替换我们熟知的从一边到另一边的转换动画。当它要改变状态时，你需要轻击它，它会有一个翻书的效果，翻转180度，或者像履带一样从一边滑到另一边。动画中的色彩搭配也是该设计中的一个亮点：右边控件是蓝色的，左边是红色的，当你将两者转换时，它们的颜色也逐渐地互相转换。

‘Pure CSS Toggles’ by Rafael González.

      流动式转换

       Leonardo Zakour的流动式转换概念是利用一个圆形按钮从一个触发状态到另一个触发状态。Codearmada将它们和广播材料按钮融入了生活。

‘Material Radio Button’ coded by Codearmada. Concept:Leonardo Zakour. (Via MaterialUp)

       纯CSS白天和夜晚状态切换

       css白天和夜晚的状态切换愉悦地在视觉上呈现了上午和下午的状态。当设置成上午时，开关转换同时它的背景显示为在蓝天中的一个太阳，当转换到下午时，背景转换为星空中的月亮。

‘Pure CSS Day And Night Toggle’ coded by Benjamin Réthoré. Concept: Rappora.