css实现带登录动画效果的登录表单页面代码-html代码-BFW代码库

代码语言：html
代码描述：css实现带登录动画效果的登录表单页面代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>


@import url('https://fonts.googleapis.com/css?family=Merriweather&display=swap');

/* default */
/* =============================================================================================== */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-size: 62.5%;
}

body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  min-height: 100vh;
  padding: 2rem;

  font-family: 'Merriweather';

  /* https://unsplash.com/photos/_MDqwFlbUQg -:- by Anastasia Leonova */
  background: url('//repo.bfw.wiki/bfwrepo/image/5f24e1feda734.png');
  background-size: cover;
}

button {
  border: none;

  color: inherit;
  background: transparent;

  cursor: pointer;
}

button::-moz-focus-inner {
  border: 0;
}

/* app */
/* =============================================================================================== */
.app {
  --light-1: hsl(114, 31%, 93%);
  --light-2: hsl(114, 31%, 96%);
  --green-1: hsl(130, 46%, 38%);
  --green-2: hsl(130, 50%, 50%);
  --green-3: hsl(131, 42%, 42%);
  --green-4: hsl(130, 45%, 45%);
  --gray-1: hsl(0, 0%, 50%);
  --gray-2: hsl(0, 0%, 90%);
  --dark-1: hsl(0, 0%, 8%);
  --dark-2: hsl(0, 0%, 20%);
  --gradient-1: linear-gradient(to right bottom, var(--green-2), var(--green-1));
  --gradient-2: linear-gradient(to right bottom, var(--light-2), var(--light-1));

  width: 22rem;
  height: 46rem;
  border-radius: 2rem;

  box-shadow: 0 3rem 4rem .4rem hsla(0, 0%, 0%, .1),
    0 1.5rem 2.4rem -1rem hsla(0, 0%, 0%, .06),
    0 0 2.4rem hsla(0, 0%, 0%, .06);

  position: relative;
  overflow: hidden;
}

/* leafs */
/* =============================================================================================== */
.svg-leafs {
  position: absolute;
  top: -100%;
  left: -100%;
  visibility: hidden;
}

.leaf {
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 4;

  width: 20rem;

  pointer-events: none;
  transition: .3s;
}

.leaf--1 {
  right: -3rem;
  bottom: -11.5rem;
  transform: rotate(90deg);
}

.leaf--2 {
  right: -2rem;
  bottom: -8rem;
  transform: rotate(55deg);
}

.leaf--3 {
  right: -.5rem;
  bottom: -10.5rem;
  transform: rotate(15deg);
}

/* Other */
/* =============================================================================================== */
.number {
  width: 100%;
  margin-bottom: 2rem;

  text-align: right;
}

.heading {
  font-size: 2.6rem;
  letter-spacing: .2rem;

  transition: .4s;
}

.description {
  margin-top: 2rem;

  line-height: 2;
}

/* screen */
/* =============================================================================================== */
.screen {
  position: absolute;
  top: 0;
  left: 0;

  display: flex;
  flex-direction: column;
  justify-content: center;

  width: 100%;
  height: 100%;
  border-radius: inherit;
  padding: 2rem;

  color: var(--light-1);
  background: transparent;
}

/* first-screen */
/* =============================================================================================== */
.first-screen {
  align-items: flex-start;

  background: var(--gradient-1);
}

/* second-screen */
/* =============================================================================================== */
.second-screen {
  color: var(--green-1);

  left: 100%;
  z-index: 2;
}

.second-screen .heading {
  opacity: 0;
  transform: translate(30px);
}

/* third-screen */
/* =============================================================================================== */
.third-screen {
  left: 100%;
  z-index: 3;
}

.third-screen .heading {
  opacity: 0;
  transform: translateY(30px);
}

/* buttons */
/* =============================================================================================== */
/* btn-circle */
/* ---------------------------------------- */
.btn-circle {
  width: 4rem;
  height: 4rem;
  border-radius: 100rem;

  display: flex;
  justify-content: center;
  align-items: center;
}

/* btn-pTSecond */
/* ---------------------------------------- */
.btn-pTSecond {
  margin-top: 2rem;
  border: 1px solid var(--light-1);

  transform: scale(.8);
  transform-origin: left center;
  transition: .3s;
}

.btn-pTSecond:hover,
.btn-pTSecond:focus {
  transform: scale(1);
}

.btn-pTSecond::before {
  content: '';

  width: 100%;
  height: 100%;
  border-radius: inherit;

  position: absolute;
  background: var(--gradient-2);

  transform: scale(0);
  transition: .6s;
}

/* btn-pTFirst */
/* ---------------------------------------- */
.btn-pTFirst {
  color: var(--light-1);
  background: var(--gradient-1);

  position: absolute;
  top: 2rem;
  left: 2rem;
}

/* btn-words */
/* ---------------------------------------- */
.btn-words {
  width: 100%;

  font-size: 1.2rem;
  transition: all .4s, transform 1s .5s;
}

/* btn-form */
/* ---------------------------------------- */
.btn-form {
  border-radius: 100rem;
  margin-top: .4rem;
  padding: 1rem 0;

  color: var(--gray-1);
  background: var(--gray-2);

  font-weight: bold;

  z-index: 1;
}

.btn-form::before {
  content: '✓';

  position: absolute;
  transform: scale(0) translateX(-3px);

  transition: .5s .4ms cubic-bezier(.17, .09, .77, 1.8);
}

.btn-form::after {
  content: '';

  width: 100%;
  height: 100%;
  border-radius: inherit;

  position: absolute;
  top: 0;
  left: 0;
  background: var(--gradient-1);

  transform: scale(0);
  transition: .6s;
}

/* btn-sign-in */
/* ---------------------------------------- */
.btn-sign-in {
  color: var(--dark-2);
}

/* form */
/* =============================================================================================== */
.form {
  width: 100%;
  margin: 4rem 0 2rem;

  text-align: center;

  opacity: 0;
  transform: translateY(2rem);
}

.form__field {
  width: 100%;
  height: auto;
  margin-bottom: 2.2rem;

  position: relative;
}

.form__field::before,
.form__field::after {
  content: '';

  width: 0;

  position: absolute;
  bottom: 0;
  left: 0;

  transition: .5s;
}

.form__field::before {
  border-bottom: 1px solid var(--gray-1);
  opacity: .3;
}

.form__field::after {
  width: 0;
  border-bottom: 1px solid var(--green-1);
}

.form__field:focus-within::after {
  width: 100%;
}

.form__input {
  width: 100%;
  border: none;
  padding-bottom: .8rem;

  color: var(--dark-1);
  background: transparent;

  font-size: 1.2rem;
}

.form__success {
  position: absolute;
  left: 50%;
  bottom: .9rem;

  font-size: 1.2rem;
  pointer-events: none;

  opacity: 0;
  transform: translateX(-.4rem);
  transition: 1s .5s;
}

/* Styles that will be added via JavaScript */
/* =============================================================================================== */
/* second-screen-opened */
/* ---------------------------------------- */
.second-screen-opened .leaf {
  transition: 1s;
}

.second-screen-opened .leaf--1 {
  right: -8.8rem;
  bottom: 78%;

  transform: rotate(5deg);
}

.second-screen-opened .leaf--2 {
  right: -8.6rem;
  bottom: -5rem;

  transform: rotate(80deg);
}

.second-screen-opened .leaf--3 {
  right: 11rem;
  bottom: -4.2rem;

  transform: rotate(180deg);
}

.second-screen-opened .first-screen .heading {
  opacity: 0;
  transform: translateX(30px);
}

.second-screen-opened .btn-pTSecond::before {
  border-radius: 0;
  transform: scale(22);
}

.second-screen-opened .second-screen {
  left: 0;
}

.second-screen-opened .second-screen .heading {
  opacity: 1;
  transform: translate(0);
  transition: 1s .4s;
}

.second-screen-opened .second-screen .form {
  opacity: 1;
  transform: translateY(0);
  transition: .7s .1s;
}

.second-screen-opened .form__field::before {
  width: 100%;
  transition: .8s .3s;
}

/* third-screen-opened  */
/* ---------------------------------------- */
.third-screen-opened .leaf--1 {
  right: 10rem;
  bottom: -8rem;

  transform: rotate(-10deg);
}

.third-screen-opened .leaf--2 {
  right: 10rem;
  bottom: 74%;

  transform: rotate(90deg);
}

.third-screen-opened .leaf--3 {
  right: -10.2rem;
  bottom: 26%;

  transform: rotate(40deg);
}

.third-screen-opened .second-screen .heading {
  opacity: 0;
  transform: translateX(30px);
}

.third-screen-opened .btn-form::after {
  border-radius: 0;
  transform: scale(22);
}

.third-screen-opened .third-screen {
  left: 0;
}

.third-screen-opened .third-screen .heading {
  opacity: 1;
  transform: translate(0);
  transition: 1s .4s;
}

/* on-btn-pTSecond */
/* ---------------------------------------- */
.on-btn-pTSecond .leaf--1 {
  right: -3rem;
  bottom: -8.5rem;
  transform: rotate(97deg);
}

.on-btn-pTSecond .leaf--2 {
  bottom: -5rem;
  transform: rotate(52deg);
}

.on-btn-pTSecond .leaf--3 {
  right: 3rem;
  bottom: -7.5rem;
  transform: rotate(5deg);
}

/* .form-ready */
/* ---------------------------------------- */
.form-ready .btn-form {
  color: var(--light-1);
  background: var(--green-2);
}

/* .form-submitted */
/* ---------------------------------------- */
.form-submitted .btn-form {
  width: 3.6rem;
  transform: translateX(-2rem);
}

.form-submitted .btn-form::before {
  transform: scale(1) translateX(-3px);
}

.form-submitted .form__success {
  opacity: 1;
  transform: translateX(.4rem);
}

.form-submitted .btn-sign-in {
  opacity: 0;
}

/* custom-cursor */
/* =============================================================================================== */
.custom-cursor {
  width: 3rem;
  height: 3rem;
  border: 1px solid hsla(0, 0%, 100%, .7);
  border-radius: 100%;

  background: hsla(0, 0%, 80%, .2);
  position: absolute;.........完整代码请登录后点击上方下载按钮下载查看