效果图：
svg.gif
此处是本人参考下面的地址大致实现的效果，主要是加以注释，并教大家了解实现这种效果的知识点。(有兴趣的可以参考地址深入学习👍)
参考地址：http://www.jq22.com/code2950
🎈知识点1：
/* 通过设置
模糊度，filter
背景颜色，background-color
背景渐变色，background
阴影，box-shadow
实现按键效果图 */
filter: blur(0.025em);
background-color: #bcc6d8;
background: radial-gradient(160% 160% at 57.5% 60%, rgba(235, 238, 243, 0) 30%, #ebeef3 45%), radial-gradient(180% 200% at 40% 17.5%, rgba(152, 168, 194, 0) 35%, #98a8c2 50%), radial-gradient(120% 120% at 45% 45%, rgba(184, 195, 213, 0) 42%, rgba(152, 168, 194, 0.75) 50%);
box-shadow:
inset -0.05em -0.05em 0.025em -0.025em #a8b5cc,
0.115em 0.15em 0.1em -0.033em #98a9c2,
0.15em 0.2em 0.25em #a8b5cc,
0.5em 0.33em 0.5em 0.1em #a8b5cc,
-0.1em -0.1em 0.05em -0.075em #dee3ec,
-0.2em -0.2em 0.33em -0.075em #dadfe9
🎈知识点2：
transition 过渡效果
transition: opacity 0.25s cubic-bezier(0.33, 0.45, 0.3, 1) 0.35s, stroke-dashoffset 4.2s cubic-bezier(0.33, 0.45, 0.3, 1) 0.35s, stroke 1.2s cubic-bezier(0.33, 0.45, 0.3, 1) 4.65s, color 1.2s cubic-bezier(0.33, 0.45, 0.3, 1) 4.65s;
image.png
🎈知识点3：
SVG Stroke 属性
参考地址：https://www.runoob.com/svg/svg-stroke.html
指纹路径的实现
animation: printIn 2s cubic-bezier(0.33, 0.45, 0.3, 1) forwards 3.2s;
/* 底部路径显示动画 */
@keyframes printIn {
from {
opacity: 0;
stroke-dashoffset: .5;
}
to {
opacity: 1;
stroke-dashoffset: 0;
}
}
svg1.gif
不太了解 stroke-dashoffset 动画实现的，可参考https://segmentfault.com/a/1190000007309718，此处只是简单的使用，并没有很深入的研究(不过我以前有研究过 😁)
🎈此处 path 路径的绘制也是个难点，不过人家有现成的，就直接拿来用，更何况你不是UI~~~
🎈没错，只要给 button 设置 知识点1 这几个属性就变成了这样
image.png
再加上一个 button ::after,设置属性，就变成了这样(3D液态的效果就出来了，通过:hover控制 button ::after的显示，也就实现了按钮的效果)
image.png
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>svg神经形态指纹扫描仪</title>
<style>
* {
padding: 0;
margin: 0;
}
html,
body {
height: 100%;
}
body {
width: 100%;
display: flex;
justify-content: center;
align-items: center;
background: #d8dee8;
}
body:before {
content: '';
position: absolute;
width: 100%;
height: 100%;
background: radial-gradient(150% 150% at 0% 20%, #d8dee8 20%, #788daf);
}
.button {
display: flex;
justify-content: center;
align-items: center;
position: relative;
/* 相对于视口的宽度或高度中较小的那个。其中最小的那个被均分为100单位的vmin */
font-size: 30vmin;
width: 1em;
height: 1em;
border-radius: 50%;
opacity: 0;
/* 引入按键显示动画 */
animation: buttonIn 2s cubic-bezier(0.33, 0.45, 0.3, 1) forwards 2s;
}
.button::before,
.button::after {
content: '';
/* inherit 关键字指定一个属性应从父元素继承它的值。 */
border-radius: inherit;
}
.button::before {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
/* 通过设置
模糊度，filter
背景颜色，background-color
背景渐变色，background
阴影，box-shadow
实现按键效果图 */
filter: blur(0.025em);
background-color: #bcc6d8;
background: radial-gradient(160% 160% at 57.5% 60%, rgba(235, 238, 243, 0) 30%, #ebeef3 45%), radial-gradient(180% 200% at 40% 17.5%, rgba(152, 168, 194, 0) 35%, #98a8c2 50%), radial-gradient(120% 120% at 45% 45%, rgba(184, 195, 213, 0) 42%, rgba(152, 168, 194, 0.75) 50%);
box-shadow:
inset -0.05em -0.05em 0.025em -0.025em #a8b5cc,
0.115em 0.15em 0.1em -0.033em #98a9c2,
0.15em 0.2em 0.25em #a8b5cc,
0.5em 0.33em 0.5em 0.1em #a8b5cc,
-0.1em -0.1em 0.05em -0.075em #dee3ec,
-0.2em -0.2em 0.33em -0.075em #dadfe9
}
.button::after {
position: absolute;
top: 0.025em;
right: 0.025em;
bottom: 0.025em;
left: 0.025em;
background: radial-gradient(150% 150% at 75% 75%, rgba(120, 141, 175, 0) 30%, #788daf), radial-gradient(150% 150% at -10% -10%, rgba(226, 230, 238, 0) 50%, #e2e6ee);
background-color: #b8c3d5;
transition: 0.75s cubic-bezier(0.33, 0.45, 0.3, 1);
transition-delay: .25s;
opacity: 0;
filter: blur(0.03em);
transform: scale3d(0.925, 0.94, 1);
}
.button:hover:after {
opacity: 1;
transform: none;
transition-delay: 0s;
}
/* 鼠标触碰时停止底部路径闪动动画 */
.button:hover .print--under {
animation-play-state: paused;
}
/* 鼠标经过 顶层填充路径加载 */
.button:hover .print--over path {
opacity: 1;
stroke-dashoffset: 0;
stroke: #c76cfc;
transition: opacity 0.25s cubic-bezier(0.33, 0.45, 0.3, 1) 0.35s, stroke-dashoffset 4.2s cubic-bezier(0.33, 0.45, 0.3, 1) 0.35s, stroke 1.2s cubic-bezier(0.33, 0.45, 0.3, 1) 4.65s, color 1.2s cubic-bezier(0.33, 0.45, 0.3, 1) 4.65s;
}
/* 指纹容器 */
.print {
position: absolute;
width: 40%;
height: 0;
padding-bottom: 44.488%;
display: inline-block;
z-index: 1;
transform: scale3d(1.05, 1.05, 1);
/* color: rgba(51, 170, 255, 0.5); */
}
/* svg样式 */
.print svg {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
/* path路径样式 */
.print path {
stroke-width: 4;
fill: none;
stroke-linecap: round;
stroke-dasharray: 1;
transition: 2s cubic-bezier(0.33, 0.45, 0.3, 1);
}
/* 底部路径容器部分 */
.print--under {
animation: printPulse 2s linear infinite 4s;
}
/* 底部铺垫路径 */
.print--under path {
opacity: 0;
stroke: #bbd8fc;
animation: printIn 2s cubic-bezier(0.33, 0.45, 0.3, 1) forwards 3.2s;
}
.print--over path {
opacity: 0;
stroke-dashoffset: 1;
}
.print--over path {
stroke: #33b4ff;
}
/* 按键慢慢显示出来动画 */
@keyframes buttonIn {
from {
opacity: 0;
transform: scale3d(1.1, 1.15, 1);
}
to {
opacity: 1;
transform: none;
}
}
/* 底部路径闪动动画 */
@keyframes printPulse {
0% {
opacity: 1;
}
50% {
opacity: 0.4;
}
100% {
opacity: 1;
}
}
/* 底部路径显示动画 */
@keyframes printIn {
from {
opacity: 0;
stroke-dashoffset: .5;
}
to {
opacity: 1;
stroke-dashoffset: 0;
}
}
</style>
</head>
<body>
<div class="button">
<!-- 底层路径 -->
<span class="print print--under">
<svg viewBox="0 0 98 109" xmlns="http://www.w3.org/2000/svg">
<path
d="m95.42 60.221c0.33333-4.6667 0.33333-10.667 0-18-0.5-11-8.5-26.5-24-34.5-15.5-8-38-9.5-55.5 8-11.667 11.667-16 25.5-13 41.5l0.65525 4.3683c0.38693 2.5791 2.7914 4.3563 5.3705 3.9695 2.5664-0.38496 4.3413-2.7687 3.9742-5.3378-1-7-6-22 10-38 14.554-14.554 38.15-14.554 52.704 0 4.5444 4.5444 7.8364 10.187 9.5562 16.379 0.5744 2.0681 0.98766 3.9417 1.2398 5.6209 2.4899 16.582-2.9979 37.051-6 53"
pathLength="1" />
<path
d="m15.42 76.221c5.3333-3.6667 7.3333-10.167 6-19.5-0.23862-1.551-0.44877-3.0902-0.63044-4.6174-1.8313-15.395 9.1641-29.359 24.559-31.191 1.268-0.15084 2.5448-0.21497 3.8216-0.19197 15.616 0.28138 28.07 13.129 27.864 28.747-0.089675 6.8105-0.29443 11.895-0.61426 15.253-1.2042 12.644-2.9364 21.532-7 37"
pathLength="1" />
<path
d="m19.92 85.221c7-5.3333 10.5-13.333 10.5-24v-12.5c0-10.217 8.2827-18.5 18.5-18.5 10.287 0 18.636 8.3235 18.666 18.611 0.019372 6.5699-0.035925 10.7-0.16589 12.389-1.5 19.5-3.5 31.5-12 45"
pathLength="1" />
<path
d="m26.92 92.221c8.6667-9.3333 13-17.333 13-24 0-4.1832-0.18166-10.365-0.54497-18.544-0.2219-4.9954 3.6478-9.2249 8.6432-9.4467 0.13383-0.0059444 0.26778-0.0089177 0.40175-0.0089177 5.5235 0 10.044 4.395 10.2 9.9163 0.16256 5.764-0.070756 11.792-0.69994 18.084-1.5 15-5.5 25.5-16.5 38"
pathLength="1" />
<path d="m32.92 99.221c10.667-12.333 16-23.333 16-33v-17" pathLength="1" />
</svg>
</span>
<!-- 顶层路径 -->
<span class="print print--over">
<svg viewBox="0 0 98 109" xmlns="http://www.w3.org/2000/svg">
<path
d="m95.42 60.221c0.33333-4.6667 0.33333-10.667 0-18-0.5-11-8.5-26.5-24-34.5-15.5-8-38-9.5-55.5 8-11.667 11.667-16 25.5-13 41.5l0.65525 4.3683c0.38693 2.5791 2.7914 4.3563 5.3705 3.9695 2.5664-0.38496 4.3413-2.7687 3.9742-5.3378-1-7-6-22 10-38 14.554-14.554 38.15-14.554 52.704 0 4.5444 4.5444 7.8364 10.187 9.5562 16.379 0.5744 2.0681 0.98766 3.9417 1.2398 5.6209 2.4899 16.582-2.9979 37.051-6 53"
pathLength="1" />
<path
d="m15.42 76.221c5.3333-3.6667 7.3333-10.167 6-19.5-0.23862-1.551-0.44877-3.0902-0.63044-4.6174-1.8313-15.395 9.1641-29.359 24.559-31.191 1.268-0.15084 2.5448-0.21497 3.8216-0.19197 15.616 0.28138 28.07 13.129 27.864 28.747-0.089675 6.8105-0.29443 11.895-0.61426 15.253-1.2042 12.644-2.9364 21.532-7 37"
pathLength="1" />
<path
d="m19.92 85.221c7-5.3333 10.5-13.333 10.5-24v-12.5c0-10.217 8.2827-18.5 18.5-18.5 10.287 0 18.636 8.3235 18.666 18.611 0.019372 6.5699-0.035925 10.7-0.16589 12.389-1.5 19.5-3.5 31.5-12 45"
pathLength="1" />
<path
d="m26.92 92.221c8.6667-9.3333 13-17.333 13-24 0-4.1832-0.18166-10.365-0.54497-18.544-0.2219-4.9954 3.6478-9.2249 8.6432-9.4467 0.13383-0.0059444 0.26778-0.0089177 0.40175-0.0089177 5.5235 0 10.044 4.395 10.2 9.9163 0.16256 5.764-0.070756 11.792-0.69994 18.084-1.5 15-5.5 25.5-16.5 38"
pathLength="1" />
<path d="m32.92 99.221c10.667-12.333 16-23.333 16-33v-17" pathLength="1" />
</svg>
</span>
</div>
</body>
</html>
