input框获取焦点点击横线动画效果实现

最新推荐文章于 2025-03-04 14:30:05 发布

原创最新推荐文章于 2025-03-04 14:30:05 发布 · 2.7k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#input点击动画

css动画专栏收录该内容

1 篇文章

订阅专栏

本文介绍了一种使用CSS实现的input元素焦点状态下的下拉横线动画效果。通过设置背景图像和过渡属性，当输入框获得焦点时，下拉横线会平滑地扩展到整个宽度，增强用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

具体效果实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>input下拉横线动画实现</title>
    <style>
        body{
            background-color: #0b151d
        }
        
        .form-line{
            border: 0 none;background-image: linear-gradient(#44dcfd,#44dcfd),linear-gradient(#1f3144,#1f3144);
            background-size: 0px 2px,100% 1px;
            background-repeat: no-repeat;background-position: center bottom,center calc(100% - 1px);
            background-color: rgba(0,0,0,0);
        }
        input[type="text"]:focus{
            background-size: 100% 2px,100% 1px;
            transition: all .5s;
            border: none;
            outline: none;
        }
    </style>
</head>
<body>
    <input type="text" class="form-line" placeholder="输入名字" />
   
</body>
</html>