jQuery CSS3透明背景登录注册表单
透明背景的登录注册表单，样子挺清爽，风格也比较现代。用的是jQuery加上CSS3，页面切换、表单验证这些都有照顾到，交互还挺丝滑的。index.html是登录页，register.html是注册页，结构清晰，样式都抽出去了，在css/style.css里头，改起来方便。
background: rgba()做的透明背景，看起来跟页面融合得蛮自然。再配合一点边框阴影和圆角，表单立马有质感。里面的动画也靠 CSS3 搞定，比如按钮按下去的反馈效果、输入框聚焦时的边框变化，都挺顺滑。
jQuery这块，主要是用在事件监听和表单验证。比如你可以用$('#username').on('blur', checkUsername)，做到用户输完就实时验证，用户体验挺不错的。验证逻辑写在script.js，简单明了，不绕人。
图片文件也有，比如小图标之类的，集中放在images文件夹里。加载图、提示图，配上background-image就能用了。如果你想换成自己的图也容易，改下路径就行。
整体来说，这套代码比较适合快速搭个原型，或者作为你自己的表单模板改改用。如果你是前端新手，也挺适合练练手——HTML 结构、CSS 样式、JS 逻辑都涵盖了。
如果你想要看点类似的例子，推荐看看CSS3 登录表单动画和HTML5CSS3 注册登录表单，思路都差不多，可以互相借鉴。
文件大小：231.24KB
评论区