有趣的CSS - 新拟态输入框

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

目录

  • 页面效果
  • 核心代码
    • html代码
    • css代码
  • 完整代码
    • html页面
    • css样式

页面效果

有趣的CSS - 新拟态输入框_第1张图片

此效果使用 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);
}

以上就是全部代码以及简单的写法思路,希望你喜欢这个新拟态风格输入框的交换效果。


[1] 原文阅读

我是Just,这里是「设计师工作日常」,求点赞求关注!!!

你可能感兴趣的:(有趣的css,css,前端,新拟态,输入框,ui,ue,交互)