![51646f30c4f5ea7fc23bf627439ad844.png](https://i-blog.csdnimg.cn/blog_migrate/5e02667250b5ba91b0567b47a2d20bdc.png)
效果图:
![d55779510653452b2fc9ba2402ad1013.gif](https://i-blog.csdnimg.cn/blog_migrate/fc79af60e92996ff1ab2318807043175.gif)
此处是本人参考下面的地址大致实现的效果,主要是加以注释,并教大家了解实现这种效果的知识点。(有兴趣的可以参考地址深入学习 )
参考地址:
svg神经形态指纹扫描仪www.jq22.com知识点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;
![aa41bdb676a332fa656d752ac165ff49.png](https://i-blog.csdnimg.cn/blog_migrate/abe3dd5bef7a5f05d8502ac4bf2c8dfe.jpeg)
知识点3:
SVG Stroke 属性
参考地址:
SVG Stroke 属性 | 菜鸟教程www.runoob.com指纹路径的实现
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;
}
}
![203788b04ba0cd5e013ffa4b8f7af516.gif](https://i-blog.csdnimg.cn/blog_migrate/6902a814b958794569de491a306bc378.gif)
不太了解 stroke-dashoffset 动画实现的,可参考
SVG 边框 (stroke) 基本知识以及 SVG 边框动画segmentfault.com![94c1938c18eb4a4ac8f599a4028e97bb.png](https://i-blog.csdnimg.cn/blog_migrate/3eeb89c7c6ebbd5547c2cca464547b34.png)
此处只是简单的使用,并没有很深入的研究(不过我以前有研究过 )
此处 path 路径的绘制也是个难点,不过人家有现成的,就直接拿来用,更何况你不是UI~~~
没错,只要给 button 设置 知识点1 这几个属性就变成了这样
![f1e441c798c1588acca69488bcbfcfad.png](https://i-blog.csdnimg.cn/blog_migrate/064b01867b8ee14a7bd72f3336cd9443.png)
再加上一个 button ::after,设置属性,就变成了这样(3D液态的效果就出来了,通过:hover控制 button ::after的显示,也就实现了按钮的效果)
![8b62dff19177531b918457e2238bf11e.png](https://i-blog.csdnimg.cn/blog_migrate/a68dead7b61b54ac7e4126b5da005d77.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="SVG namespace">
<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="SVG namespace">
<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>