div+css实现简约动感背景登录表单页面代码-html代码-BFW代码库

div+css实现简约动感背景登录表单页面代码

代码语言：html

代码描述：div+css实现简约动感背景登录表单页面代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
<style>
    @import url('https://fonts.googleapis.com/css?family=Raleway:400,700');

* {
        box-sizing: border-box;
        margin: 0;
        padding: 0;     
        font-family: Raleway, sans-serif;
}

body {
        background: #0e6cc4;            
}

.container {
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 100vh;
}

.screen {               
        background: linear-gradient(90deg, #2962FF, #5b53cc);           
        position: relative;     
        height: 500px;
        width: 360px;   
        box-shadow: 0px 0px 24px #5C5696;
}

.screen__content {
        z-index: 1;
        position: relative;     
        height: 100%;
}

.screen__background {           
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 0;
        -webkit-clip-path: inset(0 0 0 0);
        clip-path: inset(0 0 0 0);      
}

.screen__background__shape {
        transform: rotate(45deg);
        position: absolute;
}

.screen__background__shape1 {
        height: 520px;
        width: 520px;
        background: #FFF;       
        top: -50px;
        right: 120px;   
        border-radius: 0 72px 0 0;
}

.screen__background__shape2 {
        height: 220px;
        width: 220px;
        background: #77daff;    
        top: -172px;
        right: 0;       
        border-radius: 32px;
}

.screen__background__shape3 {
        height: 540px;
        width: 190px;
        background: linear-gradient(270deg, rgb(24, 165, 236), rgb(88, 182, 229));
        top: -24px;
        right: 0;       
        border-radius: 32px;
}

.screen__background__shape4 {
        height: 400px;
        width: 200px;
        background: #77daff;    
        top: 420px;
        right: 50px;    
        border-radius: 60px;
}

.login {
        width: 320px;
        padding: 30px;
        padding-top: 156px;
}

.login__field {
        padding: 20px 0px;      
        position: relative;     
}

.login__icon {
        position: absolute;
        top: 30px;
        color: #7875B5;
}

.login__input {
        border: none;
        border-bottom: 2px solid #D1D1D4;
        background: none;
        padding: 10px;
        padding-left: 24px;
        font-weight: 700;
        width: 75%;
        transition: .2s;
}

.login__input:active,
.login__input:focus,
.login__input:hover {
        outline: none;
        border-bottom-color: #6A679E;
}

.login__submit {
        background: #fff;
        font-size: 14px;
        margin-top: 30px;
        padding: 16px 20px;
        border-radius: 26px;
        border: 1px solid #D4D3E8;
        text-transform: uppercase;
        font-weight: 700;
        display: flex;
        align-items: center;
        width: 100%;
        color: #4C489D;
        box-shadow: 0px 2px 2px #5C5696;
        cursor: pointer;
        transition: .2s;
}

.login__submit:active,
.login__submit:focus,
.login__submit:hover {
        border-color: #6A679E;
        outline: none;
}

.button__icon {
        font-size: 24px;
        margin-left: auto;
        color: #7875B5;
}

.social-login { 
        position: absolute;
        height: 140px;
        width: 160px;
        text-align: center;
        bottom: 0px;
        right: 0px;
        color: #fff;
}

.social-icons {
        display: fle.........完整代码请登录后点击上方下载按钮下载查看