css实现扁平化山水视频背景登录注册表单效果代码
代码语言:html
所属分类:表单美化
代码描述:css实现扁平化山水视频背景登录注册表单效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Roboto:400,100,300,500,700,900'> <link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Montserrat:400,700'> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/font-awesome-4.7.0/css/font-awesome.min.css"> <style> /* Form */ .form { position: relative; z-index: 1; background: #FFFFFF; max-width: 300px; margin: 0 auto 100px; padding: 30px; border-top-left-radius: 3px; border-top-right-radius: 3px; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; text-align: center; } .form .thumbnail { background: #EF3B3A; width: 150px; height: 150px; margin: 0 auto 30px; padding: 50px 30px; border-top-left-radius: 100%; border-top-right-radius: 100%; border-bottom-left-radius: 100%; border-bottom-right-radius: 100%; box-sizing: border-box; } .form .thumbnail img { display: block; width: 100%; } .form input { outline: 0; background: #f2f2f2; width: 100%; border: 0; margin: 0 0 15px; padding: 15px; border-top-left-radius: 3px; border-top-right-radius: 3px; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; box-sizing: border-box; font-size: 14px; } .form button { outline: 0; background: #EF3B3A; width: 100%; border: 0; padding: 15px; border-top-left-radius: 3px; border-top-right-radius: 3px; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; color: #FFFFFF; font-size: 14px; transition: all 0.3 ease; cursor: pointer; } .form .message { margin: 15px 0 0; color: #b3b3b3; font-size: 12px; } .form .message a { color: #EF3B3A; text-decoration: none; } .form .register-form { display: none; } .container { position: relative; z-index: 1; max-width: 300px; margin: 0 auto; } .container:before, .container:after { content: ""; display: block; clear: both; } .container .info { margin: 50px auto; text-align: center; } .container .info h1 { margin: 0 0 15px; padding: 0; font-size: 36px; font-weight: 300; color: #1.........完整代码请登录后点击上方下载按钮下载查看
网友评论0