这是一个关于input框的动画

咳,大家下午好,欢迎来到济南文汇建站官网。近期两天有雨,出门不要忘记带雨伞~

今天分享一个input框的小动画

济南文汇网站开发

首先先分析一下

当点击input的时候,文字向上移动。input框下面出现一个滑动的线条,线条可以用一个i标签来写。伪元素来写也可以,具体用哪个,看心情。

先把结构写好

image.png

然后编写css美化一下页面

济南文汇app开发

i标签宽度要设置0像素

然后编写一个jq

image.png

点击的时候字体变小,然后调整文字的位置。

刚才提到的i标签宽度设置为100%;时间设置的300毫秒,时间随便设置,看心情。

当失去焦点时,返回原样。

编写完毕。

下周见,timg (1).gifBye bye


关键词:
返回列表

相关文章

相关案例