CSS如何完成一个GoogleInputStyle
时间：2023-03-31 11:02:46
CSS
我的媒介首先要确定基本的html结构，如下：
演示效果：CodePen思路：当输入框获得焦点时，输入框底部的线条宽度会增加。不难看出这是css3中的过渡效果。所以，只要把改前的css和改后的css都写好，然后在css中一开始就设置transition:all.5sease-in-out;底线是_
,_更改前：position:absolute;左：50%；底部：0；背景：#40a9ff；宽度：0%；高度：2px；不难看出改后的css为：width:100%;left:0;OK，当InputFocus时，改成input:focus~.bar{width:100%;左：0；这里使用了~选择器。同理，先写CSSposition:absolute;顶部：50%；左：0；变换：翻译Y(-50%)；行高：20px；左填充：5px；颜色：#80868b；标签更改后的cssposition：绝对；顶部：0；左：10px；背景：#fff；变换：翻译Y(-50%)；行高：20px；左填充：5px；颜色：#1a73e8；对焦时串联起来：input:focus+label{position:absolute;顶部：0；左：10px；背景：#fff；变换：翻译Y(-50%)；行高：20px；padding-left:5px;颜色：#1a73e8；这里使用了+选择器。ok，完了，代码在头部的CodePen中。
