有趣的CSS - 输入框交互效果

最新推荐文章于 2024-05-29 10:53:24 发布

设计师工作日常

最新推荐文章于 2024-05-29 10:53:24 发布

阅读量560

点赞数 20

分类专栏：有趣的css 文章标签： css 前端 ui ux 输入框动效

本文链接：https://blog.csdn.net/justliu1989/article/details/136496553

版权

有趣的css 专栏收录该内容

69 篇文章 1 订阅

订阅专栏

大家好，我是 Just，这里是「设计师工作日常」，今天分享的是用 css 实现一个动态显示出输入框的动效。

《有趣的css》系列最新实例通过公众号「设计师工作日常」发布。

整体效果

利用 flex 布局，然后利用 css 选择器来实现鼠标悬浮、点击等状态的交互效果。

此效果可适用于小表单、或者登录注册表单等场景。

核心代码部分，简要说明了写法思路；完整代码在最后，可直接复制到本地运行。

核心代码

html 代码

<label class="label28">
  <span class="span28">用户名</span>
  <input class="inp28" type="text" required>
</label>

label 搭配 input ，然后 input 设置 required 来判断非空状态。

css 部分代码

.label28{
  width: 190px;
  height: 68px;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  cursor: text;
}
.span28{
  width: 100%;
  color: #000;
  font-size: 14px;
  margin-bottom: 6px;
  padding: 0 10px;
}
.inp28{
  width: 100%;
  padding: 0 10px;
  height: 2px;
  border: 0;
  font-size: 14px;
  box-sizing: border-box;
  background-color: rgba(0,0,0,0.1);
  transition: .3s;
}
.inp28:hover{
  background-color: rgba(50,133,255,0.7);
}
.inp28:focus,.inp28:valid{
  background-color: rgba(50,133,255,0.2);
  border: 2px solid rgba(50,133,255,0.7);
  border-radius: 4px;
  height: 42px;
  color: #000;
}

利用 flex 布局，设置 justify-content: flex-end。

让输入框变高时，自动撑起提示文本。通过 :hover 、:foucus 、:valid 来判断鼠标状态，然后变化成不同的样式来实现交互的效果。

完整代码如下

html 页面

<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="style.css">
    <title>输入框交互</title>
  </head>
  <body>
    <div class="app">
      <label class="label28">
        <span class="span28">用户名</span>
        <input class="inp28" type="text" required>
      </label>
    </div>
  </body>
</html>

css 样式

/** style.css **/
.app{
  width: 100%;
  height: 100vh;
  background-color: #ffffff;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}
.label28{
  width: 190px;
  height: 68px;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  cursor: text;
}
.span28{
  width: 100%;
  color: #000;
  font-size: 14px;
  margin-bottom: 6px;
  padding: 0 10px;
}
.inp28{
  width: 100%;
  padding: 0 10px;
  height: 2px;
  border: 0;
  font-size: 14px;
  box-sizing: border-box;
  background-color: rgba(0,0,0,0.1);
  transition: .3s;
}
.inp28:hover{
  background-color: rgba(50,133,255,0.7);
}
.inp28:focus,.inp28:valid{
  background-color: rgba(50,133,255,0.2);
  border: 2px solid rgba(50,133,255,0.7);
  border-radius: 4px;
  height: 42px;
  color: #000;
}