扫描仪，HTML/Vue代码在线实时编辑、预览

            
                1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74

            
            <svg width="179" height="297" viewBox="0 0 179 297" fill="none" xmlns="http://www.w3.org/2000/svg">
    <style type="text/css">
        .content rect {
        width: 7.03415px;
        opacity: 0.1;
        }

        rect#scan-line {
        width: 6px;
        height: 297px;
        }

        .content rect,
        rect#scan-line {
        fill: #5C77DA;
        }

        path.primary-stroke {
        stroke: #5C77DA;
        }
    </style>
    <path id="outer-phone-outline" d="M154.762 77.4771V77.9771H155.262H156.241V105.822H155.262H154.762V106.322V259.268C154.762 262.282 154.168 265.267 153.014 268.052C151.861 270.837 150.17 273.367 148.039 275.499C145.907 277.63 143.377 279.321 140.592 280.474C137.807 281.628 134.822 282.221 131.808 282.221H45.9538C42.9394 282.221 39.9546 281.628 37.1697 280.474C34.3848 279.321 31.8544 277.63 29.723 275.499C27.5915 273.367 25.9008 270.837 24.7472 268.052C23.5937 265.267 23 262.282 23 259.268V36.9537C23 33.9394 23.5937 30.9546 24.7473 28.1697C25.9008 25.3848 27.5916 22.8544 29.723 20.723C31.8545 18.5915 34.3849 16.9008 37.1698 15.7472C39.9547 14.5937 42.9395 14 45.9538 14H131.808C134.822 14 137.807 14.5937 140.592 15.7473C143.377 16.9008 145.907 18.5916 148.039 20.723C150.17 22.8545 151.861 25.3849 153.014 28.1698C154.168 30.9546 154.762 33.9395 154.762 36.9538V77.4771Z" fill="white" class="primary-stroke" />
    <g id="inner-phone-outline">
        <path d="M29 259.884V37.8944C28.9999 35.6604 29.4398 33.0652 30.2946 31.0012C31.1495 28.9372 32.4025 27.0618 33.9822 25.4822C35.5619 23.9025 37.4373 22.6494 39.5013 21.7946C41.5653 20.9397 43.7775 20.4998 46.0115 20.5H56.2956C55.9213 21.6211 55.7894 22.8112 55.9111 23.991C56.0511 25.3478 56.5225 26.6495 57.2836 27.7815C58.0447 28.9135 59.0723 29.8411 60.276 30.4828C61.4797 31.1245 62.8227 31.4606 64.1867 31.4615H116.305L117.519 31.3114C118.797 30.6318 119.887 29.6483 120.695 28.4475C121.502 27.2468 122.001 25.8658 122.149 24.4264C122.271 23.2305 122.147 22.0248 121.788 20.883H132.279C134.514 20.8822 136.726 21.3216 138.791 22.1761C140.856 23.0307 142.732 24.2836 144.312 25.8634C145.892 27.4431 147.146 29.3187 148.001 31.383C148.856 33.4474 149.297 35.6599 149.297 37.8944V259.884C149.297 262.119 148.856 264.331 148.001 266.396C147.146 268.46 145.892 270.336 144.312 271.915C142.732 273.495 140.856 274.748 138.791 275.603C136.726 276.457 134.514 276.897 132.279 276.896H46.0115C43.7775 276.896 41.5653 276.456 39.5013 275.601C37.4373 274.746 35.5619 273.493 33.9822 271.914C32.4025 270.334 31.1495 268.459 30.2946 266.395C29.4398 264.331 28.9999 262.118 29 259.884Z" fill="white" />
        <path d="M29 37.8944C29 124.587 29 259.884 29 259.884M29 37.8944C28.9999 35.6604 29.4398 33.0652 30.2946 31.0012C31.1495 28.9372 32.4025 27.0618 33.9822 25.4822C35.5619 23.9025 37.4373 22.6494 39.5013 21.7946C41.5653 20.9397 43.7775 20.4998 46.0115 20.5H56.2956C55.9213 21.6211 55.7894 22.8112 55.9111 23.991C56.0511 25.3478 56.5225 26.6495 57.2836 27.7815C58.0447 28.9135 59.0723 29.8411 60.276 30.4828C61.4797 31.1245 62.8227 31.4606 64.1867 31.4615C64.1867 31.4615 95.9515 31.4615 116.305 31.4615L117.519 31.3114C118.797 30.6318 119.887 29.6483 120.695 28.4475C121.502 27.2468 122.001 25.8658 122.149 24.4264C122.271 23.2305 122.147 22.0248 121.788 20.883H132.279C134.514 20.8822 136.726 21.3216 138.791 22.1761C140.856 23.0307 142.732 24.2836 144.312 25.8634C145.892 27.4431 147.146 29.3187 148.001 31.383C148.856 33.4474 149.297 35.6599 149.297 37.8944V259.884C149.297 262.119 148.856 264.331 148.001 266.396C147.146 268.46 145.892 270.336 144.312 271.915C142.732 273.495 140.856 274.748 138.791 275.603C136.726 276.457 134.514 276.897 132.279 276.896H46.0115C43.7775 276.896 41.5653 276.456 39.5013 275.601C37.4373 274.746 35.5619 273.493 33.9822 271.914C32.4025 270.334 31.1495 268.459 30.2946 266.395C29.4398 264.331 28.9999 262.118 29 259.884M29 37.8944V259.884" class="primary-stroke" />
    </g>
    <mask id="inner-phone-outline-mask" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="28" y="20" width="122" height="258">
        <path d="M29 259.884V37.8944C28.9999 35.6604 29.4398 33.0652 30.2946 31.0012C31.1495 28.9372 32.4025 27.0618 33.9822 25.4822C35.5619 23.9025 37.4373 22.6494 39.5013 21.7946C41.5653 20.9397 43.7775 20.4998 46.0115 20.5H56.2956C55.9213 21.6211 55.7894 22.8112 55.9111 23.991C56.0511 25.3478 56.5225 26.6495 57.2836 27.7815C58.0447 28.9135 59.0723 29.8411 60.276 30.4828C61.4797 31.1245 62.8227 31.4606 64.1867 31.4615H116.305L117.519 31.3114C118.797 30.6318 119.887 29.6483 120.695 28.4475C121.502 27.2468 122.001 25.8658 122.149 24.4264C122.271 23.2305 122.147 22.0248 121.788 20.883H132.279C134.514 20.8822 136.726 21.3216 138.791 22.1761C140.856 23.0307 142.732 24.2836 144.312 25.8634C145.892 27.4431 147.146 29.3187 148.001 31.383C148.856 33.4474 149.297 35.6599 149.297 37.8944V259.884C149.297 262.119 148.856 264.331 148.001 266.396C147.146 268.46 145.892 270.336 144.312 271.915C142.732 273.495 140.856 274.748 138.791 275.603C136.726 276.457 134.514 276.897 132.279 276.896H46.0115C43.7775 276.896 41.5653 276.456 39.5013 275.601C37.4373 274.746 35.5619 273.493 33.9822 271.914C32.4025 270.334 31.1495 268.459 30.2946 266.395C29.4398 264.331 28.9999 262.118 29 259.884Z" fill="white" />
        <path d="M29 37.8944C29 124.587 29 259.884 29 259.884M29 37.8944C28.9999 35.6604 29.4398 33.0652 30.2946 31.0012C31.1495 28.9372 32.4025 27.0618 33.9822 25.4822C35.5619 23.9025 37.4373 22.6494 39.5013 21.7946C41.5653 20.9397 43.7775 20.4998 46.0115 20.5H56.2956C55.9213 21.6211 55.7894 22.8112 55.9111 23.991C56.0511 25.3478 56.5225 26.6495 57.2836 27.7815C58.0447 28.9135 59.0723 29.8411 60.276 30.4828C61.4797 31.1245 62.8227 31.4606 64.1867 31.4615C64.1867 31.4615 95.9515 31.4615 116.305 31.4615L117.519 31.3114C118.797 30.6318 119.887 29.6483 120.695 28.4475C121.502 27.2468 122.001 25.8658 122.149 24.4264C122.271 23.2305 122.147 22.0248 121.788 20.883H132.279C134.514 20.8822 136.726 21.3216 138.791 22.1761C140.856 23.0307 142.732 24.2836 144.312 25.8634C145.892 27.4431 147.146 29.3187 148.001 31.383C148.856 33.4474 149.297 35.6599 149.297 37.8944V259.884C149.297 262.119 148.856 264.331 148.001 266.396C147.146 268.46 145.892 270.336 144.312 271.915C142.732 273.495 140.856 274.748 138.791 275.603C136.726 276.457 134.514 276.897 132.279 276.896H46.0115C43.7775 276.896 41.5653 276.456 39.5013 275.601C37.4373 274.746 35.5619 273.493 33.9822 271.914C32.4025 270.334 31.1495 268.459 30.2946 266.395C29.4398 264.331 28.9999 262.118 29 259.884M29 37.8944V259.884" class="primary-stroke" />
    </mask>
    <g id="phone-screen" mask="url(#inner-phone-outline-mask)">
        <g class="content content-1" opacity="0">
            <rect x="148.861" y="74" height="96.8609" transform="rotate(90 148.861 74)" />
            <rect x="149.582" y="56.0878" height="96.8609" transform="rotate(90 149.582 56.0878)" />
            <rect x="125.861" y="38" height="96.8609" transform="rotate(90 125.861 38)" />
            <rect x="125.861" y="92.2634" height="96.8609" transform="rotate(90 125.861 92.2634)" />
            <rect x="125.861" y="110.351" height="96.8609" transform="rotate(90 125.861 110.351)" />
            <rect x="149.582" y="128.439" height="96.8609" transform="rotate(90 149.582 128.439)" />
            <rect x="149.582" y="146.527" height="96.8609" transform="rotate(90 149.582 146.527)" />
            <rect x="125.861" y="164.615" height="96.8609" transform="rotate(90 125.861 164.615)" />
            <rect x="149.582" y="182.702" height="96.8609" transform="rotate(90 149.582 182.702)" />
            <rect x="149.582" y="200.79" height="96.8609" transform="rotate(90 149.582 200.79)" />
            <rect x="149.582" y="218.878" height="96.8609" transform="rotate(90 149.582 218.878)" />
            <rect x="125.861" y="236.966" height="96.8609" transform="rotate(90 125.861 236.966)" />
            <animateTransform id="showcontent" attributeType="xml" attributeName="transform" type="translate" dur="8s" values="0,-320;0,13;" repeatCount="0" fill="freeze" />
            <animateTransform attributeType="xml" attributeName="transform" begin="showcontent.end" type="translate" dur="16s" values="0,13;0,6;0,16;0,13;" repeatCount="indefinite" fill="freeze" />
            <animate attributeName="opacity" from="0" to="1" dur="0.3s" begin="showcontent.begin" fill="freeze" repeatCount="1" />
            <animate attributeName="opacity" id="hidecontent" from="1" to="0" dur="0.3s" begin="20s" fill="freeze" repeatCount="1" />
        </g>
        <g class="content content-2" opacity="0">
            <rect x="108.729" y="153" height="98.4781" transform="rotate(-180 108.729 153)" />
            <rect x="90.7905" y="153" height="98.4781" transform="rotate(-180 90.7905 153)" />
            <rect x="72.853" y="153" height="98.4781" transform="rotate(-180 72.853 153)" />
            <rect x="54.9146" y="153" height="98.4781" transform="rotate(-180 54.9146 153)" />
            <rect x="36.9761" y="153" height="98.4781" transform="rotate(-180 36.9761 153)" />
            <animateTransform attributeType="xml" attributeName="transform" type="translate" dur="4s"  begin="scan.end+1s" values="176,0; 0,0; -176,0; 0,0; 176,0" repeatCount="indefinite" />
            <animate attributeName="opacity" from="0" to="1" dur="0.3s" begin="scan.end+1s" fill="freeze" repeatCount="1" />
        </g>
        <g class="content content-3" opacity="0">
            <rect x="0" y="226.385" height="135.482" transform="rotate(-90 21.4062 226.385)" />
            <rect x="0" y="208.297" height="135.482" transform="rotate(-90 21.4062 208.297)" />
            <rect x="0" y="190.21" height="135.482" transform="rotate(-90 21.4062 190.21)" />
            <rect x="0" y="172.122" height="135.482" transform="rotate(-90 21.4062 172.122)" />
            <rect x="0" y="154.034" height="135.482" transform="rotate(-90 21.4062 154.034)" />
            <animateTransform attributeType="xml" attributeName="transform" type="translate" dur="4s" begin="scan.end+1s" values="-176,0; 0,0; 176,0; 0,0; -176,0" repeatCount="indefinite" />
            <animate attributeName="opacity" from="0" to="1" dur="0.3s" begin="scan.end+1s" fill="freeze" repeatCount="1" />
        </g>
    </g>
    <rect id="scan-line" x="173" opacity="0">
        <animateTransform attributeType="xml" attributeName="transform" type="translate" begin="showcontent.end" dur="5s" values="0,0; -173,0; 0,0; -173,0; 0,0; " repeatCount="indefinite" />
        <animate attributeName="opacity" from="0" to="1" dur="0.3s" begin="showcontent.end" fill="freeze" repeatCount="1" />
        <animate attributeName="opacity" id="scan" from="1" to="0" dur="0.7s" begin="hidecontent.end" fill="freeze" repeatCount="1" />
    </rect>
</svg>