标签搜索
隐藏侧边栏

送你N个有趣的输入框,让你的网站熠熠生辉

搞前端的半夏
2022-05-10 / 0 评论 / 0 点赞 / 33 阅读 / 1,801 字 / 正在检测是否收录...
温馨提示:
本文最后更新于 2022-05-10,若内容或图片失效,请留言反馈。部分素材来自网络,若不小心影响到您的利益,请联系我们删除。

大家好,我是半夏👴,一个刚刚开始写文的沙雕程序员.如果喜欢我的文章,可以关注➕ 点赞 👍 加我微信:frontendpicker,一起学习交流前端,成为更优秀的工程师~关注公众号:搞前端的半夏,了解更多前端知识! 点我探索新世界!

前言

相同的输入框,第一眼的效果可能差不多,但是只要你点他,就会发生美妙的事情。在掘金网页端,不知道有没有人注意到导航栏的搜索框,当你不动他的时候,他是小小的一个。当你开始输入的时候,他变长了!虽然只是一个简单的效果,但是用户的体验就会好很多。本文介绍几类不同的输入框的效果。

image-20211106094705560

底部边框类

底部边框

看一下上面的效果:当输入框获取到焦点的时候会,底部bottom出现一条蓝色的线,从中间往两端扩张。

思路:

  1. 这条蓝色的框是border-bottom?不是,因为底部有一条黑色的边框,却并且蓝色的框是变化的。border-bottom无法实现。
  2. 使用::after和::before可以吗?input是无法设置的,那在input外层加一个父div,并设置::after。不过此时还会遇到一个问题。当你input:focus 是无法选中父节点的。
  3. 既然input无法添加,且父节点无法使用::after,那么就需要考虑新增一个元素了。
  .container {
      width: 300px;
      position: relative;
  }
  input {
      outline: none;
      width: 100%;
      border: 0;
      border-bottom: 1px solid #070707;
  }

.borderBottom {
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0;
    height: 2px;
    background-color: #3399ff;
    transition: 0.4s;
}
input:focus ~ .borderBottom {
    width: 100%;
    transition: 0.4s;
    left: 0;
}
<div class="container">
    <input type="text" placeholder="底部边框input"/>
    <span class="borderBottom"></span>
</div>

这里有两点要注意,

  • 为了防止input获取焦点出现其他边框 使用outline: none;来控制不显示。
  • span标签的初始位置是50%,宽度是从0 到100%

这是第一类,只有底部效果,你可以设置span的初始位置,实现从左往右变长,从中间往两侧变长,等等等

背景变化类

背景变化

看一下上面的效果:当输入框获取到焦点的时候会,背景颜色会往两个角变化。

如果直接来做这个效果,可能是比较复杂,但是有了上面的例子这个效果就很简单实现了。

  • 背景分两块,那只需要在span上加入::after和::before.
  • 背景在下面,设置z-index:-1;
.focusbg::before,
.focusbg::after {
    position: absolute;
    content: "";
    background-color: #83e8fa;
    width: 50%;
    height: 100%;
    z-index: -1;
}

.focusbg::before {
    left: 0;
    top: 0;
}

.focusbg::after {
    right: 0;
    bottom: 0;
}
input:focus ~ .focusbg:before,
input:focus ~ .focusbg:after {
    width: 0;
    height: 0;
}

动态宽度

就实现方法和难度来说,这中是最简单的,例如掘金的搜索框也就是将宽度变大。

input {
    transition: all 0.3s ease-in;
    width: 120px;
    display: block;
    text-align: center;
}
input:focus {
	width: 220px;
}

动态宽度

这里的效果是宽度往两边增加!!!

浮动placeholder

这个效果在之前的文章:>原文链接 ==>http://sylblog.xin/archives/74

总结

一个input输入框,只要你有想法,你就可以玩出花来!本文只是按类别列举出来,其实更多的效果,也就是这几种变化而来。

万变不离其中,一点通,处处通!

0

评论区