CSS+HTML<svg指紋掃描效果>

效果圖：

svg.gif

此處是本人參考下面的地址大致實(shí)現(xiàn)的效果榛鼎，主要是加以注釋牢撼，并教大家了解實(shí)現(xiàn)這種效果的知識(shí)點(diǎn)淮逻。(有興趣的可以參考地址深入學(xué)習(xí)??)

參考地址：http://www.jq22.com/code2950

??知識(shí)點(diǎn)1：

/* 通過設(shè)置
            模糊度鞍泉，filter
            背景顏色皱埠，background-color
            背景漸變色，background
            陰影咖驮，box-shadow
            實(shí)現(xiàn)按鍵效果圖 */
            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

??知識(shí)點(diǎn)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

??知識(shí)點(diǎn)3：
SVG Stroke 屬性
參考地址：https://www.runoob.com/svg/svg-stroke.html
指紋路徑的實(shí)現(xiàn)

 animation: printIn 2s cubic-bezier(0.33, 0.45, 0.3, 1) forwards 3.2s;

/* 底部路徑顯示動(dòng)畫 */
        @keyframes printIn {
            from {
                opacity: 0;
                stroke-dashoffset: .5;
            }

            to {
                opacity: 1;
                stroke-dashoffset: 0;
            }
        }

svg1.gif

不太了解 stroke-dashoffset 動(dòng)畫實(shí)現(xiàn)的边器，可參考https://segmentfault.com/a/1190000007309718，此處只是簡(jiǎn)單的使用托修，并沒有很深入的研究(不過我以前有研究過 ??)

??此處 path 路徑的繪制也是個(gè)難點(diǎn)忘巧，不過人家有現(xiàn)成的，就直接拿來(lái)用睦刃，更何況你不是UI~~~

??沒錯(cuò)砚嘴，只要給 button 設(shè)置 知識(shí)點(diǎn)1 這幾個(gè)屬性就變成了這樣

image.png

再加上一個(gè) button ::after,設(shè)置屬性，就變成了這樣(3D液態(tài)的效果就出來(lái)了涩拙，通過:hover控制 button ::after的顯示际长，也就實(shí)現(xiàn)了按鈕的效果)

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神經(jīng)形態(tài)指紋掃描儀</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;
            /* 相對(duì)于視口的寬度或高度中較小的那個(gè)。其中最小的那個(gè)被均分為100單位的vmin */
            font-size: 30vmin;
            width: 1em;
            height: 1em;
            border-radius: 50%;
            opacity: 0;
            /* 引入按鍵顯示動(dòng)畫 */
            animation: buttonIn 2s cubic-bezier(0.33, 0.45, 0.3, 1) forwards 2s;
        }

        .button::before,
        .button::after {
            content: '';
            /* inherit 關(guān)鍵字指定一個(gè)屬性應(yīng)從父元素繼承它的值兴泥。 */
            border-radius: inherit;
        }

        .button::before {
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
            /* 通過設(shè)置
            
            模糊度工育，filter
            背景顏色，background-color
            背景漸變色搓彻，background
            陰影如绸，box-shadow

            實(shí)現(xiàn)按鍵效果圖 */
            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;
        }

        /* 鼠標(biāo)觸碰時(shí)停止底部路徑閃動(dòng)動(dòng)畫 */
        .button:hover .print--under {
            animation-play-state: paused;
        }
         
        /* 鼠標(biāo)經(jīng)過 頂層填充路徑加載 */
        .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;
        }

        /* 按鍵慢慢顯示出來(lái)動(dòng)畫 */
        @keyframes buttonIn {
            from {
                opacity: 0;
                transform: scale3d(1.1, 1.15, 1);
            }

            to {
                opacity: 1;
                transform: none;
            }
        }

        /* 底部路徑閃動(dòng)動(dòng)畫 */
        @keyframes printPulse {
            0% {
                opacity: 1;
            }

            50% {
                opacity: 0.4;
            }

            100% {
                opacity: 1;
            }
        }

        /* 底部路徑顯示動(dòng)畫 */
        @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>

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者

人面猴
序言：七十年代末嘱朽，一起剝皮案震驚了整個(gè)濱河市，隨后出現(xiàn)的幾起案子怔接，更是在濱河造成了極大的恐慌搪泳，老刑警劉巖，帶你破解...
沈念sama閱讀 210,835評(píng)論 6贊 490
死咒
序言：濱河連續(xù)發(fā)生了三起死亡事件蜕提，死亡現(xiàn)場(chǎng)離奇詭異森书，居然都是意外死亡，警方通過查閱死者的電腦和手機(jī)谎势，發(fā)現(xiàn)死者居然都...
沈念sama閱讀 89,900評(píng)論 2贊 383
救了他兩次的神仙讓他今天三更去死
文/潘曉璐我一進(jìn)店門凛膏，熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)，“玉大人脏榆，你說我怎么就攤上這事猖毫。” “怎么了须喂？”我有些...
開封第一講書人閱讀 156,481評(píng)論 0贊 345
道士緝兇錄：失蹤的賣姜人
文/不壞的土叔我叫張陵吁断，是天一觀的道長(zhǎng)。經(jīng)常有香客問我坞生，道長(zhǎng)仔役，這世上最難降的妖魔是什么？我笑而不...
開封第一講書人閱讀 56,303評(píng)論 1贊 282
?港島之戀（遺憾婚禮）
正文為了忘掉前任是己，我火速辦了婚禮又兵，結(jié)果婚禮上，老公的妹妹穿的比我還像新娘卒废。我一直安慰自己沛厨，他們只是感情好，可當(dāng)我...
茶點(diǎn)故事閱讀 65,375評(píng)論 5贊 384
惡毒庶女頂嫁案：這布局不是一般人想出來(lái)的
文/花漫我一把揭開白布摔认。她就那樣靜靜地躺著逆皮，像睡著了一般。火紅的嫁衣襯著肌膚如雪参袱。梳的紋絲不亂的頭發(fā)上电谣，一...
開封第一講書人閱讀 49,729評(píng)論 1贊 289
城市分裂傳說
那天，我揣著相機(jī)與錄音蓖柔，去河邊找鬼辰企。笑死，一個(gè)胖子當(dāng)著我的面吹牛况鸣，可吹牛的內(nèi)容都是我干的牢贸。我是一名探鬼主播，決...
沈念sama閱讀 38,877評(píng)論 3贊 404
雙鴛鴦連環(huán)套：你想象不到人心有多黑
文/蒼蘭香墨我猛地睜開眼镐捧，長(zhǎng)吁一口氣：“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼潜索！你這毒婦竟也來(lái)了臭增？” 一聲冷哼從身側(cè)響起，我...
開封第一講書人閱讀 37,633評(píng)論 0贊 266
萬(wàn)榮殺人案實(shí)錄
序言：老撾萬(wàn)榮一對(duì)情侶失蹤竹习，失蹤者是張志新（化名）和其女友劉穎誊抛，沒想到半個(gè)月后，有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體整陌，經(jīng)...
沈念sama閱讀 44,088評(píng)論 1贊 303
?護(hù)林員之死
正文獨(dú)居荒郊野嶺守林人離奇死亡拗窃，尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛以下內(nèi)容為張勛視角年9月15日...
茶點(diǎn)故事閱讀 36,443評(píng)論 2贊 326
?白月光啟示錄
正文我和宋清朗相戀三年，在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了泌辫。大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片随夸。...
茶點(diǎn)故事閱讀 38,563評(píng)論 1贊 339
活死人
序言：一個(gè)原本活蹦亂跳的男人離奇死亡，死狀恐怖震放，靈堂內(nèi)的尸體忽然破棺而出宾毒，到底是詐尸還是另有隱情，我是刑警寧澤殿遂，帶...
沈念sama閱讀 34,251評(píng)論 4贊 328
?日本核電站爆炸內(nèi)幕
正文年R本政府宣布诈铛，位于F島的核電站，受9級(jí)特大地震影響墨礁，放射性物質(zhì)發(fā)生泄漏幢竹。R本人自食惡果不足惜，卻給世界環(huán)境...
茶點(diǎn)故事閱讀 39,827評(píng)論 3贊 312
男人毒藥：我在死后第九天來(lái)索命
文/蒙蒙一恩静、第九天我趴在偏房一處隱蔽的房頂上張望妨退。院中可真熱鬧，春花似錦蜕企、人聲如沸。這莊子的主人今日做“春日...
開封第一講書人閱讀 30,712評(píng)論 0贊 21
一樁弒父案袜爪，背后竟有這般陰謀
文/蒼蘭香墨我抬頭看了看天上的太陽(yáng)剃执。三九已至，卻和暖如春唇牧，著一層夾襖步出監(jiān)牢的瞬間，已是汗流浹背聚唐。一陣腳步聲響...
開封第一講書人閱讀 31,943評(píng)論 1贊 264
情欲美人皮
我被黑心中介騙來(lái)泰國(guó)打工丐重，沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留，地道東北人杆查。一個(gè)月前我還...
沈念sama閱讀 46,240評(píng)論 2贊 360
代替公主和親
正文我出身青樓扮惦，卻偏偏與公主長(zhǎng)得像，于是被迫代替她去往敵國(guó)和親亲桦。傳聞我的和親對(duì)象是個(gè)殘疾皇子崖蜜，可洞房花燭夜當(dāng)晚...
茶點(diǎn)故事閱讀 43,435評(píng)論 2贊 348

CSS+HTML<svg指紋掃描效果>

效果圖：

代碼如下：

推薦閱讀更多精彩內(nèi)容