svg path绘制心形_CSS+HTML<svg指纹扫描效果>

最新推荐文章于 2023-04-11 10:34:51 发布

weixin_39886612

最新推荐文章于 2023-04-11 10:34:51 发布

阅读量195

点赞数

文章标签： svg path绘制心形

本文链接：https://blog.csdn.net/weixin_39886612/article/details/111367784

版权

效果图：

此处是本人参考下面的地址大致实现的效果，主要是加以注释，并教大家了解实现这种效果的知识点。(有兴趣的可以参考地址深入学习 )

参考地址：

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;

知识点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;
            }
        }

不太了解 stroke-dashoffset 动画实现的，可参考

SVG 边框 (stroke) 基本知识以及 SVG 边框动画segmentfault.com

此处只是简单的使用，并没有很深入的研究(不过我以前有研究过 )

此处 path 路径的绘制也是个难点，不过人家有现成的，就直接拿来用，更何况你不是UI~~~

没错，只要给 button 设置 知识点1 这几个属性就变成了这样

再加上一个 button ::after,设置属性，就变成了这样(3D液态的效果就出来了，通过:hover控制 button ::after的显示，也就实现了按钮的效果)

代码如下：

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

weixin_39886612

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
svg path绘制心形_CSS+HTML<svg指纹扫描效果>

效果图：此处是本人参考下面的地址大致实现的效果，主要是加以注释，并教大家了解实现这种效果的知识点。(有兴趣的可以参考地址深入学习 )参考地址：svg神经形态指纹扫描仪www.jq22.com 知识点1：/* 通过设置模糊度，filter 背景颜色，background-color 背景渐变色，background ...
复制链接

扫一扫