javascript - Wie implementiert man den animierten Hintergrund der Homepage von btcc.com?

Question

Wenn die Website geladen wird, hat der Hintergrund einen kleinen Animationseffekt, der genau richtig ist. https://www.btcc.com/

伊谢尔伦 · Answer

<head>
    <meta charset="utf-8">
    <title></title>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <style>
    * {
        margin: 0;
        padding: 0;
    }
    
    #main {
        background: linear-gradient(#2455be 0, #2ebedd 100%);
        overflow: hidden;
    }
    
    #tile_background {
        width: 3600px;
        overflow: auto;
        margin: 0 auto;
    }
    
    #tile_background canvas {
        float: right;
        opacity: .5;
        mix-blend-mode: overlay;
        width: 1200px;
        height: 600px;
        display: inline-block;
        vertical-align: baseline;
    }
    </style>
</head>

<body>
    <p id="main">
        <p id="tile_background">
            <canvas width="1200" height="600"></canvas>
            <canvas width="1200" height="600"></canvas>
            <canvas width="1200" height="600"></canvas>
        </p>
    </p>
    <script>
    var h=[{points:[[0,75],[0,75],[43,0],[0,0]],color:"#1f1f1f",transform:{duration:1299.9999999999998,translateFrom:[-7,-16]}},{points:[[86,75],[43,0],[0,75]],color:"#3B3B3B",transform:{duration:1290,translateFrom:[-15,-4]}},{points:[[129,0],[43,0],[86,75]],color:"#313131",transform:{duration:1190,translateFrom:[-17,-18]}},{points:[[172,75],[129,0],[129,0],[86,75]],color:"#383838",transform:{duration:1260,translateFrom:[-6,-2]}},{points:[[129,0],[129,0],[129,0]],color:"#959595",transform:{duration:2190,translateFrom:[-4,-8]}},{points:[[172,75],[215,0],[129,0],[129,0]],color:"#3E3E3E",transform:{duration:1319.9999999999998,translateFrom:[0,-11]}},{points:[[258,75],[215,0],[172,75]],color:"#525252",transform:{duration:1520,translateFrom:[-16,-11]}},{points:[[301,0],[215,0],[258,75]],color:"#5B5B5B",transform:{duration:1609.9999999999998,translateFrom:[-14,-19]}},{points:[[344,75],[301,0],[301,0],[258,75]],color:"#717171",transform:{duration:1829.9999999999998,translateFrom:[0,-21]}},{points:[[301,0],[301,0],[301,0]],color:"#A1A1A1",transform:{duration:2310,translateFrom:[0,-7]}},{points:[[344,75],[387,0],[301,0],[301,0]],color:"#686868",transform:{duration:1740,translateFrom:[-17,-11]}},{points:[[430,75],[387,0],[344,75]],color:"#7F7F7F",transform:{duration:1970,translateFrom:[-1,-22]}},{points:[[473,0],[387,0],[430,75]],color:"#616161",transform:{duration:1670,translateFrom:[-10,-7]}},{points:[[516,75],[473,0],[473,0],[430,75]],color:"#717171",transform:{duration:1829.9999999999998,translateFrom:[-10,-22]}},{points:[[473,0],[473,0],[473,0]],color:"#A1A1A1",transform:{duration:2310,translateFrom:[-11,-15]}},{points:[[516,75],[559,0],[473,0],[473,0]],color:"#636363",transform:{duration:1690,translateFrom:[-15,-11]}},{points:[[602,75],[559,0],[516,75]],color:"#6F6F6F",transform:{duration:1810,translateFrom:[-11,-15]}},{points:[[645,0],[559,0],[602,75]],color:"#646464",transform:{duration:1700,translateFrom:[-12,-15]}},{points:[[688,75],[645,0],[645,0],[602,75]],color:"#6A6A6A",transform:{duration:1760,translateFrom:[11,-16]}},{points:[[645,0],[645,0],[645,0]],color:"#959595",transform:{duration:2190,translateFrom:[14,-10]}},{points:[[688,75],[731,0],[645,0],[645,0]],color:"#484848",transform:{duration:1420,translateFrom:[16,0]}},{points:[[774,75],[731,0],[688,75]],color:"#404040",transform:{duration:1339.9999999999998,translateFrom:[16,-10]}},{points:[[817,0],[731,0],[774,75]],color:"#424242",transform:{duration:1359.9999999999998,translateFrom:[3,-5]}},{points:[[860,75],[817,0],[774,75]],color:"#3D3D3D",transform:{duration:1310,translateFrom:[2,-9]}},{points:[[903,0],[817,0],[860,75]],color:"#3C3C3C",transform:{duration:1299.9999999999998,translateFrom:[12,-12]}},{points:[[946,75],[903,0],[860,75]],color:"#373737",transform:{duration:1250,translateFrom:[8,-10]}},{points:[[989,0],[903,0],[946,75]],color:"#3B3B3B",transform:{duration:1290,translateFrom:[3,-6]}},{points:[[1032,75],[989,0],[989,0],[946,75]],color:"#383838",transform:{duration:1260,translateFrom:[2,-14]}},{points:[[989,0],[989,0],[989,0]],color:"#959595",transform:{duration:2190,translateFrom:[17,-20]}},{points:[[1032,75],[1075,0],[989,0],[989,0]],color:"#3A3A3A",transform:{duration:1279.9999999999998,translateFrom:[5,-3]}},{points:[[1118,75],[1075,0],[1032,75]],color:"#2D2D2D",transform:{duration:1150,translateFrom:[5,-20]}},{points:[[1161,0],[1075,0],[1118,75]],color:"#2A2A2A",transform:{duration:1119.9999999999998,translateFrom:[3,-4]}},{points:[[1204,75],[1161,0],[1161,0],[1118,75]],color:"#242424",transform:{duration:1060,translateFrom:[13,0]}},{points:[[1161,0],[1161,0],[1161,0]],color:"#959595",transform:{duration:2190,translateFrom:[4,-15]}},{points:[[1204,75],[1204,0],[1161,0],[1161,0]],color:"#1F1F1F",transform:{duration:1010,translateFrom:[12,-22]}},{points:[[0,151],[43,151],[0,75],[0,75]],color:"#1F1F1F",transform:{duration:1010,translateFrom:[-9,-2]}},{points:[[0,75],[43,151],[86,75]],color:"#2B2B2B",transform:{duration:1130,translateFrom:[-13,-15]}},{points:[[129,151],[86,75],[43,151],[129,151]],color:"#383838",transform:{duration:1260,translateFrom:[-13,-17]}},{points:[[172,75],[86,75],[129,151]],color:"#464646",transform:{duration:1400,translateFrom:[-12,-7]}},{points:[[215,151],[215,151],[172,75],[129,151]],color:"#575757",transform:{duration:1569.9999999999998,translateFrom:[-9,-8]}},{points:[[258,75],[172,75],[215,151]],color:"#646464",transform:{duration:1700,translateFrom:[-13,-13]}},{points:[[301,151],[301,151],[258,75],[215,151]],color:"#8D8D8D",transform:{duration:2110,translateFrom:[-13,-5]}},{points:[[344,75],[258,75],[301,151]],color:"#949494",transform:{duration:2179.9999999999995,translateFrom:[-10,-5]}},{points:[[387,151],[387,151],[344,75],[301,151]],color:"#ACACAC",transform:{duration:2420,translateFrom:[-4,-6]}},{points:[[430,75],[344,75],[387,151]],color:"#919191",transform:{duration:2150,translateFrom:[-15,-16]}},{points:[[473,151],[473,151],[430,75],[387,151]],color:"#9D9D9D",transform:{duration:2270,translateFrom:[-4,-12]}},{points:[[516,75],[430,75],[473,151]],color:"#838383",transform:{duration:2009.9999999999998,translateFrom:[-17,-14]}},{points:[[559,151],[559,151],[516,75],[473,151]],color:"#9C9C9C",transform:{duration:2260,translateFrom:[-2,-9]}},{points:[[602,75],[516,75],[559,151]],color:"#8E8E8E",transform:{duration:2120,translateFrom:[-11,-11]}},{points:[[645,151],[645,151],[602,75],[559,151]],color:"#8F8F8F",transform:{duration:2130,translateFrom:[-9,-11]}},{points:[[688,75],[602,75],[645,151]],color:"#6B6B6B",transform:{duration:1770,translateFrom:[5,0]}},{points:[[731,151],[731,151],[688,75],[645,151]],color:"#616161",transform:{duration:1670,translateFrom:[2,-12]}},{points:[[774,75],[688,75],[731,151]],color:"#454545",transform:{duration:1390,translateFrom:[11,-14]}},{points:[[817,151],[774,75],[731,151]],color:"#3A3A3A",transform:{duration:1279.9999999999998,translateFrom:[17,-17]}},{points:[[860,75],[774,75],[817,151]],color:"#404040",transform:{duration:1339.9999999999998,translateFrom:[3,-13]}},{points:[[903,151],[903,151],[860,75],[817,151]],color:"#373737",transform:{duration:1250,translateFrom:[8,0]}},{points:[[946,75],[860,75],[903,151]],color:"#2D2D2D",transform:{duration:1150,translateFrom:[3,-7]}},{points:[[989,151],[946,75],[903,151]],color:"#282828",transform:{duration:1100,translateFrom:[16,-14]}},{points:[[1032,75],[946,75],[989,151]],color:"#1F1F1F",transform:{duration:1010,translateFrom:[13,-10]}},{points:[[1075,151],[1075,151],[1032,75],[989,151]],color:"#232323",transform:{duration:1300,translateFrom:[6,-4]}},{points:[[1118,75],[1032,75],[1075,151]],color:"#232323",transform:{duration:1049.9999999999998,translateFrom:[8,-11]}},{points:[[1161,151],[1161,151],[1118,75],[1075,151]],color:"#1F1F1F",transform:{duration:1010,translateFrom:[1,-11]}},{points:[[1161,151],[1204,75],[1118,75]],color:"#323232",transform:{duration:1200,translateFrom:[14,-3]}},{points:[[1204,151],[1204,75],[1161,151]],color:"#1F1F1F",transform:{duration:1010,translateFrom:[10,-14]}},{points:[[43,151],[0,151],[0,226],[0,226]],color:"#262626",transform:{duration:1080,translateFrom:[-10,-10]}},{points:[[86,226],[43,151],[43,151],[0,226]],color:"#282828",transform:{duration:1100,translateFrom:[-15,-8]}},{points:[[43,151],[43,151],[43,151]],color:"#959595",transform:{duration:2190,translateFrom:[-10,-5]}},{points:[[86,226],[129,151],[43,151],[43,151]],color:"#3D3D3D",transform:{duration:1310,translateFrom:[-12,-3]}},{points:[[129,151],[86,226],[172,226]],color:"#4E4E4E",transform:{duration:1480,translateFrom:[-2,-7]}},{points:[[215,151],[129,151],[129,151],[172,226]],color:"#5A5A5A",transform:{duration:1600,translateFrom:[-11,-2]}},{points:[[258,226],[215,151],[215,151],[172,226]],color:"#7B7B7B",transform:{duration:1930,translateFrom:[-10,-6]}},{points:[[215,151],[215,151],[215,151]],color:"#959595",transform:{duration:2190,translateFrom:[-1,-2]}},{points:[[258,226],[301,151],[215,151],[215,151]],color:"#868686",transform:{duration:2040,translateFrom:[-1,-8]}},{points:[[344,226],[301,151],[258,226]],color:"#BFBFBF",transform:{duration:2610,translateFrom:[-1,-9]}},{points:[[387,151],[301,151],[301,151],[344,226]],color:"#BBBBBB",transform:{duration:2570.0000000000005,translateFrom:[-12,-6]}},{points:[[430,226],[387,151],[387,151],[344,226]],color:"#B1B1B1",transform:{duration:2469.9999999999995,translateFrom:[-2,-10]}},{points:[[387,151],[387,151],[387,151]],color:"#959595",transform:{duration:2190,translateFrom:[-11,-10]}},{points:[[430,226],[473,151],[387,151],[387,151]],color:"#A7A7A7",transform:{duration:2370,translateFrom:[-12,-6]}},{points:[[516,226],[473,151],[430,226]],color:"#B1B1B1",transform:{duration:2469.9999999999995,translateFrom:[-2,-4]}},{points:[[559,151],[473,151],[473,151],[516,226]],color:"#AAAAAA",transform:{duration:2400,translateFrom:[-3,-4]}},{points:[[602,226],[559,151],[559,151],[516,226]],color:"#A6A6A6",transform:{duration:2360,translateFrom:[-6,-7]}},{points:[[559,151],[559,151],[559,151]],color:"#959595",transform:{duration:2190,translateFrom:[-5,-11]}},{points:[[602,226],[645,151],[559,151],[559,151]],color:"#A2A2A2",transform:{duration:2320.0000000000005,translateFrom:[-11,-2]}},{points:[[688,226],[645,151],[602,226]],color:"#939393",transform:{duration:2170,translateFrom:[12,-10]}},{points:[[731,151],[645,151],[645,151],[688,226]],color:"#757575",transform:{duration:1869.9999999999998,translateFrom:[7,-2]}},{points:[[774,226],[731,151],[731,151],[688,226]],color:"#6C6C6C",transform:{duration:1780,translateFrom:[5,-3]}},{points:[[731,151],[731,151],[731,151]],color:"#959595",transform:{duration:2190,translateFrom:[2,0]}},{points:[[774,226],[817,151],[731,151],[731,151]],color:"#545454",transform:{duration:1540,translateFrom:[16,-2]}},{points:[[860,226],[817,151],[774,226]],color:"#404040",transform:{duration:1339.9999999999998,translateFrom:[2,-2]}},{points:[[903,151],[817,151],[860,226]],color:"#2D2D2D",transform:{duration:1150,translateFrom:[4,-1]}},{points:[[946,226],[903,151],[903,151],[860,226]],color:"#353535",transform:{duration:1230,translateFrom:[7,-6]}},{points:[[903,151],[903,151],[903,151]],color:"#959595",transform:{duration:2190,translateFrom:[5,-1]}},{points:[[946,226],[989,151],[903,151],[903,151]],color:"#161616",transform:{duration:919.9999999999999,translateFrom:[6,-10]}},{points:[[1032,226],[989,151],[946,226]],color:"#1C1C1C",transform:{duration:980,translateFrom:[10,-8]}},{points:[[1075,151],[989,151],[1032,226]],color:"#232323",transform:{duration:1049.9999999999998,translateFrom:[6,-2]}},{points:[[1075,151],[1032,226],[1118,226],[1075,151]],color:"#343434",transform:{duration:1220,translateFrom:[3,-4]}},{points:[[1075,151],[1075,151],[1075,151]],color:"#959595",transform:{duration:2190,translateFrom:[3,-7]}},{points:[[1075,151],[1118,226],[1161,151],[1075,151]],color:"#232323",transform:{duration:1049.9999999999998,translateFrom:[15,-2]}},{points:[[1118,226],[1204,226],[1161,151]],color:"#212121",transform:{duration:1030,translateFrom:[3,-6]}},{points:[[1161,151],[1204,226],[1204,151],[1161,151]],color:"#262626",transform:{duration:1080,translateFrom:[4,-6]}},{points:[[0,226],[0,301],[43,301],[0,226]],color:"#232323",transform:{duration:1049.9999999999998,translateFrom:[-3,-4]}},{points:[[0,226],[0,226],[0,226]],color:"#E3E3E3",transform:{duration:2969.9999999999995,translateFrom:[-16,-3]}},{points:[[0,226],[43,301],[86,226]],color:"#383838",transform:{duration:1260,translateFrom:[-5,-3]}},{points:[[129,301],[86,226],[43,301],[129,301]],color:"#474747",transform:{duration:1410,translateFrom:[-5,-5]}},{points:[[86,226],[129,301],[172,226]],color:"#545454",transform:{duration:1540,translateFrom:[-13,0]}},{points:[[215,301],[172,226],[129,301],[129,301]],color:"#7B7B7B",transform:{duration:1930,translateFrom:[-9,-3]}},{points:[[172,226],[215,301],[258,226]],color:"#828282",transform:{duration:2e3,translateFrom:[-2,-1]}},{points:[[258,226],[215,301],[301,301]],color:"#A7A7A7",transform:{duration:2370,translateFrom:[-2,-1]}},{points:[[344,226],[258,226],[301,301]],color:"#B9B9B9",transform:{duration:2550,translateFrom:[-6,-3]}},{points:[[301,301],[387,301],[344,226],[301,301]],color:"#C1C1C1",transform:{duration:2630,translateFrom:[-3,-2]}},{points:[[430,226],[344,226],[387,301]],color:"#B8B8B8",transform:{duration:2540,translateFrom:[-14,-4]}},{points:[[473,301],[473,301],[430,226],[387,301]],color:"#C1C1C1",transform:{duration:2630,translateFrom:[-15,0]}},{points:[[516,226],[430,226],[473,301]],color:"#B5B5B5",transform:{duration:2510,translateFrom:[-6,-2]}},{points:[[473,301],[559,301],[516,226],[473,301]],color:"#B0B0B0",transform:{duration:2460,translateFrom:[-9,-1]}},{points:[[602,226],[516,226],[559,301]],color:"#B1B1B1",transform:{duration:2469.9999999999995,translateFrom:[-11,-1]}},{points:[[645,301],[602,226],[559,301]],color:"#B8B8B8",transform:{duration:2540,translateFrom:[-4,-1]}},{points:[[688,226],[602,226],[645,301]],color:"#A0A0A0",transform:{duration:2300,translateFrom:[1,-5]}},{points:[[645,301],[731,301],[688,226],[645,301]],color:"#8A8A8A",transform:{duration:2080,translateFrom:[5,-2]}},{points:[[774,226],[688,226],[731,301]],color:"#707070",transform:{duration:1820,translateFrom:[17,-2]}},{points:[[817,301],[774,226],[731,301]],color:"#5A5A5A",transform:{duration:1600,translateFrom:[12,0]}},{points:[[860,226],[774,226],[817,301]],color:"#4D4D4D",transform:{duration:1470,translateFrom:[9,-1]}},{points:[[903,301],[860,226],[817,301]],color:"#484848",transform:{duration:1420,translateFrom:[15,-3]}},{points:[[946,226],[860,226],[903,301]],color:"#2A2A2A",transform:{duration:1119.9999999999998,translateFrom:[7,-3]}},{points:[[989,301],[989,301],[946,226],[903,301]],color:"#3A3A3A",transform:{duration:1279.9999999999998,translateFrom:[3,0]}},{points:[[989,301],[1032,226],[946,226]],color:"#262626",transform:{duration:1080,translateFrom:[8,-4]}},{points:[[1075,301],[1032,226],[989,301]],color:"#3B3B3B",transform:{duration:1290,translateFrom:[17,-5]}},{points:[[1075,301],[1118,226],[1032,226]],color:"#262626",transform:{duration:1080,translateFrom:[10,-4]}},{points:[[1161,301],[1118,226],[1075,301]],color:"#2B2B2B",transform:{duration:1130,translateFrom:[4,-3]}},{points:[[1161,301],[1204,226],[1118,226]],color:"#1B1B1B",transform:{duration:970,translateFrom:[7,-3]}},{points:[[1161,301],[1204,301],[1204,226],[1161,301]],color:"#232323",transform:{duration:1049.9999999999998,translateFrom:[5,-1]}},{points:[[0,376],[0,376],[0,376],[43,301],[0,301]],color:"#262626",transform:{duration:1080,translateFrom:[-15,0]}},{points:[[43,301],[0,376],[86,376]],color:"#3C3C3C",transform:{duration:1299.9999999999998,translateFrom:[-12,1]}},{points:[[129,301],[43,301],[86,376]],color:"#464646",transform:{duration:1400,translateFrom:[-12,2]}},{points:[[129,301],[129,301],[86,376],[172,376]],color:"#5B5B5B",transform:{duration:1609.9999999999998,translateFrom:[-1,2]}},{points:[[129,301],[129,301],[172,376],[215,301]],color:"#6C6C6C",transform:{duration:1780,translateFrom:[-2,1]}},{points:[[215,301],[172,376],[258,376]],color:"#838383",transform:{duration:2009.9999999999998,translateFrom:[-14,2]}},{points:[[301,301],[215,301],[258,376]],color:"#979797",transform:{duration:2210,translateFrom:[-9,1]}},{points:[[301,301],[301,301],[258,376],[344,376]],color:"#A2A2A2",transform:{duration:2320.0000000000005,translateFrom:[-3,0]}},{points:[[301,301],[301,301],[301,301]],color:"#959595",transform:{duration:2190,translateFrom:[-13,0]}},{points:[[344,376],[387,301],[301,301],[301,301]],color:"#ADADAD",transform:{duration:2429.9999999999995,translateFrom:[-15,0]}},{points:[[430,376],[387,301],[344,376]],color:"#B4B4B4",transform:{duration:2500,translateFrom:[-7,2]}},{points:[[473,301],[387,301],[430,376]],color:"#BCBCBC",transform:{duration:2580,translateFrom:[-13,1]}},{points:[[516,376],[473,301],[473,301],[430,376]],color:"#B8B8B8",transform:{duration:2540,translateFrom:[-4,1]}},{points:[[516,376],[559,301],[473,301],[473,301]],color:"#B1B1B1",transform:{duration:2469.9999999999995,translateFrom:[-5,1]}},{points:[[602,376],[559,301],[516,376]],color:"#B7B7B7",transform:{duration:2530.0000000000005,translateFrom:[-13,0]}},{points:[[645,301],[559,301],[602,376]],color:"#AEAEAE",transform:{duration:2440,translateFrom:[-11,1]}},{points:[[688,376],[645,301],[645,301],[602,376]],color:"#A1A1A1",transform:{duration:2310,translateFrom:[13,0]}},{points:[[645,301],[645,301],[645,301]],color:"#959595",transform:{duration:2190,translateFrom:[5,1]}},{points:[[688,376],[731,301],[645,301],[645,301]],color:"#8D8D8D",transform:{duration:2110,translateFrom:[7,1]}},{points:[[774,376],[731,301],[688,376]],color:"#838383",transform:{duration:2009.9999999999998,translateFrom:[10,1]}},{points:[[817,301],[731,301],[774,376]],color:"#7A7A7A",transform:{duration:1920,translateFrom:[15,1]}},{points:[[860,376],[817,301],[774,376]],color:"#5D5D5D",transform:{duration:1630,translateFrom:[13,1]}},{points:[[903,301],[817,301],[860,376]],color:"#444444",transform:{duration:1380,translateFrom:[2,0]}},{points:[[860,376],[946,376],[903,301]],color:"#4C4C4C",transform:{duration:1460,translateFrom:[5,1]}},{points:[[946,376],[989,301],[903,301]],color:"#404040",transform:{duration:1339.9999999999998,translateFrom:[5,0]}},{points:[[989,301],[946,376],[1032,376],[989,301]],color:"#414141",transform:{duration:1350,translateFrom:[14,1]}},{points:[[989,301],[989,301],[989,301]],color:"#959595",transform:{duration:2190,translateFrom:[10,1]}},{points:[[989,301],[1032,376],[1075,301],[989,301]],color:"#323232",transform:{duration:1200,translateFrom:[2,1]}},{points:[[1032,376],[1118,376],[1075,301]],color:"#313131",transform:{duration:1190,translateFrom:[3,0]}},{points:[[1118,376],[1161,301],[1075,301]],color:"#282828",transform:{duration:1100,translateFrom:[3,2]}},{points:[[1161,301],[1118,376],[1204,376],[1161,301]],color:"#303030",transform:{duration:1180,translateFrom:[13,0]}},{points:[[1161,301],[1161,301],[1161,301]],color:"#959595",transform:{duration:2190,translateFrom:[15,1]}},{points:[[1161,301],[1204,376],[1204,301],[1161,301]],color:"#262626",transform:{duration:1080,translateFrom:[12,2]}},{points:[[0,376],[43,452],[86,376]],color:"#353535",transform:{duration:1230,translateFrom:[-5,7]}},{points:[[129,452],[86,376],[43,452],[129,452]],color:"#6B6B6B",transform:{duration:1770,translateFrom:[-4,5]}},{points:[[86,376],[129,452],[172,376]],color:"#777777",transform:{duration:1890,translateFrom:[-4,4]}},{points:[[215,452],[172,376],[129,452],[215,452]],color:"#868686",transform:{duration:2040,translateFrom:[-1,5]}},{points:[[172,376],[215,452],[258,376]],color:"#979797",transform:{duration:2210,translateFrom:[-1,7]}},{points:[[301,452],[258,376],[215,452],[301,452]],color:"#A2A2A2",transform:{duration:2320.0000000000005,translateFrom:[-1,4]}},{points:[[258,376],[301,452],[344,376]],color:"#A9A9A9",transform:{duration:2389.9999999999995,translateFrom:[0,4]}},{points:[[387,452],[344,376],[301,452],[387,452]],color:"#ABABAB",transform:{duration:2410,translateFrom:[-15,6]}},{points:[[344,376],[387,452],[430,376]],color:"#B0B0B0",transform:{duration:2460,translateFrom:[-9,5]}},{points:[[473,452],[430,376],[387,452],[473,452]],color:"#B5B5B5",transform:{duration:2510,translateFrom:[-1,1]}},{points:[[516,376],[430,376],[473,452]],color:"#B1B1B1",transform:{duration:2469.9999999999995,translateFrom:[-8,7]}},{points:[[559,452],[559,452],[516,376],[473,452]],color:"#BDBDBD",transform:{duration:2590,translateFrom:[-13,1]}},{points:[[602,376],[516,376],[559,452]],color:"#BBBBBB",transform:{duration:2570.0000000000005,translateFrom:[-15,3]}},{points:[[645,452],[645,452],[602,376],[559,452]],color:"#B5B5B5",transform:{duration:2510,translateFrom:[-5,3]}},{points:[[688,376],[602,376],[645,452]],color:"#AAAAAA",transform:{duration:2400,translateFrom:[6,6]}},{points:[[731,452],[731,452],[688,376],[645,452]],color:"#A5A5A5",transform:{duration:2349.9999999999995,translateFrom:[14,5]}},{points:[[774,376],[688,376],[731,452]],color:"#9D9D9D",transform:{duration:2270,translateFrom:[1,2]}},{points:[[817,452],[774,376],[731,452]],color:"#909090",transform:{duration:2139.9999999999995,translateFrom:[8,7]}},{points:[[817,452],[860,376],[774,376]],color:"#6E6E6E",transform:{duration:1800,translateFrom:[13,4]}},{points:[[903,452],[903,452],[860,376],[817,452]],color:"#717171",transform:{duration:1829.9999999999998,translateFrom:[8,6]}},{points:[[903,452],[946,376],[860,376]],color:"#666666",transform:{duration:1720,translateFrom:[11,1]}},{points:[[989,452],[946,376],[903,452]],color:"#5E5E5E",transform:{duration:1640,translateFrom:[15,3]}},{points:[[989,452],[1032,376],[946,376]],color:"#4C4C4C",transform:{duration:1460,translateFrom:[1,5]}},{points:[[1075,452],[1075,452],[1032,376],[989,452]],color:"#464646",transform:{duration:1400,translateFrom:[13,2]}},{points:[[1075,452],[1118,376],[1032,376]],color:"#3B3B3B",transform:{duration:1290,translateFrom:[10,2]}},{points:[[1161,452],[1161,452],[1118,376],[1075,452]],color:"#373737",transform:{duration:1250,translateFrom:[3,1]}},{points:[[1161,452],[1204,376],[1118,376]],color:"#303030",transform:{duration:1180,translateFrom:[2,4]}},{points:[[1204,452],[1204,376],[1161,452]],color:"#303030",transform:{duration:1100,translateFrom:[1,1]}},{points:[[0,452],[43,452],[0,376],[0,376]],color:"#333333",transform:{duration:1210,translateFrom:[-12,2]}},{points:[[43,452],[0,452],[0,527],[0,527]],color:"#383838",transform:{duration:1260,translateFrom:[-3,3]}},{points:[[86,527],[43,452],[43,452],[0,527]],color:"#464646",transform:{duration:1400,translateFrom:[-11,9]}},{points:[[43,452],[43,452],[43,452]],color:"#959595",transform:{duration:2190,translateFrom:[-9,7]}},{points:[[86,527],[129,452],[43,452],[43,452]],color:"#616161",transform:{duration:1670,translateFrom:[-3,6]}},{points:[[129,452],[86,527],[172,527]],color:"#6F6F6F",transform:{duration:1810,translateFrom:[-2,3]}},{points:[[215,452],[129,452],[129,452],[172,527]],color:"#808080",transform:{duration:1980,translateFrom:[-12,6]}},{points:[[215,452],[215,452],[172,527],[258,527]],color:"#8C8C8C",transform:{duration:2099.9999999999995,translateFrom:[-5,1]}},{points:[[215,452],[215,452],[215,452]],color:"#959595",transform:{duration:2190,translateFrom:[-2,12]}},{points:[[258,527],[301,452],[215,452],[215,452]],color:"#9A9A9A",transform:{duration:2240,translateFrom:[-16,7]}},{points:[[301,452],[258,527],[344,527]],color:"#9C9C9C",transform:{duration:2260,translateFrom:[-11,12]}},{points:[[387,452],[301,452],[301,452],[344,527]],color:"#A1A1A1",transform:{duration:2310,translateFrom:[-16,2]}},{points:[[387,452],[387,452],[344,527],[430,527]],color:"#AAAAAA",transform:{duration:2400,translateFrom:[-17,0]}},{points:[[387,452],[387,452],[387,452]],color:"#959595",transform:{duration:2190,translateFrom:[-11,10]}},{points:[[430,527],[473,452],[387,452],[387,452]],color:"#B3B3B3",transform:{duration:2490,translateFrom:[-17,13]}},{points:[[473,452],[430,527],[516,527]],color:"#C4C4C4",transform:{duration:2660,translateFrom:[-17,7]}},{points:[[559,452],[473,452],[473,452],[516,527]],color:"#C0C0C0",transform:{duration:2620,translateFrom:[-6,8]}},{points:[[602,527],[559,452],[559,452],[516,527]],color:"#C8C8C8",transform:{duration:2700,translateFrom:[0,0]}},{points:[[559,452],[559,452],[559,452]],color:"#959595",transform:{duration:2190,translateFrom:[-17,1]}},{points:[[602,527],[645,452],[559,452],[559,452]],color:"#B9B9B9",transform:{duration:2550,translateFrom:[-9,12]}},{points:[[688,527],[645,452],[602,527]],color:"#ABABAB",transform:{duration:2410,translateFrom:[14,7]}},{points:[[731,452],[645,452],[645,452],[688,527]],color:"#A4A4A4",transform:{duration:2340,translateFrom:[11,9]}},{points:[[731,452],[688,527],[774,527],[731,452]],color:"#979797",transform:{duration:2210,translateFrom:[7,7]}},{points:[[731,452],[731,452],[731,452]],color:"#959595",transform:{duration:2190,translateFrom:[0,6]}},{points:[[731,452],[774,527],[817,452],[731,452]],color:"#8B8B8B",transform:{duration:2090,translateFrom:[15,12]}},{points:[[774,527],[860,527],[817,452]],color:"#808080",transform:{duration:1980,translateFrom:[9,7]}},{points:[[860,527],[903,452],[817,452]],color:"#747474",transform:{duration:1859.9999999999998,translateFrom:[4,6]}},{points:[[903,452],[860,527],[946,527],[903,452]],color:"#787878",transform:{duration:1900,translateFrom:[1,9]}},{points:[[903,452],[903,452],[903,452]],color:"#959595",transform:{duration:2190,translateFrom:[12,1]}},{points:[[903,452],[946,527],[989,452],[903,452]],color:"#6D6D6D",transform:{duration:1790,translateFrom:[13,13]}},{points:[[946,527],[1032,527],[989,452]],color:"#737373",transform:{duration:1849.9999999999998,translateFrom:[11,14]}},{points:[[1032,527],[1075,452],[989,452]],color:"#646464",transform:{duration:1700,translateFrom:[0,13]}},{points:[[1075,452],[1032,527],[1118,527],[1075,452]],color:"#555555",transform:{duration:1549.9999999999998,translateFrom:[14,13]}},{points:[[1075,452],[1075,452],[1075,452]],color:"#959595",transform:{duration:2190,translateFrom:[7,13]}},{points:[[1075,452],[1118,527],[1161,452],[1075,452]],color:"#454545",transform:{duration:1390,translateFrom:[6,12]}},{points:[[1118,527],[1204,527],[1161,452]],color:"#444444",transform:{duration:1380,translateFrom:[11,3]}},{points:[[1161,452],[1204,527],[1204,452],[1161,452]],color:"#383838",transform:{duration:1260,translateFrom:[0,4]}},{points:[[0,527],[0,527],[0,527]],color:"#444444",transform:{duration:1380,translateFrom:[-4,8]}},{points:[[0,527],[0,527],[0,527]],color:"#E3E3E3",transform:{duration:2969.9999999999995,translateFrom:[-7,19]}},{points:[[0,527],[0,602],[43,602],[0,527]],color:"#444444",transform:{duration:1380,translateFrom:[-12,16]}},{points:[[0,527],[43,602],[86,527]],color:"#494949",transform:{duration:1430,translateFrom:[-8,0]}},{points:[[129,602],[86,527],[43,602],[129,602]],color:"#707070",transform:{duration:1820,translateFrom:[-9,2]}},{points:[[86,527],[129,602],[172,527]],color:"#848484",transform:{duration:2020,translateFrom:[-16,3]}},{points:[[215,602],[172,527],[129,602],[129,602]],color:"#9E9E9E",transform:{duration:2280.0000000000005,translateFrom:[-6,15]}},{points:[[172,527],[215,602],[258,527]],color:"#939393",transform:{duration:2170,translateFrom:[-7,15]}},{points:[[258,527],[215,602],[301,602]],color:"#8E8E8E",transform:{duration:2120,translateFrom:[-17,13]}},{points:[[258,527],[301,602],[344,527]],color:"#959595",transform:{duration:2190,translateFrom:[-15,14]}},{points:[[387,602],[344,527],[301,602],[301,602]],color:"#9E9E9E",transform:{duration:2280.0000000000005,translateFrom:[-6,5]}},{points:[[344,527],[387,602],[430,527]],color:"#A4A4A4",transform:{duration:2340,translateFrom:[-17,17]}},{points:[[473,602],[430,527],[387,602],[473,602]],color:"#ADADAD",transform:{duration:2429.9999999999995,translateFrom:[-6,8]}},{points:[[430,527],[473,602],[516,527]],color:"#C0C0C0",transform:{duration:2620,translateFrom:[-2,5]}},{points:[[559,602],[516,527],[473,602],[473,602]],color:"#BDBDBD",transform:{duration:2590,translateFrom:[-11,2]}},{points:[[516,527],[559,602],[602,527]],color:"#BFBFBF",transform:{duration:2610,translateFrom:[-2,16]}},{points:[[602,527],[559,602],[645,602]],color:"#B9B9B9",transform:{duration:2550,translateFrom:[-2,5]}},{points:[[645,602],[688,527],[602,527]],color:"#B1B1B1",transform:{duration:2469.9999999999995,translateFrom:[3,10]}},{points:[[645,602],[731,602],[688,527],[645,602]],color:"#AAAAAA",transform:{duration:2400,translateFrom:[1,11]}},{points:[[731,602],[774,527],[688,527]],color:"#9A9A9A",transform:{duration:2240,translateFrom:[13,17]}},{points:[[817,602],[774,527],[731,602]],color:"#8D8D8D",transform:{duration:2110,translateFrom:[8,14]}},{points:[[817,602],[860,527],[774,527]],color:"#818181",transform:{duration:1990,translateFrom:[16,11]}},{points:[[903,602],[860,527],[817,602]],color:"#7A7A7A",transform:{duration:1920,translateFrom:[5,10]}},{points:[[903,602],[946,527],[860,527]],color:"#828282",transform:{duration:2e3,translateFrom:[6,8]}},{points:[[989,602],[989,602],[946,527],[903,602]],color:"#7B7B7B",transform:{duration:1930,translateFrom:[15,4]}},{points:[[989,602],[1032,527],[946,527]],color:"#757575",transform:{duration:1869.9999999999998,translateFrom:[11,9]}},{points:[[1075,602],[1032,527],[989,602]],color:"#696969",transform:{duration:1750,translateFrom:[17,9]}},{points:[[1075,602],[1118,527],[1032,527]],color:"#5C5C5C",transform:{duration:1620,translateFrom:[12,1]}},{points:[[1161,602],[1118,527],[1075,602]],color:"#535353",transform:{duration:1529.9999999999998,translateFrom:[9,3]}},{points:[[1161,602],[1204,527],[1118,527]],color:"#4A4A4A",transform:{duration:1440,translateFrom:[13,6]}},{points:[[1161,602],[1204,602],[1204,527],[1161,602]],color:"#444444",transform:{duration:1380,translateFrom:[2,0]}}],m=function(){var o=document.createElement("canvas").getContext("2d"),r=window.devicePixelRatio||1,t=o.webkitBackingStorePixelRatio||o.mozBackingStorePixelRatio||o.msBackingStorePixelRatio||o.oBackingStorePixelRatio||o.backingStorePixelRatio||1;return r/t}(),g=!1,v=function(){if(!g){g=!0;for(var o=document.getElementsByTagName("canvas"),r=function(o){if(o.width=1200*m,o.height=600*m,window.requestAnimationFrame||window.mozRequestAnimationFrame||window.webkitRequestAnimationFrame||window.msRequestAnimationFrame,o&&o.getContext){var r=o.getContext("2d");if(r){r.setTransform(m,0,0,m,0,0),r.clearRect(0,0,o.width,o.height);var t=null,n=function(a){t||(t=a);var s=a-t;r.clearRect(0,0,o.width,o.height);for(var i=0;i<h.length;i++)if(h[i].transform.translateFrom&&s<h[i].transform.duration){var l=h[i].transform.translateFrom[0]*(1-s/h[i].transform.duration),m=h[i].transform.translateFrom[1]*(1-s/h[i].transform.duration);r.beginPath(),r.moveTo(h[i].points[0][0]+l,h[i].points[0][1]+m);for(var e=1;e<h[i].points.length;e++)r.lineTo(h[i].points[e][0]+l,h[i].points[e][1]+m);r.fillStyle=h[i].color,r.globalAlpha=s/h[i].transform.duration,r.fill()}else{r.translate(0,0),r.beginPath(),r.moveTo(h[i].points[0][0],h[i].points[0][1]);for(var e=1;e<h[i].points.length;e++)r.lineTo(h[i].points[e][0],h[i].points[e][1]);r.fillStyle=h[i].color,r.globalAlpha=1,r.fill()}3e3>s&&window.requestAnimationFrame(n)};window.requestAnimationFrame(n)}}},t=0;3>t;t++)r(o[t])}};if("undefined"!=typeof window&&!document.documentMode){var y=0;window.onload=function(){$("canvas").length&&v()};var w=setInterval(function(){g||y>10?clearInterval(w):($("canvas").length&&(v(),clearInterval(w)),y++)},3e3)}
    </script>
</body>

</html>
</code></pre>

PHP8, ich komme auch

Lernen Sie das Website-Layout in 30 Minuten

Shangguan Oracle Video-Tutorial für Anfänger bis Fortgeschrittene

Ihre erste Zeile UNI-APP-Code

Flattern Sie von Grund auf bis zum App-Start

Brother Lian Neues Linux-Video-Tutorial

AXURE 9 Video-Tutorial (geeignet für die interaktive Produktdesign-Benutzeroberfläche von Product Manager)

Zero Basic Proficiency PS-Video-Tutorial

16-tägiges UI-Video-Tutorial für den Einstieg

PS-Techniken und Slicing-Techniken-Video-Tutorial

Video-Tutorial zum Bau und zur Projekteinführung der Alibaba Cloud-Umgebung

Überblick über Computernetzwerke – Grundkenntnisse, die Programmierer beherrschen müssen

Grundlegendes Tutorial für Programmierer – Erklärung des HTTP-Protokolls

Websocket-Video-Tutorial