div+css实现大气简洁中性自适应登录表单页面代码
代码语言：html
所属分类：表单美化
代码描述：div+css实现大气简洁中性自适应登录表单页面代码
代码标签： div css 大气 简洁 中性 自适应 登录 表单 页面 代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel='stylesheet' href='https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap'>
<style>
:root {
--background: 266, 16%, 92%;
--text-primary: 0, 0%, 0%;
/* Colors */
--black: 0, 0%, 0%;
--white: 0, 0%, 100%;
--quite-gray: 0, 0%, 50%;
--red: 347, 84%, 68%;
--orange: 23, 84%, 68%;
--yellow: 52, 84%, 68%;
--green: 114, 84%, 68%;
--teal: 163, 84%, 68%;
--blue: 219, 84%, 68%;
--purple: 279, 84%, 68%;
--pink: 312, 84%, 68%;
/* Gradients */
--gradient: linear-gradient(90deg, hsla(var(--red), 1) 0%, hsla(var(--orange), 1) 12.5%, hsla(var(--yellow), 1) 25%, hsla(var(--green), 1) 37.5%, hsla(var(--teal), 1) 50%, hsla(var(--blue), 1) 62.5%, hsla(var(--blue), 1) 75%, hsla(var(--purple), 1) 87.5%, hsla(var(--pink), 1) 100%);
/* Sizes */
--heading-large: 5.6rem;
--heading-medium: 3.6rem;
--heading-small: 2.4rem;
--paragraph: 1.11rem;
/* misc */
--transition-main: .175, .685, .32;
/* Fonts */
--font-main: "Poppins";
}
*, *::before, *::after {
box-sizing: inherit;
}
html, body {
margin: 0;
width: 100%;
color: hsl(var(--text-primary));
font-family: var(--font-main);
background-color: hsl(var(--background));
-webkit-font-smoothing: antialiased;
scroll-behavior: smooth;
box-sizing: border-box;
}
main {
min-height: 100vh;
}
h1, h2, h3, h4, h5, h6 {
margin: 0;
}
h1 {
font-size: var(--heading-large);
}
h2 {
font-size: var(--heading-medium);
}
h3 {
font-size: var(--heading-small);
}
h4 {
font-size: calc(var(--heading-small) - .2rem);
}
h5 {
font-size: calc(var(--heading-small) - .4rem);
}
h6 {
font-size: calc(var(--heading-small) - .6rem);
}
h1, h2 {
font-weight: 900;
}
h3, h4, h5, h6 {
font-weight: 800;
}
p {
margin: 0;
font-size: var(--paragraph);
}
a {
color: hsla(var(--primary), 1);
font-size: var(--paragraph);
text-decoration: underline;
}
a:visited {
color: hsla(var(--primary), .5);
}
form {
margin: 0;
}
fieldset {
margin: 0;
padding: .5em 0;
border: none;
}
input {
padding: .8em 1.2em;
font-size: var(--paragraph);
background-color: hsl(var(--grooble));
border: 2px solid hsl(var(--grooble));
outline: none;
}
textarea {
padding: .8em 1.2em;
font-size: var(--paragraph);
font-family: var(--font-main);
background-color: hsl(var(--grooble));
border: 2px solid hsl(var(--grooble));
outline: none;
}
input, textarea {
transition: all .2s ease-in-out;
}
input:hover, input:focus, textarea:hover, textarea:focus {
box-shadow:
0 0 0 2px hsl(var(--black)),
0 0 0 3px hsl(var(--white));
border: 2px solid transparent;
}
/* Classes */
.flexbox {
display: flex;
justify-content: center;
align-items: center;
}
.flexbox-left {
display: flex;
justify-content: flex-start;
align-items: center;
}
.flexbox-right {
display: flex;
justify-content: flex-end;
align-items: center;
}
/* Columns */
.flexbox-col {
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
}
.flexbox-col-left {
display: flex;
justify-content: flex-start;
flex-direction: column;
align-items: flex-start;
}
.flexbox-col-left-ns {
display: flex;
justify-content: center;
flex-direction: column;
align-items: flex-start;
}
.flexbox-col-right {
display: flex;
justify-content: flex-end;
flex-direction: column;
align-items: flex-end;
}
.flexbox-col-start-center {
display: flex;
justify-content: flex-start;
flex-direction: column;
align-items: center;
}
/* Spacings */
.flexbox-space-bet {
display: flex;
justify-content: space-between;
align-items: center;
}
/* Button */
button {
padding: .8em 1.2em;
border: 1px solid hsl(var(--black));
background-color: hsl(var(--background));
font-size: var(--paragraph);
cursor: pointer;
outline: none;
}
button:focus {
box-shadow:
0 0 0 2px hsl(var(--black)),
0 0 0 3px hsl(var(--white));
border: 1px solid transparent;
}
.btn-primary-gray {
color: hsl(var(--black)) !important;
background: hsl(var(--white)) !important;
}
.button, .btn-secondary {
margin: 0;
width: 100%;
position: relative;
padding: 1.2em 1.8em;
letter-spacing: .025em;
color: hsl(var(--background));
font-size: var(--paragraph);
background: var(--gradient);
background-size: 500%;
border-radius: 5em;
border: none;
transform: scaleX(1);
transition: transform .3s cubic-bezier(var(--transition-main), 1.275), filter .3s cubic-bezier(var(--transition-main), 1.275), bottom .3s cubic-bezier(var(--transition-main), 1.275), background-position 7.5s cubic-bezier(var(--transition-main), .955);
}
.button {
transition: transform .3s cubic-bezier(var(--transition-main), 1.275), bottom .3s cubic-bezier(var(--transition-main), 1.275), background-position 17.5s cubic-bezier(var(--transition-main), .955);
}
.button, .button .btn-secondary {
bottom: 0;
background-position: 0 50%;
}
.button .btn-secondary {
left: 0;
width: 100%;
position: absolute;
filter: blur(1rem);
transform: scale3d(.85, .95, 1);
transition: transform .3s cubic-bezier(var(--transition-main), 1.275), filter .3s cubic-bezier(var(--transition-main), 1.275), bottom .3s cubic-bezier(var(--transition-main), 1.275), background-position 7.5s cubic-bezier(var(--transition-main), .955), opacity 3s cubic-bezier(var(--transition-main), 1.275);
opacity: .5;
z-index: -1;
}
.button:focus {
outline: none;
}
.button:hover {
bottom: 2px;
transform: scale3d(1.1, 1.1, 1);
background-position: 100% 50%;
outline: none;
}
.btn-secondary, .button:hover .btn-secondary {
bottom: -5px;
background-position: 100% 50%;
filter: blur(1.6rem);
opacity: .8;
}
.button ion-icon {
margin: 0 .5em .075em 0;
}
/* Main */
.view-width {
width: 70%;
}
/* Login */
.login-wrapper {
width: 100%;
height: 100vh;
position: relative;
overflow: hidden;
}
/* Login Form */
.login {
position: relative;
z-index: 10;
}
.login-inner {
width: 100%;
}
.login-form {
padding: 3em;
background-color: hsl(var(--background));
box-shadow: 0 17px 30px -10px hsla(var(--black), .125);
border-radius: .75em;
.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0