什么是新拟态
英文名 Neumorphism，简称 “Soft UI”。是一种图形样式，通过 css 来模拟真实的物体
soft.webp
原理
基础的凸起效果，【凸起效果】使用了外部阴影；【凹陷效果】使用内部投影，卡片背景色统一相同的颜色
- 效果展示
tu.png
- 结合颜色
ao.png
CSS 实现
基本实现
- 先定义两个div
Document
- CSS部分
html {
/* 定义变量 */
--bgColor: #ff5353;
/* rgba的四个值分别为：红(R)、绿(G)、蓝(B)、透明度(A) */
--whiteShadow: -15px -15px 25px rgba(255, 117, 117, .5);
--blackShadow: 15px 15px 25px rgba(110, 40, 40, .2);
}
/* 设置一些页面的布局样式 */
body {
display: flex;
margin: 0;
padding: 0;
width: 100vw;
height: 100vh;
justify-content: center;
align-items: center;
background-color: var(--bgColor);
}
.card {
width: 30vh;
height: 30vh;
margin: 45px;
background-color: var(--bgColor);
border-radius: 30px;
}
/* 主要部分 */
.left {
/* 设置外阴影 */
box-shadow: var(--blackShadow),
var(--whiteShadow);
}
.right {
/* 设置内阴影 */
box-shadow: inset var(--blackShadow),
inset var(--whiteShadow);
}
- 效果
image.png
中级实现
- 定义两个 div
Document
- css 写法
html {
/* 定义变量 */
--bgColor: #ff5353;
/* rgba的四个值分别为：红(R)、绿(G)、蓝(B)、透明度(A) */
--whiteShadow: -15px -15px 25px rgba(255, 117, 117, .5);
--blackShadow: 15px 15px 25px rgba(110, 40, 40, .2);
--whiteShadow2: 15px 15px 25px rgba(255, 117, 117, .5);
--blackShadow2: -15px -15px 25px rgba(110, 40, 40, .2);
}
/* 设置一些页面的布局样式 */
body {
display: flex;
margin: 0;
padding: 0;
width: 100vw;
height: 100vh;
justify-content: center;
align-items: center;
background-color: var(--bgColor);
}
.card {
width: 30vh;
height: 30vh;
margin: 45px;
background-color: var(--bgColor);
border-radius: 30px;
}
/* 主要部分 */
.left {
box-shadow: inset var(--blackShadow2),
inset var(--whiteShadow2);
}
.right {
box-shadow: var(--blackShadow2),
var(--whiteShadow2);
}
- 效果
image.png
高级实现
- 定义4个div，这次是两个 right 里面分别嵌套了两个 left
Document
- css 部分
html {
/* 定义变量 */
--bgColor: #ff5353;
/* rgba的四个值分别为：红(R)、绿(G)、蓝(B)、透明度(A) */
--whiteShadow: -15px -15px 25px rgba(255, 117, 117, .5);
--blackShadow: 15px 15px 25px rgba(110, 40, 40, .2);
--whiteShadow2: 15px 15px 25px rgba(255, 117, 117, .5);
--blackShadow2: -15px -15px 25px rgba(110, 40, 40, .2);
}
/* 设置一些页面的布局样式 */
body {
display: flex;
margin: 0;
padding: 0;
width: 100vw;
height: 100vh;
justify-content: center;
align-items: center;
background-color: var(--bgColor);
}
.card {
width: 30vh;
height: 30vh;
/* margin: 45px; */
background-color: var(--bgColor);
border-radius: 30px;
}
/* 主要部分 */
.left {
box-shadow: inset var(--blackShadow),
inset var(--whiteShadow);
}
.right {
box-shadow: var(--blackShadow),
var(--whiteShadow);
padding: 5px;
}
.left2 {
box-shadow: inset var(--blackShadow2),
inset var(--whiteShadow2);
}
.right2 {
box-shadow: var(--blackShadow),
var(--whiteShadow);
padding: 5px;
margin: 50px;
}
- 效果
image.png
参考：
教你使用CSS3实现新拟态UI(https://juejin.cn/post/6868099832175820808)