svg+css实现简洁登录表单页面代码
代码语言:html
所属分类:表单美化
代码描述:svg+css实现简洁登录表单页面代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> @import url("https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"); body { margin: 0; height: 100vh; overflow: hidden; background-color: #DBE0F9; font-family: "Roboto", sans-serif; } body .svg-top { position: absolute; top: -900px; right: -300px; } body .svg-bottom { position: absolute; bottom: -500px; left: -200px; } .container { display: flex; align-items: center; justify-content: center; height: 100%; } .container .wrapper { padding: 40px; background-color: #fff; border-radius: 20px; width: 350px; z-index: 1; } .container .wrapper header { margin-bottom: 40px; } .container .wrapper header .logo { width: 70px; height: 70px; border-radius: 50px; background-color: #6065D9; display: flex; justify-content: center; align-items: center; } .container .wrapper header .logo span { font-size: 18px; color: #fff; } .container .wrapper header h1 { color: #6065D9; font-size: 35px; font-weight: 500; margin-bottom: 0; margin-top: 40px; } .container .wrapper header p { color: #6065D9; font-size: 18px; font-weight: 300; margin: 5px 0 0 0; } .container .wrapper .main-content input { border: none; display: block; width: 100%; height: 50px; margin: 15px 0; font-size: 18px; color: #999; } .container .wrapper .main-content input::placeholder { color: #999; font-size: 18px; font-weight: 300; } .container .wrapper .main-content input:focus { outline: none; } .container .wrapper .main-content .line { width: 100%; height: 2px; background-color: #99999955; } .container .wrapper .main-content button { background: linear-gradient(to right, #6065D9, #17D7FA); border: none; border-radius: 50px; font-size: 18px; font-weight: 300; color: #fff; display: block; width: 100px; height: 40px; margin: 0 auto; outline: none; cursor: pointer; } .container .wrapper footer { display: flex; justify-content: space-between; align-items: flex-end; margin-top: 60px; } .container .wrapper footer p { margin: 0; font-weight: 100; } .container .wrapper footer p a { color: #6065D9; text-decoration: none; } @media (min-width: 320px) and (max-width: 768px) { .wrapper { margin: 0 10px !important; padding: 30px; } .wrapper header h1 { font-size: 30px; } } </style> </head> <body> <!-- partial:index.partial.html --> <div class="svg-top"> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" height="1337" width="1337"> <defs> <path id="path-1" opacity="1" fill-rule="evenodd" d="M1337,668.5 C1337,1037.455193874239 1037.455193874239,1337 668.5,1337 C523.6725684305388,1337 337,1236 370.50000000000006,1094 C434.03835568300906,824.6.........完整代码请登录后点击上方下载按钮下载查看
网友评论0