写一个输入框聚焦时，边框不停地渐变的动画效果

要创建一个输入框聚焦时边框不停渐变的动画效果，你可以使用HTML和CSS。以下是一个简单的示例，展示了如何实现这种效果：

  1. HTML:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>输入框渐变效果</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <input type="text" id="animated-input" placeholder="输入内容...">
</body>
</html>
  1. CSS (styles.css):
@keyframes border-gradient {
    0% {
        border-color: red;
    }
    25% {
        border-color: yellow;
    }
    50% {
        border-color: green;
    }
    75% {
        border-color: blue;
    }
    100% {
        border-color: red;
    }
}

#animated-input {
    padding: 10px;
    font-size: 16px;
    border: 2px solid transparent; /* 初始边框透明 */
    outline: none; /* 移除默认的聚焦轮廓 */
    transition: border-color 0.3s ease; /* 平滑过渡效果 */
}

#animated-input:focus {
    animation: border-gradient 2s linear infinite; /* 聚焦时应用动画 */
}

在这个示例中，我们定义了一个名为border-gradient的关键帧动画，它会在不同的时间点改变边框颜色。当输入框获得焦点时，我们通过CSS的:focus伪类选择器应用这个动画。动画的时长设置为2秒，循环无限次（infinite），并且颜色变化是线性的（linear）。你可以根据需要调整这些值。

posted @ 2024-12-20 06:16  王铁柱6  阅读(101)  评论(0)    收藏  举报