HTML5+CSS3小实例：有点小酷的input输入框动画

艾恩小灰灰

已于 2022-04-28 00:18:36 修改

阅读量676

点赞数

CC 4.0 BY-SA版权

分类专栏： HTML+CSS+JS小实例文章标签： html5 css css3 vscode

于 2022-04-27 18:50:18 首次发布

本文链接：https://blog.csdn.net/weixin_68127493/article/details/124457779

HTML+CSS+JS小实例专栏收录该内容

263 篇文章 ¥9.90 ¥99.00

订阅专栏

超级会员免费看

本文通过HTML5和CSS3技术，展示了一个带有动态效果的input输入框实例，详细介绍了实现这一视觉效果的源代码和步骤。

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

HTML5+CSS3实现有点小酷的input输入框动画，先看效果：

源代码：

<div class="wrapper">
        <div class="input-data">
            <input type="text" required>
            <div class="underline"></div>
            <label>您的姓名</label>
        </div>
    </div>

*{
    margin: 0;
    padding: 0;
    outline: none;
    /* 这个是告诉浏览器：你想要设置的边框和内边距的值是包含在总宽高内的 */
    box-sizing: border-box;
}
body{
    /* 弹性布局 水平垂直居中 */
    display: flex;
    align-items: center;
    justify-content: center;
    /* 设置body最小高度为100%窗口高度 */
    min-height: 100v