最近看到一个比较不错的占位符效果,今天分享下主要思路。先来看看效果:

css3占位符特效 gif css3占位符特效

思路分析

效果中的placeholder可以进行移动,说明这个不是真的placeholder,而是一个伪装成placeholder的元素,我们先来看html结构:

然后我们需要让真正的placeholder不可见,同时设置好input-label(伪装placeholder)的位置:

其实真正placeholder缩小的效果很简单,主要是在:focus的时候利用transform对它进行移动。

除此之外,还有一个动画,就是在聚焦的时候,有一个线条变长的动画,这个则主要使用到:focus-within伪类实现。

:focus-within和:focus比较类似,不同的是:focus是自身发生聚焦,:focus-within是自身发生聚焦或者子元素发生,这里是input发生了聚焦,触发了外层的:focus-within。

这里还有一个知识点,就是.input-control-c的width: fit-content;这个属性在css3宽度之fill-available、max-content、min-content、fit-content有讲过,在这里的作用和display:inline-block是类似的,但是又有些许不同,具体可以看刚才的那个文章理解。

类似效果

看一个和这个类似的效果:

这个主体思想是和上面的类似的,主要注意这种结构,利用:focus对label缩小。

其他文章

0
我要评论

评论

返回
×

我要评论

回复:

昵称:(昵称不超过20个字)

图片:

提交
还可以输入500个字