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

代码语言：html
代码描述：css+js实现紫色带动画效果登录表单页面代码，点击输入框有明显的过渡动画。
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <style>
        @import url('https://fonts.googleapis.com/css?family=Roboto');
    body {
      all: initial;
      font-family: 'Roboto', sans-serif;
      letter-spacing: 0.02em;
    }
    * {
      box-sizing: border-box;
    }
    main {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-pack: center;
          -ms-flex-pack: center;
              justify-content: center;
      -webkit-box-align: center;
          -ms-flex-align: center;
              align-items: center;
      background: #3f2766;
    }
    .form {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
          -ms-flex-align: center;
              align-items: center;
      -webkit-box-pack: center;
          -ms-flex-pack: center;
              justify-content: center;
      position: relative;
      width: 400px;
      height: 400px;
      -ms-flex-negative: 0;
          flex-shrink: 0;
      padding: 20px;
      border-radius: 5px;
    }
    .form__loader {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      position: absolute;
      left: 0;
      top: 0;
      height: 100%;
      width: 100%;
      -webkit-box-pack: center;
          -ms-flex-pack: center;
              justify-content: center;
      -webkit-box-align: center;
          -ms-flex-align: center;
              align-items: center;
      z-index: -4;
      -webkit-transition: all 0.5s ease;
      transition: all 0.5s ease;
    }
    .form__content {
      text-align: center;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-pack: center;
          -ms-flex-pack: center;
              justify-content: center;
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
          -ms-flex-direction: column;
              flex-direction: column;
      position: relative;
      opacity: 0;
      -webkit-transform: translateY(10px);
              transform: translateY(10px);
      -webkit-transition: all 0.5s ease 0.7s;
      transition: all 0.5s ease 0.7s;
    }
    .form__cover {
      position: absolute;
      left: 0;
      top: 0;
      height: 100%;
      width: 100%;
      z-index: -4;
      border-radius: 7px;
      overflow: hidden;
      -webkit-transition: all 0.3s ease 0.8s;
      transition: all 0.3s ease 0.8s;
      box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
    }
    .form__cover:after {
      content: '';
      position: absolute;
      left: 0;
      top: 0;
      height: 100%;
      width: 100%;
      background: #4d317a;
      z-index: -4;
      border-radius: 50%;
      -webkit-transition: all 1.5s ease 0.3s;
      transition: all 1.5s ease 0.3s;
      -webkit-transform: scale(0);
              transform: scale(0);
    }
    .form__cover:before {
      content: '';
      position: absolute;
      left: 0;
      top: 0;
      height: 100%;
      width: 100%;
      background: white;
      z-index: -5;
      border-radius: 50%;
      -webkit-transition: all 0.5s ease;
      transition: all 0.5s ease;
      -webkit-transform: scale(0);
              transform: scale(0);
    }
    body.on-start .form__cover:before {
      -webkit-transform: scale(0.15);
              transform: scale(0.15);
    }
    body.document-loaded .form__loader {
      -webkit-transform: scale(0);
              transform: scale(0);
      opacity: 0;
      visibility: hidden;
    }
    body.document-loaded .form__content {
      opacity: 1;
      -webkit-transform: none;
              transform: none;
    }
    body.document-loaded .form__cover {
      box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
    }
    body.document-loaded .form__cover:after {
      -webkit-transform: scale(2);
              transform: scale(2);
    }
    body.document-loaded .form__cover:before {
      -webkit-transition: opacity 0.3s ease 0.8s, -webkit-transform 2s ease;
      transition: opacity 0.3s ease 0.8s, -webkit-transform 2s ease;
      transition: transform 2s ease, opacity 0.3s ease 0.8s;
      transition: transform 2s ease, opacity 0.3s ease 0.8s, -webkit-transform 2s ease;
      -webkit-transform: scale(2);
              transform: scale(2);
      opacity: 0;
    }
    h1 {
      font-size: 40px;
      margin: 15px 0 20px 0;
      letter-spacing: 0.05em;
      color: #714cab;
      font-weight: 700;
    }
    .styled-button {
      -webkit-appearance: none;
      -webkit-user-select: none;
      cursor: pointer;
      font-size: 14px;
      width: 100%;
      padding: 20px;
      outline: none;
      background: none;
      position: relative;
      color: #492e72;
      border-radius: 3px;
      margin-bottom: 25px;
      border: none;
      text-transform: uppercase;
      font-weight: 700;
      letter-spacing: 0.1em;
      background: #714cac;
      -webkit-transition: all 0.3s ease;
      transition: all 0.3s ease;
      overflow: hidden;
    }
    .styled-button__real-text-holder {
      position: relative;
    }
    .styled-button__real-text {
      color: transparent;
      display: inline-block;
    }
    .styled-button__text-holder {
      position: absolute;
      left: 0;
      top: 0;
      height: 100%;
      width: 100%;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
          -ms-flex-align: center;
              align-items: center;
      -webkit-box-pack: center;
          -ms-flex-pack: center;
              justify-content: center;
      -webkit-transition: all 0.3s ease;
      transition: all 0.3s ease;
    }
    .styled-button__moving-block {
      -webkit-transition: all 0.3s ease;
      transition: all 0.3s ease;
      position: absolute;
      left: 0;
      top: 0;
      height: 100%;
      width: 100%;
      overflow: hidden;
    }
    .styled-button__moving-block.back {
      color: white;
      -webkit-transform: translateX(-100%);
              transform: translateX(-100%);
    }
    .styled-button__moving-block.back .styled-button__text-holder {
      -webkit-transform: translateX(100%);
              transform: translateX(100%);
    }
    .styled-button:hover,
    .styled-button:active {
      box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
      background: #7a51bb;
    }
    .styled-button:hover .face,
    .styled-button:active .face {
      -webkit-transform: translateX(100%);
              transform: translateX(100%);
    }
    .styled-button:hover .face .styled-button__text-holder,
    .styled-button:active .face .styled-button__text-holder {
      -webkit-transform: translateX(-100%);
              transform: translateX(-100%);
    }
    .styled-button:hover .back,
    .styled-button:active .back {
      -webkit-transform: translateX(0);
              transform: translateX(0);
    }
    .styled-button:hover .back .styled-button__text-holder,
    .styled-button:active .back .styled-button__text-holder {
      -webkit-transform: translateX(0);
              transform: translateX(0);
    }
    .styled-button:active {
      box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
    }
    .styled-input {
      width: 100%;
      position: relative;
      margin-bottom: 25px;
      border: 1px solid rgba(255, 255, 255, 0.2);
      border-radius: 3px;
      -webkit-transition: all 0.3s ease;
      transition: all 0.3s ease;
    }
    .styled-input__circle {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      z-index: -2;
      overflow: hidden;
      border-radius: 3px;
    }
    .styled-input__circle:after {
      content: '';
      position: absolute;
      left: 16.5px;
      top: 19px;
      height: 14px;
      width: 14px;
      z-index: -2;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.15);
      box-shadow: 0 0 10px rgba(255, 255, 255, 0);
      -webkit-transition: opacity 1s ease, -webkit-transform 0.6s ease;
      transition: opacity 1s ease, -webkit-transform 0.6s ease;
      transition: transform 0.6s ease, opacity 1s ease;
      transition: transform 0.6s ease, opacity 1s ease, -webkit-transform 0.6s ease;
    }
    .styled-input__input {
      width: 100%;
      -webkit-appearance: none;
      font-size: 14px;
      outline: none;
      background: none;
      padding: 18px 15px;
      color: #ceafff;
      border: none;
      font-weight: 600;
      letter-spacing: 0.035em;
    }
    .styled-input__placeholder {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
          -ms-flex-align: center;
              align-items: center;
      z-index: -1;
      padding-left: 45px;
      color: white;
    }
    .styled-input__placeholder-text {
      -webkit-perspective: 500px;
              perspective: 500px;
      display: inline-block;
    }
    .styled-input__placeholder-text .letter {
      display: inline-block;
      vertical-align: middle;
      position: relative;
      -webkit-animation: letterAnimOut 0.25s ease forwards;
              animation: letterAnimOut 0.25s ease forwards;
      text-shadow: 0 0 5px;
    }
    .styled-input__placeholder-text .letter.active {
      -webkit-animation: letterAnimIn 0.25s ease forwards;
              animation: letterAnimIn 0.25s ease forwards;
    }
    .styled-input:hover {
      border-color: rgba(255, 255, 255, 0.4);
    }
    .styled-input.filled {
      border-color: rgba(255, 255, 255, 0.2);
    }
    .styled-input.filled .styled-input__circle:after {
      -webkit-transform: scale(37);
              transform: scale(37);
      opacity: 0;
    }
    @-webkit-keyframes letterAnimIn {
      0% {
        -webkit-transform: translate(0, 0);
                transform: translate(0.........完整代码请登录后点击上方下载按钮下载查看