placeholder-shown妙用

<body>
  <div class="wrapper">
    <input type="text" class="input" placeholder="邮箱">
    <label class="label">邮箱</label>
  </div>
</body>
  .wrapper {
    width: 300px;
    margin: 100px auto;
    position: relative;
  }
  .input {
    display: inline-block;
    width: 100%;
    height: 52px;
    line-height: 1.5;
    font-size: 16px;
    color: #3a3a3a;
    padding: 8px;
    border-radius: 4px;
    outline: 0;
    border: solid 1px #ccc;
    box-sizing: border-box;
    transition: all ease 0.25s;
  }
  .input:placeholder-shown::placeholder{
    color: transparent;
  }
  .input:hover {
    border-color: #00b7ff;
  }
  .input:focus {
    box-shadow: #00b7ff 0 0 3px;
    border-color: #00b7ff;
  }
  .label {
    position: absolute;
    left: 8px;
    top: 15px;
    color: #8f8f8f;
    padding: 0 2px;
    pointer-events: none;
    background: #fff;
    transition: all ease 0.25s;
  }
  /* 输入时 placeholder 隐藏 */
  .input:not(:placeholder-shown) ~ .label,
  .input:focus ~ .label {
    color: #00b7ff;
    transform: scale(0.8) translate(0, -33px);
  }

静态图奉上,动态效果可贴代码看:


表单输入动效

推荐阅读更多精彩内容

  • Swift1> Swift和OC的区别1.1> Swift没有地址/指针的概念1.2> 泛型1.3> 类型严谨 对...
    cosWriter阅读 8,558评论 1 27
  • 在开发app的时候,我们需要上架app,同时也需要测试app。测试app,通常我们是直接在自己的工程中用模拟器,...
    秋天的橘子阅读 1,213评论 0 1
  • 源码地址 谷歌官方有一个关于二维码的zxing项目,地址为zxing,但是这个库对于安卓应用来说太大了。有一个开发...
    gustiness阅读 1,155评论 0 6
  • 我是七秒的鱼 遨游在你的书桌 时而对我关怀备至 给我养分和食物 时而对我不理不睬 一成几天让我呼吸停滞 终于淹死在...
    相由心生MM阅读 3,174评论 60 153
  • 在深蓝色天空中,星星像顽皮的孩子在眨着眼睛,弯弯的月亮散发着清淡的光芒。地上有一只小蜗牛在树林里慢慢地爬着,他要回...
    張楓阅读 204评论 0 0