一、什么是新拟态
引用知乎
简单讲，新拟态是一种图形样式，其原理是为界面的UI元素赋予真实感。
其实他也是算拟物风格的一种，只不过表现形式不一样，最早出现在追波上,
后面陆续被收录在2020设计趋势预测里面，在2019年的年末慢慢被大家熟知，讨论，重视起来。暂且不论是不是未来的必然趋势之一，一个事物的兴起多少是有些道理，我们持辩证的眼光去看到，去学习、去了解便好。
新拟态设计风格特点
- 1.有且只有一个光源照射
- 2.组件与背景对比度比较弱
- 3.按钮状态，视觉上凸出代表未选中，凹进去表示已选中状态
H5实战
创建一个html文件
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>新拟态按钮</title>
<style>
* {
margin: 0;
padding: 0;
}
html, body {
width: 100%;
height: 100%;
}
</style>
</head>
<body>
</body>
</html>
复制代码写一个图标
去阿里巴巴矢量图标库下载个图标，我就下载了个搜索的图标
<div class="icon-div">
<div class="icon-img">
<img src="./icon/线性放大镜搜索.png"/>
</div>
<p>搜索</p>
</div>
复制代码给他们来个居中，然后给个背景颜色
body {
display: flex;
align-items: center;
justify-content: center;
background-color: #ebecf0;
}
.icon-div {
width: 100px;
height: 160px;
border-radius: 20px;
display: flex;
justify-content: space-around;
flex-direction: column;
align-items: center;
align-content: center;
user-select: none;
}
.icon-div .icon-img {
width: 100px;
height: 100px;
/*一个合适的圆角*/
border-radius: 20px;
/*颜色和背景颜色相近，低对比度*/
background-color: #ebecf0;
display: flex;
align-items: center;
justify-content: center;
}
.icon-div .icon-img img {
width: 60px;
}
.icon-div p {
color: slategrey;
}
.icon-div:hover {
cursor: pointer;
}
复制代码现在的效果貌似什么都看不出来，没有关系，下一步就给它模拟光照和阴影
模拟光照和阴影
给icon添加box-shadow来模拟光照和阴影
.icon-div .icon-img {
/*...*/
/*模拟光照阴影*/
box-shadow: 5px 5px 10px rgba(121, 130, 160, 0.55),
-5px -5px 10px rgb(255, 255, 255);
}
复制代码效果显著
点击反馈，压按状态
设置点击反馈，把阴影反向，图标缩小一些，模拟按下，再增加一个过渡
.icon-div .icon-img img {
transform: scale(1);
}
.icon-div .icon-img:active {
/*阴影反向*/
box-shadow: 0 0 0 rgba(0, 0, 0, 0),
0 0 0 rgba(0, 0, 0, 0),
inset 5px 5px 10px rgba(121, 130, 160, 0.55),
inset -5px -5px 10px rgb(255, 255, 255);
/*增加过渡*/
transition: box-shadow 50ms ease-out;
}
.icon-div .icon-img:active img {
/*图标缩小*/
transform: scale(0.98);
transition: transform 50ms ease-out;
}
复制代码提取变量，方便配置
在css里写一个:root选择器，里面写一些变量，方便配置
再把响应的变量替换成var(...)就行了
:root {
--color-background: #ebecf0;
--color-icon-bg: #ebecf0;
--color-label: slategrey;
--color-light: rgba(121, 130, 160, 0.55);
--color-shadow: rgb(255, 255, 255);
--duration-ani: 50ms;
}
.icon-div .icon-img {
/*模拟光照阴影*/
box-shadow: 5px 5px 10px var(--color-light),
-5px -5px 10px var(--color-shadow);
/*增加过渡*/
transition: box-shadow var(--duration-ani) ease-out;
}
复制代码再来一款暗色配置
:root {
--color-background: #3B4046;
--color-icon-bg: #2D343C;
--color-label: #777A7D;
--color-light: #272a2e;
--color-shadow: #595a5c;
--duration-ani: 50ms;
}
复制代码完整代码
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>新拟态按钮</title>
<style>
* {
margin: 0;
padding: 0;
}
:root {
--color-background: #ebecf0;
--color-icon-bg: #ebecf0;
--color-label: slategrey;
--color-light: rgba(121, 130, 160, 0.55);
--color-shadow: rgb(255, 255, 255);
--duration-ani: 50ms;
}
html, body {
width: 100%;
height: 100%;
}
body {
display: flex;
align-items: center;
justify-content: center;
background-color: var(--color-background);
}
.icon-div {
width: 100px;
height: 160px;
display: flex;
justify-content: space-around;
flex-direction: column;
align-items: center;
align-content: center;
user-select: none;
}
.icon-div .icon-img {
width: 100px;
height: 100px;
/*一个合适的圆角*/
border-radius: 20px;
/*颜色和背景颜色相近，低对比度*/
background-color: var(--color-icon-bg);
display: flex;
align-items: center;
justify-content: center;
/*模拟光照阴影*/
box-shadow: 5px 5px 10px var(--color-light),
-5px -5px 10px var(--color-shadow);
/*增加过渡*/
transition: box-shadow var(--duration-ani) ease-out;
}
.icon-div .icon-img img {
width: 60px;
transform: scale(1);
transition: transform var(--duration-ani) ease-out;
}
.icon-div p {
color: var(--color-label);
}
.icon-div:hover {
cursor: pointer;
}
.icon-div .icon-img:active {
box-shadow: 0 0 0 rgba(0, 0, 0, 0),
0 0 0 rgba(0, 0, 0, 0),
inset 5px 5px 10px var(--color-light),
inset -5px -5px 10px var(--color-shadow);
}
.icon-div .icon-img:active img {
transform: scale(0.98);
}
</style>
</head>
<body>
<div class="icon-div">
<div class="icon-img">
<img src="./icon/线性放大镜搜索.png"/>
</div>
<p>搜索</p>
</div>
</body>
</html>
复制代码
