登录页面登录窗口，登录失败抖动效果

效果展示

屏幕录制2023-05-24 15.18.20

具体实现

如果你想在登录失败时给登录框添加抖动效果，你可以使用JavaScript来实现。以下是一种可能的实现方式：

HTML:

<div class="box">登录框</div>
<button onclick="login()">登录</button>

CSS:

.box {
  position: relative;
  transition: transform 0.2s;
}

.shake {
  animation: shake 0.4s;
}

@keyframes shake {
  0% { transform: translate(0, 0); }
  10%, 30%, 50%, 70%, 90% { transform: translate(-5px, 0); }
  20%, 40%, 60%, 80% { transform: translate(5px, 0); }
  100% { transform: translate(0, 0); }
}

JavaScript:

function login() {
  // 模拟登录失败的情况
  var loginSuccess = false;

  if (loginSuccess) {
    // 登录成功的逻辑
    console.log("登录成功");
  } else {
    var box = document.querySelector('.box');
    box.classList.add('shake');

    // 移除抖动效果
    setTimeout(function() {
      box.classList.remove('shake');
    }, 400);
  }
}

在上面的代码中，我们使用了一个 login() 函数来模拟登录操作。当登录失败时，我们通过 JavaScript 动态地给登录框的元素添加和移除 shake 类，从而触发抖动效果。

在 login() 函数中，首先检查登录是否成功。如果登录成功，将执行登录成功的逻辑；如果登录失败，则通过 querySelector 方法选择登录框的元素，并使用 classList.add() 方法添加 shake 类来触发抖动动画。接着，通过 setTimeout 函数在 0.4 秒后移除 shake 类，从而停止抖动效果。

这样，当你点击登录按钮并登录失败时，登录框将抖动几下。你可以根据需要调整抖动的持续时间和幅度来达到你想要的效果。

效果解释

当给一个元素添加抖动效果时，使用的CSS属性和值具体含义如下：

1. position: relative;

   • 这个属性设置元素的定位方式为相对定位。这样，元素在进行平移时会基于其原始位置进行移动。

2. transition: transform 0.2s;

   • 这个属性用于设置元素的过渡效果。在这种情况下，我们使用过渡效果来平滑地改变元素的 transform 属性值。
   • transform 是一个可以修改元素形状、大小和位置的属性。在这里，我们使用它来实现平移效果。

3. .shake 类（自定义类名）

   • 这个类名用于触发抖动动画。我们通过JavaScript在适当的时机为元素添加这个类名，从而触发抖动效果。

4. animation: shake 0.4s;

   • 这个属性用于定义动画效果。
   • shake 是动画的名称，对应着 @keyframes 中定义的关键帧。
   • 0.4s 是动画的持续时间，指定了动画从开始到结束的时间。

5. @keyframes shake { ... }

   • 这个规则集定义了动画的关键帧，即动画效果的每个阶段。
   • shake 是关键帧的名称，与 animation 属性中的动画名称相对应。
   • 在关键帧中，我们定义了抖动效果的不同阶段，通过改变 transform 属性的值来实现平移效果。

6. transform: translate(0, 0);

   • 这个属性设置元素的变换方式。在这里，我们使用 translate() 函数来实现平移效果。
   • translate(0, 0) 表示不进行平移，即元素保持在原始位置。

7. 10%, 30%, 50%, 70%, 90% { transform: translate(-5px, 0); }

   • 这些百分比值对应关键帧中的不同阶段，定义了元素在水平方向上向左平移 5 像素的效果。

8. 20%, 40%, 60%, 80% { transform: translate(5px, 0); }

   • 这些百分比值对应关键帧中的不同阶段，定义了元素在水平方向上向右平移 5 像素的效果。

9. 100% { transform: translate(0, 0); }

   • 这个百分比值表示动画的最后一个阶段，将元素平移回原始位置，即不进行平移。

通过这些CSS属性和关键帧的定义，我们实现了一个简单的抖动效果，使元素在水平方向上来回平移，从而呈现出抖动的效果。