📌  相关文章
📜  对齐底部颤动 (1)

📅  最后修改于: 2023-12-03 15:25:11.952000             🧑  作者: Mango

对齐底部颤动

在前端开发中，经常会遇到需要对齐底部元素的需求，而“对齐底部颤动”则是一种实现方式，即通过设置元素的“transform”属性实现底部对齐，并配合“animation”属性实现颤动效果，下面是示例代码：

.selector {
  position: relative;
  animation: shake 0.82s cubic-bezier(.36,.07,.19,.97) infinite;
}

.selector::before {
  content: "";
  display: block;
  position: absolute;
  bottom: 0;
  right: 0;
  left: 0;
  height: 0.5rem;
  background-color: #f00; /* 颤动效果颜色 */
  transform-origin: center bottom;
  transform: scaleY(0);
  animation: pulse 0.82s cubic-bezier(.36,.07,.19,.97) infinite;
}

@keyframes shake {
  10%, 90% {
    transform: translate3d(-1px, 0, 0);
  }

  20%, 80% {
    transform: translate3d(2px, 0, 0);
  }

  30%, 50%, 70% {
    transform: translate3d(-4px, 0, 0);
  }

  40%, 60% {
    transform: translate3d(4px, 0, 0);
  }
}

@keyframes pulse {
  0%, 100% {
    transform: scaleY(0);
  }

  50% {
    transform: scaleY(1);
  }
}

在上述代码中，通过设置元素的“position”属性为“relative”，为其“::before”伪元素设置“position”属性为“absolute”，并将其“bottom”属性设置为“0”，从而实现底部对齐。接着，通过设置元素的“transform”属性为“translate3d”实现颤动效果，并设置其“animation”属性为“shake 0.82s cubic-bezier(.36,.07,.19,.97) infinite;”，使颤动效果循环不停。最后，为“::before”伪元素设置“animation”属性为“pulse 0.82s cubic-bezier(.36,.07,.19,.97) infinite;”，并设置其“transform-origin”属性为“center bottom”，使其在底部对齐的同时，实现颤动效果。

我们可以通过以下代码来查看'对齐底部颤动'的效果：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>对齐底部颤动</title>
  <style>
    /* 示例代码CSS */
    .box {
      width: 200px;
      height: 200px;
      background-color: #ccc;
      display: flex;
      align-items: flex-end;
      justify-content: center;
      position: relative;
    }

    .selector, .box::before {
      position: absolute;
      bottom: 0;
      left: 0;
    }

    .selector {
      width: 50px;
      height: 50px;
      background-color: #fff;
      border: 5px solid #f00;
      border-radius: 50%;
      animation: shake 0.82s cubic-bezier(.36,.07,.19,.97) infinite;
    }

    .selector::before {
      content: "";
      display: block;
      position: absolute;
      bottom: 0;
      right: 0;
      left: 0;
      height: 0.5rem;
      background-color: #f00; /* 颤动效果颜色 */
      transform-origin: center bottom;
      transform: scaleY(0);
      animation: pulse 0.82s cubic-bezier(.36,.07,.19,.97) infinite;
    }

    @keyframes shake {
      10%, 90% {
        transform: translate3d(-1px, 0, 0);
      }

      20%, 80% {
        transform: translate3d(2px, 0, 0);
      }

      30%, 50%, 70% {
        transform: translate3d(-4px, 0, 0);
      }

      40%, 60% {
        transform: translate3d(4px, 0, 0);
      }
    }

    @keyframes pulse {
      0%, 100% {
        transform: scaleY(0);
      }

      50% {
        transform: scaleY(1);
      }
    }
  </style>
</head>
<body>
  <div class="box">
    <div class="selector"></div>
  </div>
</body>
</html>

效果如下所示：

对齐底部颤动示例效果图

以上就是“对齐底部颤动”的实现方式。