使用 HTML、CSS 的新拟态动画

这是我参与8月更文挑战的第21天，活动详情查看：8月更文挑战

前言

如何使用 HTML、 CSS 制作新拟态动画？

效果图

我在下面分享了有关我如何进行此设计的完整教程。希望下面的教程能帮到你。

为此，首先，你必须创建一个 HTML 文件。

第 1 步：创建新拟态按钮的基本结构

<div class="container">
    <div class="box">
    </div>
</div>

html,
body {
    margin: 0;
    padding: 0;
    background: #efeeee;
}

.container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 700px;
    height: 600px;
    display: flex;
    justify-content: center;
    align-items: center;
}

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

正如上面的样式中，设置了 100*100 大小的正方形按钮，使用 box-shadow 可以制作出各种各样的新拟态风格，box-shadow 中 x 轴和 y 轴的数值相反，使其可以呈现倾斜的阴影效果， border-radius 使按钮稍圆润，transition 是后面做动画过渡时需要用到的。

演示效果：

第 2 步：设置语音图标

<svg t="1630404566247" class="icon" viewBox="0 0 1076 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
    p-id="6534" width="60" height="60">
    <path
        d="M86.330418 669.335191H15.445444a15.004375 15.004375 0 1 1 0-29.995782h70.884974a15.004375 15.004375 0 1 1 0 29.995782z"
        fill="#50FBFF" p-id="6535"></path>
    <path
        d="M50.887931 704.790646a15.004375 15.004375 0 0 1-15.004375-15.004375v-70.897942a15.004375 15.004375 0 0 1 30.00875 0v70.897942a15.004375 15.004375 0 0 1-15.004375 15.004375z"
        fill="#50FBFF" p-id="6536"></path>
    <path
        d="M981.237002 778.697244m-26.714791 0a26.714791 26.714791 0 1 0 53.429582 0 26.714791 26.714791 0 1 0-53.429582 0Z"
        fill="#FE7E00" p-id="6537"></path>
    <path
        d="M910.403901 879.513158m-15.886222 0a15.886223 15.886223 0 1 0 31.772445 0 15.886223 15.886223 0 1 0-31.772445 0Z"
        fill="#FE7E00" p-id="6538"></path>
    <path
        d="M1017.911482 602.794612m-58.370521 0a58.370521 58.370521 0 1 0 116.741041 0 58.370521 58.370521 0 1 0-116.741041 0Z"
        fill="#FEDF1D" p-id="6539"></path>
    <path
        d="M396.688851 110.490299m5.187338 0l337.48821 0q5.187338 0 5.187338 5.187338l0 506.75105q0 5.187338-5.187338 5.187338l-337.48821 0q-5.187338 0-5.187338-5.187338l0-506.75105q0-5.187338 5.187338-5.187338Z"
        fill="#FC00FC" p-id="6540"></path>
    <path
        d="M674.483769 112.75976a208.284589 208.284589 0 0 1 3.657073 38.204744v238.708327a208.232716 208.232716 0 0 1-208.232715 208.232715 207.221185 207.221185 0 0 1-138.177716-52.742259c17.961158 96.730885 102.644451 170.027971 204.523769 170.027972a208.232716 208.232716 0 0 0 208.297557-208.232716V268.250216a207.49352 207.49352 0 0 0-70.067968-155.490456z"
        fill="#8304AD" p-id="6541"></path>
    <path
        d="M536.25418 833.332882c-196.509332 0-356.370121-159.860789-356.370121-356.370121a29.995782 29.995782 0 1 1 59.991564 0c0 163.401147 132.964441 296.378557 296.378557 296.378557s296.443398-132.951473 296.443398-296.378557a29.995782 29.995782 0 1 1 59.991564 0c0 196.509332-159.860789 356.370121-356.434962 356.370121zM328.086306 332.0026a29.995782 29.995782 0 0 1-30.008751-29.995782v-29.995782a30.00875 30.00875 0 1 1 60.004533 0v29.995782a29.995782 29.995782 0 0 1-29.995782 29.995782z"
        fill="#27233A" p-id="6542"></path>
    <path
        d="M624.555641 715.191259H448.069434a150.173435 150.173435 0 0 1-149.991879-149.991879V391.994164a30.00875 30.00875 0 0 1 60.004533 0v173.205216a90.091093 90.091093 0 0 0 89.987346 89.987346h176.486207a90.091093 90.091093 0 0 0 89.987346-89.987346V150.004847a90.091093 90.091093 0 0 0-89.987346-90.000315H448.069434a90.091093 90.091093 0 0 0-89.987346 90.000315v32.018843a30.00875 30.00875 0 0 1-60.004533 0v-32.018843A150.173435 150.173435 0 0 1 448.069434 0h176.486207a150.173435 150.173435 0 0 1 149.991878 150.004847v415.194533a150.173435 150.173435 0 0 1-149.991878 149.991879zM536.25418 1023.99349a29.995782 29.995782 0 0 1-29.995782-30.00875v-190.634672a30.00875 30.00875 0 0 1 60.004532 0v190.634672a29.995782 29.995782 0 0 1-30.00875 30.00875z"
        fill="#27233A" p-id="6543"></path>
    <path
        d="M707.332587 1023.99349H355.423577a30.00875 30.00875 0 0 1 0-60.004532h351.90901a30.00875 30.00875 0 1 1 0 60.004532z"
        fill="#27233A" p-id="6544"></path>
</svg>

上面结构中定义了长度和宽度都为 60 像素的语音图表，svg 格式的图标是矢量图标，所以放大缩小都不会变形

演示效果：

第 3 步骤：给新拟态按钮添加动画

我们需要的效果是：鼠标移到按钮上时，按钮会有下陷的效果，鼠标移出按钮时恢复原样

我们只需要修改 css 就行了

.icon {
    transition: all .2s ease-out;
}

.box:hover {
    box-shadow: 0 0 0 rgba(0, 0, 0, .1),
        0 0 0 rgba(255, 255, 255, 1),
        inset 18px 18px 30px rgba(0, 0, 0, .1),
        inset -18px -18px 30px rgba(255, 255, 255, 1);
}

.box:hover .icon {
    transform: scale(.9);
}

上面的样式中，给图标添加了 transition，让鼠标移动时按钮可以有过渡效果，使用 inset 按钮有内阴影的效果。

演示效果：