有趣的CSS - 新拟态输入框

news2024/11/27 8:47:20

我是 Just，这里是「设计师工作日常」，《有趣的css》系列已更新 11 篇了，今天这篇是关于新拟态风格的一个输入框效果，希望你们喜欢。

页面效果

此效果使用 css 中 box-shadow 来模拟新拟态风格输入框被点击时的一个交互效果。

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

核心代码

html代码

<input type="text" placeholder="用户名/邮箱">

页面 input 标签，并设置 placeholder 值。

css代码

input {
  width: 180px;
  height: 56px;
  border: none;
  outline-style: none;
  font-size: 16px;
  color: #333333;
  padding: 0 28px;
  border-radius: 28px;
  background: #e0e0e0;
  box-shadow: 6px 6px 12px #b8b8b8, -6px -6px 12px #ffffff, inset 0 0 0 #b8b8b8, inset 0 0 0 #ffffff;
  transition: all .24s ease-in-out;
}
input:focus{
  box-shadow: 0 0 0 #b8b8b8, 0 0 0 #ffffff, inset 6px 6px 12px #b8b8b8, inset -6px -6px 12px #ffffff;
}
input::placeholder {
  color: rgba(0, 0, 0, 0.4);
  font-size: 16px;
  font-weight: 700;
  transition: all .24s ease-in-out;
}
input:focus::placeholder {
  color: rgba(0, 0, 0, 0.8);
}

使用 :foucus 来获取鼠标状态，设置 box-shadow 属性模拟新拟态风格，并设置过渡效果。

完整代码

html页面

<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="style.css">
    <title>12 新拟态输入框</title>
  </head>
  <body>
    <div class="app">
      <input type="text" placeholder="用户名/邮箱">
    </div>
  </body>
</html>

css样式

/*style*/
.app{
  width: 100%;
  height: 100vh;
  background-color: #e0e0e0;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}
input {
  width: 180px;
  height: 56px;
  border: none;
  outline-style: none;
  font-size: 16px;
  color: #333333;
  padding: 0 28px;
  border-radius: 28px;
  background: #e0e0e0;
  box-shadow: 6px 6px 12px #b8b8b8, -6px -6px 12px #ffffff, inset 0 0 0 #b8b8b8, inset 0 0 0 #ffffff;
  transition: all .24s ease-in-out;
}
input:focus{
  box-shadow: 0 0 0 #b8b8b8, 0 0 0 #ffffff, inset 6px 6px 12px #b8b8b8, inset -6px -6px 12px #ffffff;
}
input::placeholder {
  color: rgba(0, 0, 0, 0.4);
  font-size: 16px;
  font-weight: 700;
  transition: all .24s ease-in-out;
}
input:focus::placeholder {
  color: rgba(0, 0, 0, 0.8);
}