📌  相关文章
📜  颤振日期时间选择器 - CSS (1)

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

颤振日期时间选择器 - CSS

如果你正在寻找一款酷炫的日期时间选择器，那么“颤振日期时间选择器”正是你需要的！这个选择器利用 CSS 动画和过渡效果，在选择日期时会出现颤抖和抖动效果，让用户感觉到选择日期时的乐趣和动感。

使用方法

要使用颤振日期时间选择器，只需将以下代码添加到你的 HTML 文件中即可：

<div class="tremble">
  <input type="datetime-local">
</div>

这样就可以创建一个具有颤抖效果的日期时间选择器了。

CSS 代码

为了实现颤抖效果，我们需要添加一些 CSS 动画和过渡效果。下面是完整的 CSS 代码，你可以将其添加到你的 CSS 文件中：

.tremble input[type="datetime-local"] {
  background-color: rgba(255, 255, 255, 0.1);
  border: none;
  border-bottom: 2px solid #fff;
  color: #fff;
  font-size: 18px;
  padding: 10px;
  position: relative;
  width: 200px;
}

.tremble input[type="datetime-local"]:focus {
  outline: none;
}

.tremble input[type="datetime-local"]:focus + span:before {
  display: block;
  animation: shake 0.82s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
}

.tremble input[type="datetime-local"]:focus + span:after {
  display: block;
  animation: shake 1s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
}

.tremble span:before,
.tremble span:after {
  content: "";
  width: 14px;
  height: 14px;
  background: #fff;
  border: 2px solid #fff;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: -1;
  display: none;
}

.tremble span:before {
  left: 0;
}

.tremble span:after {
  right: 0;
}

@keyframes shake {
  0%,
  100% {
    transform: translateX(0);
  }
  10%,
  30%,
  50%,
  70%,
  90% {
    transform: translateX(-7px);
  }
  20%,
  40%,
  60%,
  80% {
    transform: translateX(7px);
  }
}
效果预览

为了让你更好地了解这个选择器的效果，我们提供了一个实例代码，你可以将其复制到 HTML 中，看一下效果：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>颤振日期时间选择器</title>
    <style>
      .tremble input[type="datetime-local"] {
        background-color: rgba(255, 255, 255, 0.1);
        border: none;
        border-bottom: 2px solid #fff;
        color: #fff;
        font-size: 18px;
        padding: 10px;
        position: relative;
        width: 200px;
      }

      .tremble input[type="datetime-local"]:focus {
        outline: none;
      }

      .tremble input[type="datetime-local"]:focus + span:before {
        display: block;
        animation: shake 0.82s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
      }

      .tremble input[type="datetime-local"]:focus + span:after {
        display: block;
        animation: shake 1s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
      }

      .tremble span:before,
      .tremble span:after {
        content: "";
        width: 14px;
        height: 14px;
        background: #fff;
        border: 2px solid #fff;
        border-radius: 50%;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        z-index: -1;
        display: none;
      }

      .tremble span:before {
        left: 0;
      }

      .tremble span:after {
        right: 0;
      }

      @keyframes shake {
        0%,
        100% {
          transform: translateX(0);
        }
        10%,
        30%,
        50%,
        70%,
        90% {
          transform: translateX(-7px);
        }
        20%,
        40%,
        60%,
        80% {
          transform: translateX(7px);
        }
      }
    </style>
  </head>
  <body>
    <div class="tremble">
      <input type="datetime-local">
      <span></span>
    </div>
  </body>
</html>

效果预览如下：

颤振日期时间选择器效果预览

总结

通过以上的介绍，相信大家已经掌握了如何创建一个颤振日期时间选择器了。如果你想要美化你的日期时间选择器，可以参考以上的 CSS 代码，将其添加到你的项目中。