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

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

代码语言：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 */
/* =============================================================================.........完整代码请登录后点击上方下载按钮下载查看