前端猫头鹰网站登陆页面

星染夜空

于 2023-11-16 15:07:53 发布

阅读量365

点赞数 4

文章标签：前端 javascript html5 css vscode

本文链接：https://blog.csdn.net/hexuhui0920/article/details/134442060

版权

一、创意效果介绍

1.正常情况下猫头鹰的眼睛会睁开，在输入密码的时候猫头鹰的眼睛会用翅膀捂住

2.有忘记密码注册登录按钮

3.如果没有输入密码，点击登录会出现请填写此栏

4.输入 Email Password后，点击登录会实现跳转页面

二、效果图片

三、设计代码

（1）HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>星染夜空的猫头鹰登陆界面</title>
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"
    />
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css"
    />
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
    />
    <link rel="stylesheet" href="./style.css" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
  </head>
  <body>
    <!-- partial:index.partial.html -->
    <div class="login">
      <form method="post" class="container loginform">
        <div id="owl-login">
          <div class="eyes"></div>
          <div class="arm-up-right"></div>
          <div class="arm-up-left"></div>
          <div class="arm-down-left"></div>
          <div class="arm-down-right"></div>
        </div>
        <div class="pad">
          <div class="control-group">
            <div class="controls">
              <label for="email" class="control-label fa fa-envelope"></label>
              <input
                id="email"
                class="form-control"
                type="email"
                name="email"
                placeholder="Email"
                autocomplete="off"
              />
            </div>
          </div>
          <div class="control-group">
            <div class="controls">
              <label
                for="password"
                class="control-label fa fa-asterisk"
              ></label>
              <input
                id="password"
                type="password"
                name="password"
                placeholder="Password"
                required=""
                autocomplete="off"
                class="form-control"
              />
            </div>
          </div>
        </div>
        <div class="form-actions">
          <a href="#" class="btn pull-left btn-link text-muted">忘记密码</a>
          <a href="#" class="btn btn-link text-muted">注册</a>
          <button type="submit" class="btn btn-primary">请登录</button>
        </div>
      </form>
    </div>
    <!-- partial -->
    <script src="./script.js"></script>
  </body>
</html>

（2）CSS

.login {
  background-color: #018ef5;
  height: 100vh;
}

.loginform {
  margin-top: 0px;
  top: 100px;
  position: relative;
  border: 1px solid #ddd;
  background-color: #fff;
  position: relative;
  max-width: 400px;
  padding: 0
}

.container:before,
.container:after {
  display: table;
  content: " "
}

.container:after {
  clear: both
}

#owl-login {
  width: 116px;
  height: 92px;
  background-image: url(https://cdn.readme.io/public/img/login/face.png);
  position: absolute;
  top: -82px;
  left: 50%;
  margin-left: -64px
}

.arm-up-right {
  width: 51px;
  height: 41px;
  background-image: url(https://cdn.readme.io/public/img/login/arm-up-right.png);
  position: absolute;
  bottom: 11px;
  right: 5px;
  transform: translateX(57px) scale(.8);
  transform-origin: 0 40px;
  transition: background-position .3s ease-out, transform .3s ease-out, opacity 0s linear .3s;
  background-position: 0 25px;
  background-repeat: no-repeat;
  opacity: 0;
  filter: alpha(opacity=0)
}

.arm-up-left {
  width: 52px;
  height: 41px;
  background-image: url(https://cdn.readme.io/public/img/login/arm-up-left.png);
  position: absolute;
  bottom: 11px;
  left: -3px;
  transform: translateX(-34px) scale(.8);
  transform-origin: 0 40px;
  transition: background-position .3s ease-out, transform .3s ease-out, opacity 0s linear .3s;
  background-position: 0 25px;
  background-repeat: no-repeat;
  opacity: 0;
  filter: alpha(opacity=0)
}

.arm-down-left {
  width: 43px;
  height: 25px;
  background-image: url(https://cdn.readme.io/public/img/login/arm-down-left.png);
  position: absolute;
  bottom: 2px;
  left: -34px;
  transition: .3s ease-out;
}

.arm-down-right {
  width: 43px;
  height: 26px;
  background-image: url(https://cdn.readme.io/public/img/login/arm-down-right.png);
  position: absolute;
  bottom: 1px;
  right: -40px;
  transition: .3s ease-out;
}

.pad {
  overflow: hidden;
  padding: 30px;
}

.controls {
  position: relative;
  margin-bottom: 10px;
}


.loginform label {
  position: absolute;
  top: 13px;
  left: 13px;
  font-size: 16px;
  color: rgba(0, 0, 0, .3)
}

.loginform input {
  padding: 9px 6px 9px 40px;
  height: auto
}

.form-actions {
  border-top: 1px solid #e4e4e4;
  background-color: #f7f7f7;
  padding: 15px 30px;
  text-align: right
}

#owl-login.password .arm-down-left {
  transform: translateX(40px) scale(0) translateY(-10px);
  opacity: 0;
  filter: alpha(opacity=0)
}

#owl-login.password .arm-up-left {
  transform: scale(1);
  background-position: 0 0;
  opacity: 1;
  filter: none;
  transition: background-position .3s ease-out, transform .3s ease-out
}

#owl-login.password .arm-down-right {
  transform: translateX(-32px) scale(0) translateY(-8px);
  opacity: 0;
  filter: alpha(opacity=0)
}

#owl-login.password .arm-up-right {
  transform: scale(1);
  background-position: 0 0;
  opacity: 1;
  filter: none;
  transition: background-position .3s ease-out, transform .3s ease-out
}

（3）Javascript

const $owlLogin = document.getElementById('owl-login');
const $passwordInput = document.getElementById('password');

$passwordInput.addEventListener('focus', () => {
  $owlLogin.classList.add('password');
});

$passwordInput.addEventListener('focusout', () => {
  $owlLogin.classList.remove('password');
});