【css 实现input输入动画】

青青子衿~~

已于 2022-07-25 16:54:39 修改

阅读量529

点赞数

分类专栏： css3 动画前端文章标签： css css3 html

于 2022-07-25 14:02:59 首次发布

本文链接：https://blog.csdn.net/weixin_45727272/article/details/125973696

版权

前端同时被 3 个专栏收录

54 篇文章 2 订阅

订阅专栏

css3

11 篇文章 0 订阅

订阅专栏

动画

11 篇文章 0 订阅

订阅专栏

文章目录

前言
一、html代码
二、css
总结

前言

常见的input 框输入动画,点击后出现标题,隐藏placeholder

提示：以下是本篇文章的代码内容,供大家参考,相互学习

一、html代码

代码如下：

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">

    <title>有点小酷的input输入动画</title>
    <link rel="stylesheet" href="../css/4.css">
</head>

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

</html>

二、css

代码如下：

*{
    margin: 0;
    padding: 0;
    outline: none;
    /* 这个属性是告诉浏览器：你想要设置的边框和内边距的值是包含在总宽高内的 */
    box-sizing: border-box;
}
body{
    /* 弹性布局 水平垂直居中 */
    display: flex;
    justify-content: center;
    align-items: center;
    /* 设置body最小高度为100%窗口高度 */
    min-height: 100vh;
    /* 渐变背景 */
    background: linear-gradient(200deg,#0c3483,#a2b6df);
}
.wrapper{
    width: 450px;
    background-color: #fff;
    /* 内边距（上下左右） */
    padding: 40px;
    /* 盒子阴影 */
    box-shadow: 0px 0px 10px rgba(0,0,0,0.1);
    /* 圆角 */
    border-radius: 8px;
}
.wrapper .input-data{
    /* 相对定位 */
    position:relative;
    width: 100%;
    height: 40px;
}
.wrapper .input-data input{
    width: 100%;
    height: 100%;
    border:none;
    font-size: 17px;
    border-bottom: 2px solid #c0c0c0;
}
/* 输入框获得焦点时 */
.wrapper .input-data input:focus ~ label,
/* 输入框的值为合法时 */
.wrapper .input-data input:valid ~ label{
    /* label上移，同时改变字号、字体颜色 */
    transform: translateY(-25px);
    font-size: 15px;
    color: #2c6fdb;
}
.wrapper .input-data label{
    /* 绝对定位 */
    position: absolute;
    bottom: 10px;
    left: 0px;
    color: #808080;
    /* 这个属性可以使点击label穿透到输入框 */
    pointer-events: none;
    /* 现在动画有点生硬，在这里需要给动画加个过渡 */
    transition: all 0.3s ease;
}
.wrapper .input-data .underline{
    position: absolute;
    bottom: 0px;
    height: 2px;
    width: 100%;
    background-color: #2c6fdb;
    /* 沿X轴缩小 */
    transform: scaleX(0);
    /* 这里同样给动画加个过渡 */
    transition: all 0.3s ease;
}
.wrapper .input-data input:focus ~ .underline,
.wrapper .input-data input:valid ~ .underline{
    /* 沿X轴放大 */
    transform: scaleX(1);
}

总结

pointer-events: none; 设置元素不响应元素,看得见摸不着,
pointer-events 属性定义元素是否对指针事件做出反应。可选:
- auto:默认值。元素对指针事件做出反应，比如 :hover 和 click。
- none:元素不对指针事件做出反应。
- initial:将此属性设置为其默认值。
- inherit:从其父元素继承此属性。
input:focus 选择器:选择已被选中的input