沉浸式输入体验

通过css的缩放功能以及动画效果，来实现一个输入框中的内容放大跟缩小，给用户一种沉浸式的感觉。效果图如下：

可以看到输入的内容，以一种飞入式的效果填充到输入框内，给人一种沉浸式的感觉（因为是图片演示，效果可能不佳）

完整代码：

  

  

       
请输入搜索内容
       
       

          {{keys}}
       
  

总结：

1. input标签需要先将其内外边框以及光标都隐藏起来

2. 在input标签上放一个div标签，用来显示输入的内容

3. 通过vue的v-for指令，将每次输入的内容循环显示出来

最后

觉得文章不错的，请点个赞哇！
转载需标明出处