一个简单的悬浮输入框底部变色css高级动画分享

内容效果如下所示

hover效果

源码内容如下，可以自定义颜色，效果，位置，速度等

<template>
  <div class="hover_effect_container">
    <div class="hover_effect_input">
      <input type="text" placeholder="Hover over me" />
    </div>
  </div>
</template>

<script setup lang="ts">
// 这里不需要额外的脚本代码
</script>

<style lang="scss" scoped>
.hover_effect_container {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #f0f0f0;
}

.hover_effect_input {
  margin-top: 2px;
  height: 40px;
  width: 300px;
  position: relative;
  border: 1px solid rgba($color: #e7e4e4, $alpha: 0.2);
  border-radius: 10px;
  outline: none;
  transition: color 0.3s;
  &:hover {
    color: darkblue; /* 鼠标悬浮时改变文本颜色 */

    &::after {
      content: '';
      position: absolute;
      left: 0;
      bottom: 0;
      width: 100%;
      height: 2px;
      background-color: blue; /* 鼠标悬浮时的下划线颜色 */
      animation: underline 0.5s forwards; /* 下划线动画 */
    }
  }
  input{
    width: 100%;
    height: 100%;
  }
}

@keyframes underline {
  from {
    width: 0;
  }
  to {
    width: 100%;
  }
}
</style>