今天给大家带来的是伸缩的输入框的动画。大家可以看到，点击之后包括用户名往上推，输入框进行升高。其实这个在很多地方也可以用到，在实际项目中。长话短说，看代码区域。
我用开发工具是hpdx开发uni app的，大家应该很熟悉了。vivo式组容器，可以看到里面包含了第二层vivo式组容器、important输入框组件、文本组件，还有一条线。我用i来定义，就是这条线。这里面的有基础同学可以知道，如果是真的时候是一个样式，如果是假的时候另一个样式互相切换的。
怎么在哪控制？通过input的定义了一下，在这使用type-c进行真假的切换。包括这两个线条为什么会延伸高度？因为这地方定义了四十四px和二px，遇到真的时候是一种高度，遇到假时候是一种高度，这是动态的样式，大家要记住。
css部分其实是很少的，就是静态的、固定的。可以看到第一层优势图容器进行全局的定义，第二层就能相对定位和宽度的设置。输入框的样式进行相对定位，那边去透明，文字颜色、字体大小等等。这地方也可以输入文字，对文本也进行了央视的开发。大家可以看我这注释，就是很详细的。
进行线条的定义，就这三部分，大家可以看到，大概思路就这么个思路，大家可以动手去写一下。
喜欢的同学可以点赞收藏，想要源代码的可以找我唠嗑进行获取或者点击下方都行，还是建议大家去动手去写一下。今天推荐的伸缩版的输入框的样式就今天就讲到这里，谢谢大家。