原生JS+CSS实现炫酷重力模拟弹跳系统的登录页面

下面我就来详细讲解一下“原生JS+CSS实现炫酷重力模拟弹跳系统的登录页面”的完整攻略。

准备工作

1. 引入布局样式

在实现登录页面前，我们需要先布局整个页面。可以使用flex布局来实现，在此之前需要先引入布局样式。

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #282c34;
  font-family: sans-serif;
}

.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
  background-color: #f7f7f7;
  border-radius: 10px;
  box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.2);
}

2. HTML结构

在布局样式引入完成后，我们需要按照HTML结构来实现整个页面。代码如下：

<body>
  <div class="container">
    <h2>Login</h2>
    <input type="text" placeholder="Username">
    <input type="password" placeholder="Password">
    <button>Login</button>
  </div>
</body>

实现动画效果

1. 基本动画效果

在实现重力模拟弹跳系统前，我们需要先实现登录框的基本动画效果。代码如下：

.container {
  /* 省略其他样式 */

  animation: drop 0.8s cubic-bezier(0.68, -0.55, 0.27, 1.55) both;
}

@keyframes drop {
  0% {
    transform: translateY(-200px);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

2. 实现重力模拟弹跳系统

在实现重力模拟弹跳系统时，我们需要控制登录框的位置变化。代码如下：

.container {
  /* 省略其他样式 */

  position: relative;
}

.container:after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: #282c34;
  transform: translate(-50%, -50%);
  animation: bounce 0.8s ease infinite alternate;
}

@keyframes bounce {
  0% {
    transform: translate(-50%, -50%) translateY(0);
  }
  100% {
    transform: translate(-50%, -50%) translateY(50px);
  }
}

实现交互效果

1. 基本交互效果

在实现基本交互效果前，我们需要先添加按钮的hover效果。代码如下：

button:hover {
  background-color: #2196f3;
  color: #fff;
  cursor: pointer;
}

2. 实现点击按钮后的交互效果

在实现点击按钮后的交互效果时，我们需要通过JS来更新密码输入框的状态。代码如下：

const passwordInput = document.querySelector('input[type="password"]');

document.querySelector('button').addEventListener('click', () => {
    // 判断是否打开重力模拟弹跳系统
    if (passwordInput.getAttribute('data-bounce') == null) {
        passwordInput.setAttribute('data-bounce', 'true');
    } else {
        passwordInput.removeAttribute('data-bounce');
    }
});

在JS代码中，我们通过给密码输入框添加data-bounce属性来实现控制重力模拟弹跳系统启动和关闭。

3. 修改样式来配合交互效果

在JS代码添加完成后，我们需要修改样式来配合交互效果。代码如下：

.container:after {
  /* 省略其他样式 */

  animation-name: none;
  transform: translate(-50%, -50%) translateY(0);
}

input[type="password"][data-bounce="true"] + input[type="text"] {
  animation: shake 0.8s cubic-bezier(0.68, -0.55, 0.27, 1.55) both;
}

@keyframes shake {
  0% {
    transform: translateX(0);
  }
  15% {
    transform: translateX(-20px);
  }
  30% {
    transform: translateX(20px);
  }
  45% {
    transform: translateX(-20px);
  }
  60% {
    transform: translateX(20px);
  }
  75% {
    transform: translateX(-20px);
  }
  90% {
    transform: translateX(20px);
  }
  100% {
    transform: translateX(0);
  }
}

在样式中，我们通过animation-name为none来关闭重力模拟弹跳系统，并通过添加特定条件下的样式来实现密码输入框的摇头效果。