【neumorphism】CSS实现新拟态设计风格 计算器---咪啪咪啪

最近在社区看到一种设计风格——新拟态，国外用neumorphism这个词表示，关于这种风格的介绍，可以看下面的链接

火遍外网的「新拟态」设计风格，2分钟就能用PPT做出来！

使用CSS模拟： GITHUB上的一个DEMO

为了方便演示我将颜色以及大小调节了一下：

image.png

今天群里老哥推荐了一个直接生产CSS的网站，非常方便 neumorphism

核心代码：

box-shadow: 9px 9px 16px rgb(163, 177, 198, 0.6), -9px -9px 16px rgba(255, 255, 255, 0.5);

修改后的style.css文件

* { margin: 0; padding: 0; } .button { width: 100px; height: 100px; font-size: 50px; margin: 10px; cursor: pointer; background: #e0e5ec; outline: none; box-shadow: 9px 9px 16px rgb(163, 177, 198, 0.6), -9px -9px 16px rgba(255, 255, 255, 0.5); border: none; border-radius: 50px; color: lightcoral; } .button:active { box-shadow: inset -2px -2px 6px rgb(163, 177, 198, 0.6), inset 2px 2px 6px rgba(0, 0, 0, 0.8); } .dl { width: 220px; } .ll { height: 220px; } .textview { width: 448px; margin: 10px; padding: 8px; font-size: 50px; padding: 10; border: none; border-radius: 25px; color: lightcoral; outline: none; background: #e0e5ec; box-shadow: inset 2px 2px 6px rgb(163, 177, 198, 0.6), inset -4px -5px 8px rgba(255, 255, 255, 0.5); } .main { width: 551.25px; height: 787.5px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: #e0e5ec; border-radius: 15px; box-shadow: 9px 9px 16px rgb(163, 177, 198, 0.6), -9px -9px 16px rgba(255, 255, 255, 0.5); } .bandt { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .bg { background: #e0e5ec; height: 100vh; }

配色参考：GITHUB地址

---来自腾讯云社区的---咪啪咪啪