React

使用纯 CSS 实现仿 Material Design 的 input 过渡效果

以前一段时间,基于对 nextgraphql 的调研,再加上本人的兴趣,我做了一个站点,也作为我以后各种技术折腾,实践以及兴趣交汇的试验田。

最近我需要在我的实验田使用 jwt 实践校验码的功能。校验码,就是指注册时邮箱或者短信的校验码。需要校验码则需要有登录注册,而在登录注册时,为了多写一些 CSS,我决定实现一个 Material Design 的表单过渡效果。

实现效果见 诗词弦歌 - 登录

开始之前,你先看看是否认识以下几个选择器。如果不,那么通过本文你可以学习到以下几个选择器,以及他们的试用场景

  • :not(:empty)
  • input:not([value=""])
  • input:valid
  • input:not(:placeholder-shown)