介绍

「新拟态」英文名Neumorphism,也有设计师称为 Soft Ui(软UI)。简单来说就是一种类似浮雕的效果,介于扁平与投影之间。

示例

我们可以在CodePen搜索有关的 https://codepen.io/search/pens?q=Neumorphism

接下来、我们使用css和pr来做出拟态效果吧

CSS

查看代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>拟态图标</title>
<style>
* {
margin: 0;
padding: 0;
}

body {
/* 水平垂直居中 */
width: 100%;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
/* 设置背景颜色 #efeee 比较适用 */
background-color: #efeeee;
}

.container {
width: 700px;
height: 600px;
display: flex;
/* 平均分布在一行中,两端保留一半的空间 */
justify-content: space-around;
/* 多行显示 */
flex-wrap: wrap;
/* 各行向伸缩容器的中间位置对齐 */
align-items: center;
}

.container .box {
display: flex;
justify-content: space-around;
/* 设置主轴是垂直方向 */
flex-direction: column;
align-items: center;
align-content: center;
width: 100px;
height: 140px;
margin: 20px;
}

.container .box .img {
width: 100px;
height: 100px;
box-shadow: 18px 18px 30px rgba(0, 0, 0, 0.1),
-18px -18px 30px rgba(255, 255, 255, 1);
border-radius: 20px;
display: flex;
align-items: center;
justify-content: center;
background-color: #efeeee;
transition: box-shadow .2s ease-out;
position: relative;
}

.container .box .img img {
width: 60px;
transition: width .2s ease-out;
}

.container .box p {
color: slategray;
}

.container .box .img:hover {
box-shadow: 0 0 0 rgba(0, 0, 0, 0.2),
0 0 0 rgba(255, 255, 255, 0.8),
inset 18px 18px 30px rgba(0, 0, 0, 0.1),
inset -18px -18px 30px rgba(255, 255, 255, 1);
transition: box-shadow .2s ease-out;
}

.container .box .img:hover img {
width: 58px;
transition: width .2s ease-out;
}
</style>
</head>
<body>
<div class="container">
<div class="box">
<div class="img">
<img src="https://zykjofficial.tk/img/pwa/512.png" alt="">
</div>
<p>卓越科技</p>
</div>
<div class="box">
<div class="img">
<img src="https://zykjofficial.tk/img/pwa/512.png" alt="">
</div>
<p>卓越科技</p>
</div>
<div class="box">
<div class="img">
<img src="https://zykjofficial.tk/img/pwa/512.png" alt="">
</div>
<p>卓越科技</p>
</div>
<div class="box">
<div class="img">
<img src="https://zykjofficial.tk/img/pwa/512.png" alt="">
</div>
<p>卓越科技</p>
</div>
<div class="box">
<div class="img">
<img src="https://zykjofficial.tk/img/pwa/512.png" alt="">
</div>
<p>卓越科技</p>
</div>
<div class="box">
<div class="img">
<img src="https://zykjofficial.tk/img/pwa/512.png" alt="">
</div>
<p>卓越科技</p>
</div>
<div class="box">
<div class="img">
<img src="https://zykjofficial.tk/img/pwa/512.png" alt="">
</div>
<p>卓越科技</p>
</div>
<div class="box">
<div class="img">
<img src="https://zykjofficial.tk/img/pwa/512.png" alt="">
</div>
<p>卓越科技</p>
</div>
<div class="box">
<div class="img">
<img src="https://zykjofficial.tk/img/pwa/512.png" alt="">
</div>
<p>卓越科技</p>
</div>
<div class="box">
<div class="img">
<img src="https://zykjofficial.tk/img/pwa/512.png" alt="">
</div>
<p>卓越科技</p>
</div>
<div class="box">
<div class="img">
<img src="https://zykjofficial.tk/img/pwa/512.png" alt="">
</div>
<p>卓越科技</p>
</div>
<div class="box">
<div class="img">
<img src="https://zykjofficial.tk/img/pwa/512.png" alt="">
</div>
<p>卓越科技</p>
</div>
<div class="box">
<div class="img">
<img src="https://zykjofficial.tk/img/pwa/512.png" alt="">
</div>
<p>卓越科技</p>
</div>
<div class="box">
<div class="img">
<img src="https://zykjofficial.tk/img/pwa/512.png" alt="">
</div>
<p>卓越科技</p>
</div>
<div class="box">
<div class="img">
<img src="https://zykjofficial.tk/img/pwa/512.png" alt="">
</div>
<p>卓越科技</p>
</div>
</div>
</body>
</html>

这个代码的核心就是设置box-shadow(盒子阴影)

1
2
box-shadow: 18px 18px 30px rgba(0, 0, 0, 0.1),
-18px -18px 30px rgba(255, 255, 255, 1);

修改盒子阴影可以看到更好的效果

当然、通过这个网站 https://neumorphism.io/ 也可以可视化的修改样式

Pr

这里使用的的PR2019

  1. 打开PR、文件->新建->项目、为自己的项目重命名、保存在合适的位置就可以确定了

  2. 文件->新建->序列

    新建序列

  3. 创建颜色遮罩

    颜色遮罩

  4. 文件->新建->创建旧版标题 外描边

    颜色旧版标题

  5. 文件->新建->创建旧版标题 内填充

    颜色旧版标题

  6. 效果中添加边缘斜面相机模糊 给外描边所在的字幕、适当改变相机模糊的参数百分比模糊可以看到更好的效果

    效果

就这样、效果就完成了