A藤井树 2024-05-28 23:46 采纳率: 0%
浏览 5

刚入门 用的纯css 求解答

点击input线条向右移动，并且循环。

img


用的k动画，但是我点击其他地方，线条直接原地暂停不动，想问下怎么才能点击其他地方时，线条怎样顺滑回归原来的位置（也就是红框之外）

img

img

  • 写回答

2条回答 默认 最新

  • 专家-赤兔[在线] 全栈领域优质创作者 2024-05-28 23:46
    关注

    引自免费微信小程序：皆我百晓生

    为了实现这个效果，你需要对.xian1的动画进行一些修改。当输入框失去焦点时，我们想要让线条回到起始位置而不是保持在当前位置。为此，我们需要添加一个新的关键帧，并调整动画的配置。

    首先，在CSS中定义一个新关键帧，表示线条回到起始位置：

    @keyframes animate1 {
  0%, 100% { /* 修改为两个关键帧 */
    left: -200%;
  }
  50% {
    left: 100%;
  }
}

    接下来，更新.xian1的动画属性，使其在完成一个周期后返回起始位置：

    .xian1 {
  ...
  animation: animate1 2s linear infinite forwards; /* 修改为forwards */
  ...
}

    这样，当鼠标离开输入框时，线条会自动回到起始位置（-200%）。但要注意的是，如果你有多个输入框并希望所有线条都能正确响应，可能需要为每个输入框关联单独的线条元素，并使用更精确的选择器来控制它们的行为。这里是一个简化版的例子，只针对单个输入框：

    <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Animated Line</title>
<style>
  .container {
    position: relative;
  }

  input[type="text"], input[type="password"] {
    width: 200px;
    height: 30px;
    margin-bottom: 20px;
  }

  .xian1 {
    position: absolute;
    width: 100%;
    height: 3px;
    top: 93%;
    left: -200%;
    background: linear-gradient(45deg, red, orange, yellow);
    animation: animate1 2s linear infinite forwards;
  }

  @keyframes animate1 {
    0%, 100% {
      left: -200%;
    }
    50% {
      left: 100%;
    }
  }

  input:focus + .xian1,
  input:valid ~ .xian1 {
    animation-play-state: running;
  }
</style>
</head>
<body>
<div class="container">
  <label for="username">用户名</label>
  <input type="text" id="username" required>
  
  <label for="password">密码</label>
  <input type="password" id="password" required>

  <div class="xian1"></div>
</div>
</body>
</html>

    在这个例子中，我将线条元素放在了输入框下方，并通过:focus和:valid伪类来控制线条的动画状态。当输入框获取焦点或验证成功时，线条开始播放动画；当失去焦点时，线条会自然回到起始位置。确保为每一个需要此功能的输入框创建独立的线条元素。

    评论 编辑记录

报告相同问题？

问题事件

  • 创建了问题 5月28日

悬赏问题

  • ¥15 一道ban了很多东西的pyjail题
  • ¥15 关于#r语言#的问题：如何将生成的四幅图排在一起，且对变量的赋值进行更改，让组合的图漂亮、美观@（相关搜索：森林图）
  • ¥15 C++识别堆叠物体异常
  • ¥15 微软硬件驱动认证账号申请
  • ¥15 有人知道怎么在R语言里下载Git上的miceco这个包吗
  • ¥15 GPT写作提示指令词
  • ¥20 根据动态演化博弈支付矩阵完成复制动态方程求解和演化相图分析等
  • ¥20 关于DAC输出1.000V对分辨率和精度的要求
  • ¥15 华为超融合部署环境下RedHat虚拟机分区扩容问题
  • ¥15 哪位能做百度地图导航触点播报？