css布局实现简洁登录注册页面效果代码
代码语言:html
所属分类:布局界面
代码描述:css布局实现简洁登录注册页面效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<html> <head> <style> @import url("https://fonts.googleapis.com/css?family=Fira+Sans"); html, body { position: relative; min-height: 100vh; background-color: #E1E8EE; display: flex; align-items: center; justify-content: center; font-family: "Fira Sans", Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .form-structor { background-color: #222; border-radius: 15px; height: 550px; width: 350px; position: relative; overflow: hidden; } .form-structor::after { content: ""; opacity: 0.8; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-repeat: no-repeat; background-position: left bottom; background-size: 500px; background-image: url("//repo.bfw.wiki/bfwrepo/image/60ee28b15d8a6.png"); } .form-structor .signup { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); width: 65%; z-index: 5; -webkit-transition: all 0.3s ease; } .form-structor .signup.slide-up { top: 5%; -webkit-transform: translate(-50%, 0%); -webkit-transition: all 0.3s ease; } .form-structor .signup.slide-up .form-holder, .form-structor .signup.slide-up .submit-btn { o.........完整代码请登录后点击上方下载按钮下载查看
网友评论0