css实现背景方块上升动画的自适应登录表单效果代码
代码语言:html
所属分类:表单美化
代码描述:css实现背景方块上升动画的自适应登录表单效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> * { box-sizing: border-box; margin: 0; padding: 0; font-weight: 300; } body { font-family: 'Source Sans Pro', sans-serif; color: white; font-weight: 300; } body ::-webkit-input-placeholder { /* WebKit browsers */ font-family: 'Source Sans Pro', sans-serif; color: white; font-weight: 300; } body :-moz-placeholder { /* Mozilla Firefox 4 to 18 */ font-family: 'Source Sans Pro', sans-serif; color: white; opacity: 1; font-weight: 300; } body ::-moz-placeholder { /* Mozilla Firefox 19+ */ font-family: 'Source Sans Pro', sans-serif; color: white; opacity: 1; font-weight: 300; } body :-ms-input-placeholder { /* Internet Explorer 10+ */ font-family: 'Source Sans Pro', sans-serif; color: white; font-weight: 300; } .wrapper { background: #50a3a2; background: linear-gradient(to bottom right, #50a3a2 0%, #53e3a6 100%); position: absolute; top: 50%; left: 0; width: 100%; height: 400px; margin-top: -200px; overflow: hidden; } .wrapper.form-success .container h1 { transform: translateY(85px); } .container { max-width: 600px; margin: 0 auto; padding: 80px 0; height: 400px; text-align: center; } .container h1 { font-size: 40px; transition-duration: 1s; transition-timing-function: ease-in-put; font-weight: 200; } form { padding: 20px 0; position: relative; z-index: 2; } form input { -webkit-appearance: none; -moz-appearance: none; appearance: none; outline: 0; border: 1px solid rgba(255, 255, 255, 0.4); background-color: rgba(255, 255, 255, 0.2); width: 250px; border-radius: 3px; padding: 10px 15px; margin: 0 auto 10px auto; display: block; text-align: center; font-size: 18px; color: white; transition-duration: 0.25s; font-weight: 300; } form input:hover { background-color: rgba(255, 255, 255, 0.4); } form input:focus { background-color: white; width: 300px; color: #53e3a6; } form button { -webkit-appearance: none; -moz-appearance: none; appearance: none; outline: 0; background-color: white; border: 0; padding: 10px 15px; color: #53e3a6; border-radius: 3px; width: 250px; cursor: pointer; font-size: 18px; transition-duration: 0.25s; } form button:hover { background-color: #f5f7f9; } .bg-bubbles { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; } .bg-bubbles li { position: absolute; list-style: none; display: block; width: 40px; height: 40px; background-color: rgba(255, 255, 255, 0.15); bottom: -160px; -webkit-animation: square 25s infinite; animation: square 25s infinite; transition-timing.........完整代码请登录后点击上方下载按钮下载查看
网友评论0