css+js实现可爱狗狗交互登录页面表单效果代码-html代码-BFW代码库

css+js实现可爱狗狗交互登录页面表单效果代码

代码语言：html

代码描述：css+js实现可爱狗狗交互登录页面表单效果代码，狗狗跟随你的操作做出不同的表情，当你输入账号的时候，狗狗会倾斜头部，当你输入密码时，狗狗会遮住眼睛。

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

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/font-awesome-4.7.0/css/font-awesome.min.css">
    <style>
        * {
      box-sizing: border-box;
    }
    body {
      width: 100vw;
      height: 100vh;
      background-color: #e0e0e0;
      overflow: hidden;
      font-size: 12px;
    }
    .inspiration {
      position: fixed;
      bottom: 0;
      right: 0;
      padding: 10px;
      text-align: center;
      text-decoration: none;
      font-family: 'Gill Sans', sans-serif;
      font-size: 12px;
      color: #969696;
    }
    .inspiration img {
      width: 60px;
    }
    .center {
      position: relative;
      top: 50%;
      left: 50%;
      display: inline-block;
      width: 275px;
      height: 490px;
      border-radius: 3px;
      transform: translate(-50%, -50%);
      overflow: hidden;
      background-image: linear-gradient(to top right, #f9a743, #f9db5f);
    }
    @media screen and (max-height: 500px) {
      .center {
        transition: transform 0.5s;
        transform: translate(-50%, -50%) scale(0.8);
      }
    }
    .center .ear {
      position: absolute;
      top: -110px;
      width: 200px;
      height: 200px;
      border-radius: 50%;
      background-color: #243946;
    }
    .center .ear.ear--left {
      left: -135px;
    }
    .center .ear.ear--right {
      right: -135px;
    }
    .center .face {
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 200px;
      height: 150px;
      margin: 80px auto 10px;
      --rotate-head: 0deg;
      transform: rotate(var(--rotate-head));
      transition: transform 0.2s;
      transform-origin: center 20px;
    }
    .center .eye {
      display: inline-block;
      width: 25px;
      height: 25px;
      border-radius: 50%;
      background-color: #243946;
    }
    .center .eye.eye--left {
      margin-right: 40px;
    }
    .center .eye.eye--right {
      margin-left: 40px;
    }
    .center .eye .glow {
      position: relative;
      top: 3px;
      right: -12px;
      width: 12px;
      height: 6px;
      border-radius: 50%;
      background-color: #fff;
      transform: rotate(38deg);
    }
    .center .nose {
      position: relative;
      top: 30px;
      transform: scale(1.1);
    }
    .center .nose .glow {
      position: absolute;
      top: 3px;
      left: 32%;
      width: 15px;
      height: 8px;
      border-radius: 50%;
      background-color: #476375;
    }
    .center .mouth {
   .........完整代码请登录后点击上方下载按钮下载查看