H5新拟态设计风格按钮全网最全的新拟态设计讲解简单讲，新拟态是一种图形样式，其原理是为界面的UI元素赋予真实感。其实

一、什么是新拟态

引用知乎

简单讲，新拟态是一种图形样式，其原理是为界面的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;
}

暗色.gif

完整代码

<!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>