设计一个快速登录页面可能看起来不多。毕竟它只是一个表单和一个提交按钮。
然而，如果您深入了解各种登录表单页面，您会发现大量的设计想法。如果您有一些代码片段可以与您一起工作，您可以快速构建登录表单页面，而无需从头编码。
此列表提供了10个开放源代码登录页面，您可以对任何Web项目使用和重新格式化。
1.登录页面UI
开发人员Khaled Mneimneh使用一些基本的CSS3属性构建了这个时尚的登录界面。
四舍五入的输入字段非常易于复制，并且阴影效果也不需要多行代码。这整个事情可以很容易地在任何网站工作一些时间编辑样式和颜色。
但是突出的部分是提交按钮中的自定义渐变。这是一些关注细节。
2.渐变形式
Tyler Fry开发了一个带有黑暗风格登录表单的有趣渐变页面。
在这里我最喜欢的部分是较暗的背景，以及它如何在窗体中使用较亮的文本时很好地工作。
通常情况下，设计师会为深色页面粘贴深灰色背景，但使用渐变中的较暗色调，该效果看起来非常棒。
当你关注时，即使输入字段也有一些风格。仔细观察，你会看到阴影突出显示在焦点上。
3.纯HTML5
纸堆登录表单对于设计人员来说是一种非常常见的技术。由于平面设计的普及，我们现在看不到这种情况。
然而，我仍然是这种风格的粉丝，这就是为什么Vladimir Banduristov的HTML5表格值得称赞。它完全在HTML和CSS中使用一些非常干净的表单输入设计。
但它是整个页面突出的，这是一个可以添加到几乎任何网站的设计。
这甚至可以作为一个自定义WordPress登录页面的模板，如果你想走得那么远。
4.显示/隐藏密码字段
该代码片段中的基本黑色设计超级干净且易于使用。但这甚至不是焦点。
在您完成表单工作时，您会注意到密码字段有一个显示/隐藏按钮。通常这在移动应用中使用，因为在那里输入密码比较困难。
但是，您可以将此功能添加到所有登录字段，以便让用户放心。它可以帮助人们避免错误登录，除非有人站在屏幕后面，否则这不是一个安全问题。
5.清理登录表单
这是一个超级干净的蓝色登录页面，使用一些明亮的渐变效果。
输入字段实际上具有轻微的外部发光，边框清晰，文字风格较暗。整个事情非常专业，我可以看到这个登录表单正用于从创业公司到企业网站的所有事情。
总的来说，我是这个设计的忠实粉丝，出色的风格登录抓住了任何人的注意力。
6. Apple Dev登录
开发人员Christophe Molina创建了Apple App开发板专用的Apple式登录域。
这不是大多数Apple用户会在日常基础上认可甚至使用的东西。
但它有一个非常疯狂的设计风格，具有skeuomorphism和精美风格的标题功能区。
更不用说整个表单运行在纯粹的CSS上，这本身就是一个真正的成就。
7.动画形式
在您的UI设计中添加一些动画总是很有趣。这就是这种形式提供的简短的jQuery动画形式动画。
即使演示没有多大作用，也很容易将其转换为工作表单字段。不过，如果这更像你的风格，你也可以直接在jQuery中处理用户输入。
总的来说，这是一个非常简单的动画设计。但是应该很容易复制一段时间来编辑代码。
8.黑暗签名
黑暗的UI设计并不是网络上的标准。但是，如果做得对，我个人觉得暗色更诱人。
看看Andreas Storm创建的这个黑暗的登录表单。它使用明亮的柠檬绿颜色作为登录按钮和自定义单选按钮。
这也许是整个列表中最美观的形式之一，没有太多盲目的功能。
我强烈建议对任何黑暗网站进行测试。它可以很好地用作自定义登录页面，甚至可以嵌入到您的网站上。
9.登录w / Register Modal
您看到大量的登录+注册模式窗口时下全部由JavaScript提供支持。而这一次由Andy陈仅仅是一个不错的设计与出色的用户体验混合的又一个例子。
页面背景本身很干净，并且表单域足够大，可以快速吸引注意力。但是，如果您点击右侧的小蓝边栏，您会看到一个注册窗口可以看到。
这出现在登录表单的顶部，所以它就像典型的模式窗口一样工作。很酷的效果！
它需要一点jQuery，但总共可以在25行JS上运行。考虑到这种形式的令人难以置信的可用性，这令人印象深刻
10.极简主义登录
超级轻便和超级基本是描述Marcello Africano开发的这种随和形式的最佳方式。
这是一个真正的基本页面，表单本身也极简主义，可以混合到任何布局中。笔只使用HTML和CSS，所以如果你想避免华丽的效果，你可以得到这个工作sans-JavaScript。
