svg dna解锁手机动画-html代码-BFW代码库

代码语言：html

所属分类：动画

代码描述：svg dna解锁手机动画

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

<style>
body {
    margin: 0px;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    width: 100vw;
    overflow: hidden;
}

.main-canvas {
    /* border: 1px dashed blueviolet; */
    width: 200px;
    height: 350px;
}
.social-wrapper {
    opacity: 0.7;
}

.social-wrapper svg g path {
    stroke: rgb(177, 177, 177) !important;
}
.social-wrapper svg g rect {
    stroke: rgb(177, 177, 177) !important;
}
.social-wrapper svg g circle {
    stroke: rgb(177, 177, 177) !important;
}

.socials-container {
    padding: 4px;
    position: fixed;
    top: 0;
    left: 0;
    width: 20px;
}
</style>

</head>
<body translate="no">

<canvas class="main-canvas" width="1000" height="700"></canvas>
<script>
// svgs
const fingerprintSvg = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 400"><title>fingerprint</title><g id="finger-print"><path d="M160.38,222.11s12,84.05-46.83,130.88" style="fill:none;stroke:#000;stroke-miterlimit:10;stroke-width:5px"/><path d="M158,200.5s6-38.43,43.22-37.23,42,37.23,42,37.23,3.6,32.42,3.6,45.62" style="fill:none;stroke:#000;stroke-miterlimit:10;stroke-width:5px"/><path d="M178.39,280.94s6.23-46.79,1.2-74.44c-4.8-26.42,37.22-31.22,40.82-6s20.41,90.05-42,175.3" style="fill:none;stroke:#000;stroke-miterlimit:10;stroke-width:5px"/><path d="M200,205.3S225.21,293,155.57,372.2" style="fill:none;stroke:#000;stroke-miterlimit:10;stroke-width:5px"/><path d="M204.8,378.2S242,321.77,245.63,266.54" style="fill:none;stroke:#000;stroke-miterlimit:10;stroke-width:5px"/><path d="M131.56,365s33.62-30,40.82-62.43" style="fill:none;stroke:#000;stroke-miterlimit:10;stroke-width:5px"/><path d="M94.34,342.18s30-25.22,39.62-54a140.18,140.18,0,0,0,6-62.44c-1.2-9.6-7.2-43.22,15.61-63.64s39.63-19.21,51.63-18" style="fill:none;stroke:#000;stroke-miterlimit:10;stroke-width:5px"/><path d="M227.62,148.87s90.05,40.82,3.6,226.93" style="fill:none;stroke:#000;stroke-miterlimit:10;stroke-width:5px"/><path d="M258.83,367.39s20.42-37.22,21.62-56.43" style="fill:none;stroke:#000;stroke-miterlimit:10;stroke-width:5px"/><path d="M285.25,290.55s10.81-57.63-2.4-102.06C257.63,84,105.14,111.64,117.15,213.7c4.8,31.22,2.4,37.23,1.2,43.23" style="fill:none;stroke:#000;stroke-miterlimit:10;stroke-width:5px"/><path d="M77.53,329s33.62-28.82,36-49.23" style="fill:none;stroke:#000;stroke-miterlimit:10;stroke-width:5px"/><path d="M64.32,311s28.82-20.41,31.22-46.83S93,219,94.34,198.1c1.2-19.22,10.8-50.43,39.62-75.65" style="fill:none;stroke:#000;stroke-miterlimit:10;stroke-width:5px"/><path d="M153.17,111.64s62.44-32.41,116.47,14.41" style="fill:none;stroke:#000;stroke-miterlimit:10;stroke-width:5px"/><path d="M284.05,141.66s56.43,66,4.8,211.33" style="fill:none;stroke:#000;stroke-miterlimit:10;stroke-width:5px"/><path d="M52.31,295.35s36-30,24-67.24c-4.81-10.8-3.6-19.21-3.6-19.21" style="fill:none;stroke:#000;stroke-miterlimit:10;stroke-width:5px"/><path d="M77.53,188.49C107.55,36,310.46,46.81,327.27,199.3" style="fill:none;stroke:#000;stroke-miterlimit:10;stroke-width:5px"/><path d="M329.68,222.11S336.88,287,318.87,329" style="fill:none;stroke:#000;stroke-miterlimit:10;stroke-width:5px"/><path d="M242.76,65.48c71.31,21.73,130.11,96.81,107.33,222.67" style="fill:none;stroke:#000;stroke-miterlimit:10;stroke-width:5px"/><path d="M42.71,276.14s16.81-12,12-44.43c-4.8-14.4-1.2-38.42-1.2-38.42,14.39-100.7,94.14-144,168-132.66" style="fill:none;stroke:#000;stroke-miterlimit:10;stroke-width:5px"/><path d="M298.91,66.41A170.26,170.26,0,0,1,370.5,205.3c0,1.83,0,3.65-.09,5.47" style="fill:none;stroke:#000;stroke-miterlimit:10;stroke-width:5px"/><path d="M61,106.55A170.64,170.64,0,0,1,276.52,52.89" style="fill:none;stroke:#000;stroke-miterlimit:10;stroke-width:5px"/><path d="M36,252.13A171.12,171.12,0,0,1,49,126.05" style="fill:none;stroke:#000;stroke-miterlimit:10;stroke-width:5px"/></g></svg>`;
const phoneSvg = `<svg id="phone" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 683 1333"><title>phone-screen</title><path id="outer-path" d="M111.31,1309.27c-50.43,0-91.31-42.08-91.31-94L19.69,114.5c0-51.91,40.89-94,91.32-94H565c50.43,0,91.31,42.09,91.31,94L656,1215.27c0,51.92-40.89,94-91.32,94Z" style="fill:none;stroke:#000;stroke-miterlimit:10;stroke-width:4px"/><path d="M619,115.5c0-.17,0-.33,0-.5,0-31.2-26-56.5-58-56.5H508s-7,1-10,4-3,4-3,10-9,32-30,32H212c-21,0-30-26-30-32s0-7-3-10-10-4-10-4H119c-32,0-58,25.3-58,56.5,0,.17,0,.33,0,.5v1102c0,.17,0,.33,0,.5,0,31.2,26,56.5,58,56.5H561c32,0,58-25.3,58-56.5,0-.17,0-.33,0-.5Z" style="fill:none;stroke:#000;stroke-miterlimit:10;stroke-width:4px"/><circle cx="408" cy="73.5" r="11" style="fill:none;stroke:#000;stroke-miterlimit:10;stroke-width:4px"/><rect x="300" y="68.5" width="80" height="11" rx="5.5" style="fill:none;stroke:#000;stroke-miterlimit:10;stroke-width:4px"/></svg>`;
const fingerASvg = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 418 865"><title>finger-a</title><g id="finger-a"><path d="M192.33,238.36s29.38,17.34,68.57,8.09" style="fill:none;stroke:#000;stroke-miterlimit:10;stroke-width:4px"/><path d="M192.33,105.42s10.88,25.43,39.18,26.59S274,100.8,275,93.86s2.18-16.18,2.18-16.18S259.81,53.4,231.51,54.56s-37,20.8-37,20.8Z" style="fill:none;stroke:#000;stroke-miterlimit:10;stroke-width:4px"/><path d="M158.58,475.34s55.51,1.15,71.84,13.87,35.92-13.87,35.92-13.87" style="fill:none;stroke:#000;stroke-miterlimit:10;stroke-width:4px"/><path d="M188,423.32s23.95-1.16,31.57,15" style="fill:none;stroke:#000;stroke-miterlimit:10;stroke-width:4px"/><path d="M255.45,461.47s-45.71-12.72-52.24-5.78" style="fill:none;stroke:#000;stroke-miterlimit:10;s.........完整代码请登录后点击上方下载按钮下载查看