【CSS动画04--input输入动画】

最新推荐文章于 2024-01-09 20:59:42 发布

Clover‘s Blog

最新推荐文章于 2024-01-09 20:59:42 发布

阅读量286

点赞数

分类专栏： CSS 文章标签： css 前端

本文链接：https://blog.csdn.net/Clover_zlx/article/details/132355791

版权

CSS 专栏收录该内容

36 篇文章 0 订阅

订阅专栏

input输入动画

介绍
代码
- HTML
- CSS

CSS动画04--input输入框

介绍

此动画是当点击input框内部外部不同的动画，以上是鄙人录制得一个小视频，供大家参考，🤭

代码

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); */
    background: linear-gradient(200deg,#ddd6f3,#faaca8);
    /* 200deg,#ddd6f3,#faaca8 */
}
.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; */
    color: #faaca8;
}
.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; */
    background-color: #faaca8;
    /* 沿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);
}