02 动态输入框

效果演示

实现了一个用于写文章摘要的效果。它创建了一个居中显示的容器，并在容器中包含一个输入框。当输入框获得焦点或输入框的值为合法时，会出现动态效果，包括标签上移、字号改变和底部下划线的动画。这个效果可以用于文章摘要中的输入框，使其更加交互和吸引人。用户可以在输入框中输入摘要内容，并根据需要进行样式调整。

code

    <div class="outer">
        <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;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background: linear-gradient(200deg,#7778FE,#7778FE,#7778FE,#F5CEFF,#F5CEFF,#F5CEFF);
}
.outer{
    width: 450px;
    background-color: #fff;
    padding: 40px;
    box-shadow: 0px 0px 10px rgba(0,0,0,0.1);
    border-radius: 8px;
}
.outer .input-data{
    position:relative;
    width: 100%;
    height: 40px;
}
.outer .input-data input{
    width: 100%;
    height: 100%;
    border:none;
    font-size: 17px;
    border-bottom: 2px solid #c0c0c0;
}
.outer .input-data input:focus ~ label,
.outer .input-data input:valid ~ label{
    transform: translateY(-25px);
    font-size: 15px;
    color: red;
}
.outer .input-data label{
    position: absolute;
    bottom: 10px;
    left: 0px;
    color: #808080;
    pointer-events: none;
    transition: all 0.3s ease;
}
.outer .input-data .underline{
    position: absolute;
    bottom: 0px;
    height: 2px;
    width: 100%;
    background-color: red;
    transform: scaleX(0);
    transition: all 0.8s ease;
}
.outer .input-data input:focus ~ .underline,
.outer .input-data input:valid ~ .underline{
    transform: scaleX(1);
}

实现思路拆分

*{
    margin: 0;
    padding: 0;
    outline: none;
    box-sizing: border-box;
}

• 清除所有元素的默认外边距、内边距和轮廓样式，使它们都为0
• box-sizing: border-box; 是一个重要的CSS属性，用于指定元素的盒模型，使设置的边框和内边距的值包含在总宽度和总高度内

body {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background: linear-gradient(200deg, #7778FE, #7778FE, #7778FE, #F5CEFF, #F5CEFF, #F5CEFF);
}

• 设置body元素的样式，使其内容在页面中水平和垂直居中
• min-height: 100vh; 设置body元素的最小高度为视口高度的100%
• background: linear-gradient(200deg, #7778FE, #7778FE, #7778FE, #F5CEFF, #F5CEFF, #F5CEFF); 创建一个渐变背景，从左上角到右下角，颜色从#7778FE到#F5CEFF

.outer {
    width: 450px;
    background-color: #fff;
    padding: 40px;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
}

• 设置类名为 .outer 的元素的样式：
• 设置宽度为450像素
• 设置背景颜色为白色
• 设置内边距为40像素（上下左右）
• 添加盒子阴影效果
• 设置圆角为8像素

.outer .input-data {
    position: relative;
    width: 100%;
    height: 40px;
}

• 设置类名为 .outer .input-data 的元素的样式：
• 设置相对定位
• 设置宽度为100%
• 设置高度为40像素

.outer .input-data input {
    width: 100%;
    height: 100%;
    border: none;
    font-size: 17px;
    border-bottom: 2px solid #c0c0c0;
}

• 设置类名为 .outer .input-data input 的元素的样式：
• 设置宽度为100%
• 设置高度为100%
• 移除边框
• 设置字体大小为17像素
• 添加底部边框，宽度为2像素，颜色为#c0c0c0

.outer .input-data input:focus~label,
.outer .input-data input:valid~label {
    transform: translateY(-25px);
    font-size: 15px;
    color: red;
}

• 当输入框获得焦点或输入框的值为合法时，对 .outer .input-data input 后面的 label 元素应用样式：
• 将 label 元素向上移动，垂直位移为-25像素
• 改变 label 元素的字体大小为15像素
• 改变 label 元素的字体颜色为红色

.outer .input-data label {
    /* 绝对定位 */
    position: absolute;
    bottom: 10px;
    left: 0px;
    color: #808080;
    pointer-events: none;
    transition: all 0.3s ease;
}

• 设置 .outer .input-data label 元素的样式：
• 设置绝对定位
• 将 label 元素定位在底部，与父元素的左侧对齐
• 设置 label 元素的颜色为#808080
• pointer-events: none; 这个属性可以使点击 label 元素时穿透到下方的输入框
• 添加过渡效果，使动画更加平滑

.outer .input-data .underline {
    position: absolute;
    bottom: 0px;
    height: 2px;
    width: 100%;
    background-color: red;
    transform: scaleX(0);
    transition: all 0.8s ease;
}

• 设置 .outer .input-data .underline 元素的样式：
• 设置绝对定位
• 将 .underline 元素定位在底部
• 设置高度为2像素，宽度为100%
• 设置背景颜色为红色
• transform: scaleX(0); 沿X轴缩小，将宽度缩小为0
• 添加过渡效果，使动画更加平滑

.outer .input-data input:focus~.underline,
.outer .input-data input:valid~.underline {
    transform: scaleX(1);
}

• 当输入框获得焦点或输入框的值为合法时，对 .outer .input-data input 后面的 .underline 元素应用样式：
• transform: scaleX(1); 沿X轴放大，将宽度放大为1，恢复原始宽度