有趣的CSS - 新拟态输入框

我是 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);
}