html和css如何写

效果：原来的输入框下边界是灰色的，当获得焦点后，下边界线从中间往两边扩散变成黑色。

思路：这个动画的关键效果是：当输入框被focus之后，下边界线从中间往两边扩散。我们可以想到这个灰色的边界线和带动画效果的黑色边界线是两个元素，所以我们可以先创建一个input，使其只有下方灰色边框。

我们先把不带动画效果的html和css写好。

html：

    <form class="form-wrapper" action="">
        <div class="input-container">   
            <input type="text" class="form-input">
            <!-- 带动画效果的下边界 -->
            <span class="ani-border-bottom"></span> 
        </div>
    </form>

css：

         /* 基本的页面布局 */
        .form-wrapper {
            margin: 30px 50px;
            width: 300px;
            padding: 30px;
            text-align: center;
            background-color: rgb(202, 226, 235);
        }
        
        .form-input {
            padding: 10px;
            background-color: transparent;
            border: none;
            border-bottom: 1px solid rgb(169, 167, 167);
            font-size: 20px;
            /* 去除谷歌等浏览器input获得焦点后的边框*/
            outline: none;
        }

此时我们考虑上面提高的关键内容，最中心的思路是：可以把下边界动画元素宽度设置为0，之后在input获得焦点值后再把它的宽度设置为100%。

加上动画效果后的css：

       .form-wrapper {
            margin: 30px 50px;
            width: 300px;
            padding: 30px;
            text-align: center;
            background-color: rgb(202, 226, 235);
        }
        
          /* 下边界线定位以input-container为参照 */
        .input-container {
            position: relative;
        }
        
        .form-input {
             /* 如果不设置为border-box的话，padding会加在container范围之外 */
            box-sizing: border-box;
            width: 100%;
            padding: 10px;
            background-color: transparent;
            border: none;
            border-bottom: 1px solid rgb(169, 167, 167);
            font-size: 20px;
            /* 去除谷歌等浏览器input获得焦点后的边框*/
            outline: none;
        }
        
        /* 输入框获得焦点后改变border-bottom的样式 */
        /* 同级紧挨的元素用+ */
        .form-input:focus+.ani-border-bottom {
            display: block;
            width: 100%;
            background: black;
            /* 输入框获得焦点后width由0变为100% */
            transition: width .4s ease-in;
            /* 不加这句的话,动画是从左到右，加上这句后从中间向两边，
            /* 我的理解：是加上这句话，它会在每个变化的时刻令其保持左右居中 */
            margin: 0 auto;
        }
        
        .ani-border-bottom {
            display: block;
            position: absolute;
            width: 0;
            /* 如果没有下面两句的话，会从左往右，相当于是默认状态下的一个变化情况 */
            /* 如果只有left：0，依旧是从左往右 */
            /* 如果只有right：0， 则会是从右往左 */
            left: 0;
            right: 0;
            bottom: 0;
            height: 1px;
        }

除了加span外，还可以使用伪元素来写：

        .input-container:focus-within::after {
            width: 100%;
            background: black;
            transition: width .4s ease-in;
            margin: 0 auto;
        }
        
        /* 根据规范：伪元素需要渲染在一个容器内，而input不是容器 */
        /* 所以我们不应该给input加伪元素,而是给外面的容器加伪元素 */
        .input-container::after {
            position: absolute;
            content: '';
            /* 伪元素默认是inline-block  */
            display: block;
            width: 0;
            left: 0;
            right: 0;
            bottom: 0;
            height: 1px;
        }