javascript - btcc.com的首頁動畫背景是怎么實現的？
問題描述
站點載入時，背景有一點的動畫效果，恰到好處。
https://www.btcc.com/
問題解答
回答1：<!DOCTYPE html><html><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 height='600'></canvas> <canvas height='600'></canvas> <canvas 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>
相關文章：
1. javascript - 微信報redirect_uri參數錯誤2. 我在centos容器里安裝docker，也就是在容器里安裝容器，報錯了？3. android - 類似微信朋友圈或者QQ空間說說那種點擊圖片放大，并且有放大縮小手勢，左右滑動圖片手勢效果4. java - 初學SSM 在import自己寫的包下的類的時候飄紅，求大神解答？5. 網頁動畫等過渡效果，CSS3 transitions 和 jQuery animations 誰實現的性能更好？6. javascript - 怎么簡寫這段jQuery功能？7. springboot中不能獲取post請求參數的解決方法8. javascript - 如何計算字符串寬度？9. java - Atom中文問題10. angular.js - angular中的a標簽不起作用
網公網安備