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