我想做个这种输入框：
最初是个猴子，点击后猴子就预留出一个小格子让输入文本，同时弹出了输入键盘，随着输入的文本的增多，猴子就一直往前走，留出越来越多的空间给输入的文本，一直到一定长度，猴子会停下来，换个动作，但是文本可以继续输入。点击猴子或者键盘回车，就可以进入搜索页。
请问，这个应该怎么入手去做呀？
补充一点，是移动端的。
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
2
543
收藏
你的这个问题跨度蛮大的，首先你要有猴子，
如果你的动画要纯js来做的话猴子要拆分部件
或者你可以用gif，
那你可能就需要一个美工帮你画猴子，
多张猴子图片之后叫人做成gif动画。
然后回到网页上，你需要一个input输入框
开始输入框是隐藏的，用css控制输入框的属性 『display:none』
之后猴子的图片加上onlick监听点击，触发函数将输入框的 display改成block，再定一个min-width
再给输入框加一个event listener，监听key up和key down，让猴子图片的gif动起来
用timeout来判断用户停止输入，让猴子动画停止，或者照你说换一个gif让猴子做不一样的动作
然后给input输入框加一个event listener监听key enter，用户回车，跳转到结果页面
1、把需要的几个 GIF 动画做好。
2、监听输入文字长度。
3、根据长度执行相应的 GIF 动画，主要是动态改变 gif 的位置和加载不同的 gif 。
4、监听输入行为的停止，停止动画。
5、如果用户继续输入，跳到2。
挺简单的。