我是 Just，这里是「设计师工作日常」，今天给大家分享得是关于新拟态风格的一个输入框效果，希望你们喜欢。
《有趣的css》系列最新实例通过公众号「设计师工作日常」发布。
(目录)
页面效果
此效果使用 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);
}
以上就是全部代码以及简单的写法思路，希望你喜欢这个新拟态风格输入框的交换效果。
我是Just，这里是「设计师工作日常」，求点赞求关注！！！
