CSS 实现新拟态(Neumorphism) UI 风格

小咪咪 2022-09-12 02:58 127阅读 0赞

![682fcedea0de1c236c5032378e6675b7.png][]来源 | http://www.fly63.com/article/detial/10541?type=1

新拟态是一种图形样式，其原理是为界面的UI元素赋予真实感。

原生名词有几个叫法，Neumorphism / soft ui，翻译过来是新拟态或者是软ui。国内的翻译叫，新拟物风格。

Neumorphism，是New +Skeuomorphism的组合词。按照我个人的通俗理解，就是将界面的一部分凸起来，另一部分凹下去，形成的一种错落有致的拟物风格。

代表作是乌克兰设计师 Alexander Plyuto 在各平台发布的新作品「Skeuomorph Mobile Banking」

![349097a70725b20df34876472d4c95e3.png][]

新拟态 UI 风格与扁平、投影风格的对比

![7c599b54227194fea31d51f24c3ad2e7.png][]

从上面这张对比图可以看出，扁平风格就像是一张纸贴在墙面上，投影风格像是浮在半空中，而新拟态风格则像是墙面上直接凸起了一块。

要实现这种风格，精髓在于一个白色的阴影+一个常规阴影。一个示例如下图所示：

![ab1f56c9aded12a7721011e85dec0692.png][]

### **新拟态 UI 风格的前端实现** ###

闲来无事，参照着以上的实现方式临摹了一下练手(代码如下)。后来发现居然已经有了在线工具直接生成这种风格的 css 代码\[aru\_59\]，很强！

> Neumorphism css 在线生成器地址：https://neumorphism.io

我自己实现的效果：

![2764f24eb34df2467ce725b1ef279bde.png][]

代码：

<!DOCTYPE html>
    <html lang="en">
    
    
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
      <link rel="stylesheet" href="./font_ue8tdlm62pf/iconfont.css">
      <style>
        .container {
          width: 1018px;
          margin: 0 auto;
          height: 660px;
          background-color: #e6eef4;
        }
    
    
        .top {
          height: 200px;
          flex-direction: row;
        }
    
    
        .top-left {
          width: 400px;
          /* height: 400px; */
          float: left;
          /* background-color: rgb(92, 89, 89); */
          margin: 50px;
          border-radius: 39px;
          background: #e6eef4;
          box-shadow: 33px 33px 67px #cad1d7,
            -33px -33px 67px #ffffff;
        }
    
    
        .d1,
        .d2,
        .d3,
        .d4 {
          display: inline-block;
          width: 144px;
          height: 144px;
          border-radius: 50%;
          background-color: red;
          margin: 24px;
          border-radius: 50%;
          background: #e6eef4;
          box-shadow: inset 14px 14px 22px #cfd6dc,
            inset -14px -14px 22px #fdffff;
        }
    
    
        .aircraft {
          font-size: 80px;
          display: flex;
          justify-content: center;
          align-items: center;
          /* margin-top: 10%; */
          padding-top: 30px;
          color: #4d8af0;
        }
    
    
        .top-right {
          width: 400px;
          height: 400px;
          float: right;
          background-color: green;
          margin: 50px;
          border-radius: 39px;
          background: #e6eef4;
          box-shadow: 33px 33px 67px #cad1d7,
            -33px -33px 67px #ffffff;
        }
    
    
        .d21,
        .d31,
        .d41 {
          display: inline-block;
          width: 88px;
          height: 88px;
          border-radius: 50%;
          background-color: red;
          margin: 21px;
          border-radius: 50%;
          background: #e6eef4;
          box-shadow: 6px 6px 12px #cad1d7,
            -6px -6px 12px #ffffff;
        }
    
    
        .r-aircraft {
          font-size: 40px;
          display: flex;
          justify-content: center;
          align-items: center;
          /* margin-top: 10%; */
          padding-top: 24px;
          color: #4d8af0;
        }
    
    
        p {
          text-align: center;
          font-size: 24px;
          color: #576f87;
          font-weight: bold;
        }
    </style>
    </head>
    
    
    <body>
      <div class="container">
        <div class="top">
          <div class="top-left">
            <span class="d1">
              <i class="iconfont aircraft"></i>
            </span>
            <span class="d2">
              <i class="iconfont aircraft"></i>
            </span>
            <span class="d3">
              <i class="iconfont aircraft"></i>
            </span>
            <span class="d4">
              <i class="iconfont aircraft"></i>
            </span>
          </div>
          <div class="top-right">
            <i class="iconfont aircraft"></i>
            <p>音乐</p>
            <span class="d21">
              <i class="iconfont r-aircraft"></i>
            </span>
            <span class="d31">
              <i class="iconfont r-aircraft"></i>
            </span>
            <span class="d41">
              <i class="iconfont r-aircraft"></i>
            </span>
          </div>
        </div>
      </div>
    </body>
    
    
    </html>

### 新拟态UI风格Css在线生成 ###

地址：https://neumorphism.io/\#e0e0e0

效果如下：

![ff53d6962411d32473a91480caba1bd4.png][]

#  #

**学习更多技能**

**请点击下方公众号**

![69bfbd1f729c641029248633a698e7f4.gif][]

![757dd62a479eec7dc128e8a178b6dc1f.png][]

![ff7fae33f8512e3c59075b4489816d71.png][]

[682fcedea0de1c236c5032378e6675b7.png]: /images/20220828/a22af0d755cc41a0b34ce0971ea1b2ae.png
[349097a70725b20df34876472d4c95e3.png]: /images/20220828/64033d4f85cb468c8050da6748555ed9.png
[7c599b54227194fea31d51f24c3ad2e7.png]: /images/20220828/5d0eb82b53ce418b8866dad2039eb3ca.png
[ab1f56c9aded12a7721011e85dec0692.png]: /images/20220828/559057a6bafe4369b4bdcf38545a58ac.png
[2764f24eb34df2467ce725b1ef279bde.png]: /images/20220828/f9e7fbf5440e4619b8254cb04c471ff7.png
[ff53d6962411d32473a91480caba1bd4.png]: /images/20220828/5d9083a5cb6e4d4ab01dbc2987a20d8c.png
[69bfbd1f729c641029248633a698e7f4.gif]: /images/20220828/68c10458adc241f28d916ac0f53fa3f9.png
[757dd62a479eec7dc128e8a178b6dc1f.png]: /images/20220828/bfa560b9c0d9443d9bafa1cc720f6343.png
[ff7fae33f8512e3c59075b4489816d71.png]: /images/20220828/523f607cde4d451396f287db44037799.png