TweenMax实现一个404页面动画效果代码
代码语言:html
所属分类:布局界面
代码描述:TweenMax实现一个404页面动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Roboto+Condensed:400,700'> <style> body { height: 100vh; background: #88DCD5; display: grid; font-family: 'Roboto Condensed', sans-serif; } .container { position: relative; height: 600px; width: 750px; margin: auto; } .container svg { height: 100%; } p, a { margin: 0; position: absolute; text-decoration: none; text-transform: uppercase; color: #032C3F; font-size: 24px; } .textA { top: 169px; left: 257px; transform: rotate(-3deg); } .textB { font-weight: 700; font-size: 135px; top: 209px; left: 273px; transform: rotate(-2deg); } .textC { top: 370px; left: 428px; font-size: 30px; transform: rotate(1deg); } </style> </head> <body > <div class="container"> <p class="textA">Page Not Found</p> <p class="textB">404</p> <a class="textC" href="#">Go Back</a> <svg class="page-not-found" viewBox="0 0 1280 1024"> <title>Page Not Found</title> <g class="hide tri-dots"> <circle cx="406.1" cy="890.7" r="3.5" transform="translate(-361.3 283) rotate(-27.1)" style="fill: #ffe029"/> <circle cx="426.2" cy="878.8" r="3.7" transform="translate(-353.7 290.8) rotate(-27.1)" style="fill: #ffe029"/> <circle cx="424.4" cy="861.8" r="3.7" transform="translate(-346.1 288.1) rotate(-27.1)" style="fill: #ffe029"/> <circle cx="445.8" cy="867.7" r="3.7" transform="translate(-346.5 298.5) rotate(-27.1)" style="fill: #ffe029"/> <circle cx="438.3" cy="851.8" r="3.7" transform="translate(-340.1 293.4) rotate(-27.1)" style="fill: #ffe029"/> <circle cx="453.8" cy="845.8" r="3.7" transform="translate(-335.6 299.8) rotate(-27.1)" style="fill: #ffe029"/> <circle cx="465.2" cy="859" r="3.7" transform="translate(-340.4 306.4) rotate(-27.1)" style="fill: #ffe029"/> <circle cx="483" cy="849.2" r="3.7" transform="translate(-333.9 313.4) rotate(-27.1)" style="fill: #ffe029"/> <circle cx="500.6" cy="840.2" r="3.7" transform="translate(-327.9 320.5) rotate(-27.1)" style="fill: #ffe029"/> <circle cx="517.7" cy="831.5" r="3.7" transform="translate(-322 327.3) rotate(-27.1)" style="fill: #ffe029"/> <circle cx="502.8" cy="821" r="3.7" transform="translate(-318.9 319.4) rotate(-27.1)" style="fill: #ffe029"/> <circle cx="486" cy="829.6" r="3.7" transform="translate(-324.7 312.7) rotate(-27.1)" style="fill: #ffe029"/> <circle cx="469.6" cy="837.8" r="3.7" transform="translate(-330.2 306.1) rotate(-27.1)" style="fill: #ffe029"/> <circle cx="455.3" cy="825.5" r="3.7" transform="translate(-326.2 298.2) rotate(-27.1)" style="fill: #ffe029"/> <circle cx="471.5" cy="817.7" r="3.7" transform="translate(-320.9 304.8) rotate(-27.1)" style="fill: #ffe029"/> <circle cx="487.9" cy="810.2" r="3.7" transform="translate(-315.6 311.4) rotate(-27.1)" style="fill: #ffe029"/> <circle cx="489.8" cy="791.1" r="3.7" transform="translate(-306.7 310.1) rotate(-27.1)" style="fill: #ffe029"/> <circle cx="473.1" cy="798.2" r="3.7" transform="translate(-311.8 303.4) rotate(-27.1)" style="fill: #ffe029"/> <circle cx="456.9" cy="805.7" r="3.7" transform="translate(-317 296.8) rotate(-27.1)" style="fill: #ffe029"/> <circle cx="440.5" cy="813.7" r="3.7" transform="translate(-322.5 290.2) rotate(-27.1)" style="fill: #ffe029"/> <circle cx="442.4" cy="793.8" r="3.7" transform="translate(-313.2 288.9) rotate(-27.1)" style="fill: #ffe029"/> <circle cx="458.6" cy="786" r="3.7" transform="translate(-307.8 295.4) rotate(-27.1)" style="fill: #ffe029"/> <circle cx="475" cy="779.1" r="3.7" transform="translate(-302.9 302.1) rotate(-27.1)" style="fill: #ffe029"/> <circle cx="491.8" cy="772.4" r="3.7" transform="translate(-298 309) rotate(-27.1)" style="fill: #ffe029"/> <circle cx="506.6" cy="784" r="3.7" transform="translate(-301.7 317.1) rotate(-27.1)" style="fill: #ffe029"/> <circle cx="504.6" cy="802.3" r="3.7" transform="translate(-310.2 318.2) rotate(-27.1)" style="fill: #ffe029"/> <circle cx="519.7" cy="812.9" r="3.7" transform="translate(-313.4 326.2) rotate(-27.1)" style="fill: #ffe029"/> <circle cx="534.7" cy="822.9" r="3.7" transform="translate(-316.3 334.1) rotate(-27.1)" style="fill: #ffe029"/> <circle cx="536.8" cy="805.3" r="3.7" transform="translate(-308 333.2) rotate(-27.1)" style="fill: #ffe029"/> <circle cx="539.2" cy="787.7" r="3.7" transform="translate(-299.8 332.3) rotate(-27.1)" style="fill: #ffe029"/> <circle cx="541.8" cy="770.3" r="3.7" transform="translate(-291.5 331.6) rotate(-27.1)" style="fill: #ffe029"/> <circle cx="559.9" cy="763.5" r="3.7" transform="translate(-286.4 339.1) rotate(-27.1)" style="fill: #ffe029"/> <circle cx="556.9" cy="780.7" r="3.7" transform="translate(-294.6 339.6) rotate(-27.1)" style="fill: #ffe029"/> <circle cx="554.5" cy="797.9" r="3.7" transform="translate(-302.7 340.4) rotate(-27.1)" style="fill: #ffe029"/> <circle cx="552" cy="815.2" r="3.7" transform="translate(-310.9 341.2) rotate(-27.1)" style="fill: #ffe029"/> <circle cx="570.5" cy="807.2" r="3.7" transform="translate(-305.2 348.7) rotate(-27.1)" style="fill: #ffe029"/> <circle cx="572.5" cy="790.5" r="3.7" transform="translate(-297.3 347.8) rotate(-27.1)" style="fill: #ffe029"/> <circle cx="589.7" cy="797.2" r="3.7" transform="translate(-298.5 356.4) rotate(-27.1)" style="fill: #ffe029"/> <circle cx="590" cy="782.3" r="3.7" transform="translate(-291.7 354.8) rotate(-27.1)" style="fill: #ffe029"/> <circle cx="608.2" cy="784.4" r="3.7" transform="translate(-290.7 363.4) rotate(-27.1)" style="fill: #ffe029"/> <circle cx="612.4" cy="765.8" r="3.7" transform="translate(-281.7 363.2) rotate(-27.1)" style="fill: #ffe029"/> <circle cx="627.4" cy="776" r="3.7" transform="translate(-284.7 371.2) rotate(-27.1)" style="fill: #ffe029"/> <circle cx="630.6" cy="758.5" r="3.7" transform="translate(-276.4 370.8) rotate(-27.1)" style="fill: #ffe029"/> <circle cx="647" cy="766.1" r="3.7" transform="translate(-278 379) rotate(-27.1)" style="fill: #ffe029"/> <circle cx="664.8" cy="756.4" r="3.7" transform="translate(-271.7 386.1) rotate(-27.1)" style="fill: #ffe029"/> <circle cx="682.7" cy="749.2" r="3.6" transform="translate(-266.4 393.5) rotate(-27.1)" style="fill: #ffe029"/> <circle cx="662.5" cy="737.6" r="3.7" transform="translate(-263.4 383) rotate(-27.1)" style="fill: #ffe029"/> <circle cx="648" cy="747.5" r="3.7" transform="translate(-269.4 377.5) rotate(-27.1)" style="fill: #ffe029"/> <circle cx="643.5" cy="727.1" r="3.7" transform="translate(-260.6 373.2) rotate(-27.1)" style="fill: #ffe029"/> <circle cx="632.9" cy="740.8" r="3.7" transform="translate(-268.1 369.9) rotate(-27.1)" style="fill: #ffe029"/> <circle cx="620.9" cy="729.6" r="3.7" transform="translate(-264.3 363.2) rotate(-27.1)" style="fill: #ffe029"/> <circle cx="626.6" cy="714" r="3.7" transform="translate(-256.6 364.1) rotate(-27.1)" style="fill: #ffe029"/> <circle cx="609.2" cy="701.3" r="3.6" transform="translate(-252.7 354.7) rotate(-27.1)" style="fill: #ffe029"/> <circle cx="606.7" cy="718.2" r="3.7" transform="translate(-260.6 355.4) rotate(-27.1)" style="fill: #ffe029"/> <circle cx="615.7" cy="747.7" r="3.7" transform="translate(-273.1 362.8) rotate(-27.1)" style="fill: #ffe029"/> <circle cx="602.2" cy="735.1" r="3.7" transform="translate(-268.8 355.3) rotate(-27.1)" style="fill: #ffe029"/> <circle cx="583.1" cy="740.9" r="3.7" transform="translate(-273.6 347.2) rotate(-27.1)" style="fill: #ffe029"/> <circle cx="597.9" cy="751.8" r="3.7" transform="translate(-276.9 355.1) rotate(-27.1)" style="fill: #ffe029"/> <circle cx="594.7" cy="767.9" r="3.7" transform="translate(-284.6 355.4) rotate(-27.1)" style="fill: #ffe029"/> <circle cx="574.7" cy="773.4" r="3.7" transform="translate(-289.3 346.9) rotate(-27.1)" style="fill: #ffe029"/> <circle cx="579.2" cy="757.5" r="3.7" transform="translate(-281.6 347.2) rotate(-27.1)" style="fill: #ffe029"/> <circle cx="564" cy="747.1" r="3.7" transform="translate(-278.5 339.2) rotate(-27.1)" style="fill: #ffe029"/> <circle cx="568" cy="730.7" r="3.7" transform="translate(-270.6 339.2) rotate(-27.1)" style="fill: #ffe029"/> <circle cx="571.9" cy="714.5" r="3.7" transform="translate(-262.8 339.2) rotate(-27.1)" style="fill: #ffe029"/> <circle cx="587.4" cy="724.6" r="3.7" transform="translate(-265.7 347.3) rotate(-27.1)" style="fill: #ffe029"/> <circle cx="590.7" cy="708.2" r="3.7" transform="translate(-257.8 347) rotate(-27.1)" style="fill: #ffe029"/> <circle cx="591.4" cy="691.3" r="3.7" transform="translate(-250.1 345.5) rotate(-27.1)" style="fill: #ffe029"/> <circle cx="574.1" cy="698.1" r="3.7" transform="translate(-255.1 338.4) rotate(-27.1)" style="fill: #ffe029"/> <circle cx="574.8" cy="681.2" r="3.7" transform="translate(-247.3 336.8) rotate(-27.1)" style="fill: #ffe029"/> <circle cx="559.1" cy="669.7" r="3.7" transform="translate(-243.8 328.4) rotate(-27.1)" style="fill: #ffe029"/> <circle cx="558.2" cy="686.9" r="3.7" transform="translate(-251.7 329.9) rotate(-27.1)" style="fill: #ffe029"/> <circle cx="542.7" cy="675.8" r="3.7" transform="translate(-248.3 321.6) rotate(-27.1)" style="fill: #ffe029"/> <circle cx="542.5" cy="658.8" r="3.7" transform="translate(-240.6 319.6) rotate(-27.1)" style="fill: #ffe029"/> <circle cx="526.3" cy="682.4" r="3.7" transform="translate(-253.2 314.8) rotate(-27.1)" style="fill: #ffe029"/> <circle cx="522.2" cy="697.3" r="3.7" transform="translate(-260.4 314.6) rotate(-27.1)" style="fill: #ffe029"/> <circle cx="518.7" cy="713.5" r="3.7" transform="translate(-268.2 314.8) rotate(-27.1)" style="fill: #ffe029"/> <circle cx="533.7" cy="725.5" r="3.7" transform="translate(-272 323) rotate(-27.1)" style="fill: #ffe029"/> <circle cx="537.5" cy="709.2" r="3.7" transform="translate(-264.1 322.9) rotate(-27.1)" style="fill: #ffe029"/> <circle cx="541.1" cy="692.9" r="3.7" transform="translate(-256.4 322.8) rotate(-27.1)" style="fill: #ffe029"/> <circle cx="556.3" cy="703.9" r="3.7" transform="translate(-259.7 330.9) rotate(-27.1)" style="fill: #ffe029"/> <circle cx="552.7" cy="720.2" r="3.7" transform="translate(-267.5 331.1) rotate(-27.1)" style="fill: #ffe029"/> <circle cx="548.8" cy="736.6" r="3.7" transform="translate(-275.4 331.1) rotate(-27.1)" style="fill: #ffe029"/> <circle cx="544.9" cy="753.1" r="3.7" transform="translate(-283.3 331.1) rotate(-27.1)" style="fill: #ffe029"/> <circle cx="530" cy="742.2" r="3.7" transform="translate(-280 323.1) rotate(-27.1)" style="fill: #ffe029"/> <circle cx="526.7" cy="759.5" r="3.7" transform="translate(-288.3 323.5) rotate(-27.1)" style="fill: #ffe029"/> <circle cx="524" cy="777" r="3.7" transform="translate(-296.5 324.2) rotate(-27.1)" style="fill: #ffe029"/> <circle cx="521.6" cy="794.8" r="3.7" transform="translate(-304.9 325.1) rotate(-27.1)" style="fill: #ffe029"/> <circle cx="509" cy="765.9" r="3.7" transform="translate(-293.1 316.1) rotate(-27.1)" style="fill: #ffe029"/> <circle cx="512" cy="748.1" r="3.7" transform="translate(-284.7 315.5) rotate(-27.1)" style="fill: #ffe029"/> <circle cx="515.2" cy="730.5" r="3.7" transform="translate(-276.3 315.1) rotate(-27.1)" style="fill: #ffe029"/> <circle cx="501" cy="717.2" r="3.7" transform="translate(-271.8 307.1) rotate(-27.1)" style="fill: #ffe029"/> <circle cx="487.1" cy="704.7" r="3.7" transform="translate(-267.6 299.4) rotate(-27.1)" style="fill: #ffe029"/> <circle cx="473" cy="692.5" r="3.7" transform="translate(-263.6 291.7) rotate(-27.1)" style="fill: #ffe029"/> <circle cx="491" cy="685.7" r="3.7" transform="translate(-258.6 299.1) rotate(-27.1)" style="fill: #ffe029"/> <circle cx="504.9" cy="698.3" r="3.7" transform="translate(-262.8 306.8) rotate(-27.1)" style="fill: #ffe029"/> <circle cx="508.9" cy="678.8" r="3.7" transform="translate(-253.5 306.5) rotate(-27.1)" style="fill: #ffe029"/> <circle cx="509.4" cy="658.3" r="3.7" transform="translate(-244 304.5) rotate(-27.1)" style="fill: #ffe029"/> <circle cx="525.2" cy="666.5" r="3.7" transform="translate(-246 312.6) rotate(-27.1)" style="fill: #ffe029"/> <circle cx="525.8" cy="649.3" r="3.7" transform="translate(-238.1 311) rotate(-27.1)" style="fill: #ffe029"/> <circle cx="510.2" cy="638.9" r="3.7" transform="translate(-235.1 302.7) rotate(-27.1)" style="fill: #ffe029"/> <circle cx="494.3" cy="646.3" r="3.7" transform="translate(-240.2 296.3) rotate(-27.1)" style="fill: #ffe029"/> <circle cx="478.7" cy="654.5" r="3.7" transform="translate(-245.7 290.1) rotate(-27.1)" style="fill: #ffe029"/> <circle cx="477.7" cy="634.1" r="3.7" transform="translate(-236.5 287.4) rotate(-27.1)" style="fill: #ffe029"/> <circle cx="493.3" cy="627.1" r="3.7" transform="translate(-231.6 293.7) rotate(-27.1)" style="fill: #ffe029"/> <circle cx="473.7" cy="616.2" r="3.7" transform="translate(-228.8 283.6) rotate(-27.1)" style="fill: #ffe029"/> <circle cx="456.1" cy="605.3" r="3.7" transform="translate(-225.7 274.4) rotate(-27.1)" style="fill: #ffe029"/> <circle cx="455.7" cy="625.5" r="3.7" transform="translate(-235 276.4) rotate(-27.1)" style="fill: #ffe029"/> <circle cx="435.9" cy="631.7" r="3.7" transform="translate(-240 268.1) rotate(-27.1)" style="fill: #ffe029"/> <circle cx="438.4" cy="612.9" r="3.7" transform="translate(-231.2 267.2) rotate(-27.1)" style="fill: #ffe029"/> <circle cx="438.5" cy="592.7" r="3.7" transform="translate(-221.9 265) rotate(-27.1)" style="fill: #ffe029"/> <circle cx="420" cy="579.2" r="3.2" transform="translate(-217.8 255.1) rotate(-27.1)" style="fill: #ffe029"/> <circle cx="421.9" cy="600.1" r="3.7" transform="translate(-227.1 258.3) rotate(-27.1)" style="fill: #ffe029"/> <circle cx="419.3" cy="619.8" r="3.6" transform="translate(-236.4 259.2) rotate(-27.1)" style="fill: #ffe029"/> <circle cx="418.1" cy="640.2" r="3.6" transform="translate(-245.8 260.9) rotate(-27.1)" style="fill: #ffe029"/> <circle cx="431.9" cy="652.7" r="3.7" transform="translate(-250 268.6) rotate(-27.1)" style="fill: #ffe029"/> <circle cx="448" cy="645.9" r="3.7" transform="translate(-245.1 275.2) rotate(-27.1)" style="fill: #ffe029"/> <circle cx="464.1" cy="642.8" r="3.7" transform="translate(-241.9 282.2) rotate(-27.1)" style="fill: #ffe029"/> <circle cx="461.6" cy="661.1" r="3.7" transform="translate(-250.6 283) rotate(-27.1)" style="fill: #ffe029"/> <circle cx="493.7" cy="666.7" r="3.7" transform="translate(-249.6 298.3) rotate(-27.1)" style="fill: #ffe029"/> <circle cx="476.4" cy="673.6" r="3.7" transform="translate(-254.7 291.1) rotate(-27.1)" style="fill: #ffe029"/> <circle cx="458.8" cy="680.1" r="3.7" transform="translate(-259.5 283.8) rotate(-27.1)" style="fill: #ffe029"/> <circle cx="444.8" cy="666.4" r="3.7" transform="translate(-254.8 276) rotate(-27.1)" style="fill: #ffe029"/> <circle cx="428.4" cy="674" r="3.7" transform="translate(-260.1 269.3) rotate(-27.1)" style="fill: #ffe029"/> <circle cx="416.4" cy="661.3" r="3.5" transform="translate(-255.6 262.5) rotate(-27.1)" style="fill: #ffe029"/> <circle cx="412.6" cy="683.2" r="2.9" transform="translate(-266 263.1) rotate(-27.1)" style="fill: #ffe029"/> <circle cx="424.1" cy="694" r="3.7" transform="translate(-269.7 269.6) rotate(-27.1)" style="fill: #ffe029"/> <circle cx="441.6" cy="686.6" r="3.7" transform="translate(-264.4 276.7) rotate(-27.1)" style="fill: #ffe029"/> <circle cx="436.5" cy="706" r="3.7" transform="translate(-273.8 276.5) rotate(-27.1)" style="fill: #ffe029"/> <circle cx="415.6" cy="709.6" r="3.7" transform="translate(-277.7 267.4) rotate(-27.1)" style="fill: #ffe029"/> <circle cx="412.9" cy="730.2" r="3.4" transform="translate(-287.4 268.4) rotate(-27.1)" style="fill: #ffe029"/> <circle cx="412.3" cy="751.3" r="3.6" transform="translate(-297.1 270.5) rotate(-27.1)" style="fill: #ffe029"/> <circle cx="428.8" cy="742.4" r="3.7" transform="translate(-291.2 277) rotate(-27.1)" style="fill: #ffe029"/> <circle cx="430.7" cy="723.3" r="3.7" transform="translate(-282.3 275.8) rotate(-27.1)" style="fill: #ffe029"/> <circle cx="450.4" cy="717.8" r="3.7" transform="translate(-277.7 284.2) rotate(-27.1)" style="fill: #ffe029"/> <circle cx="455" cy="699.3" r="3.7" transform="translate(-268.7 284.2) rotate(-27.1)" style="fill: #ffe029"/> <circle cx="469" cy="711.4" r="3.7" transform="translate(-272.7 291.9) rotate(-27.1)" style="fill: #ffe029"/> <circle cx="483.2" cy="723.4" r="3.7" transform="translate(-276.6 299.7) rotate(-27.1)" style="fill: #ffe029"/> <circle cx="479.7" cy="741.7" r="3.7" transform="translate(-285.3 300.1) rotate(-27.1)" style="fill: #ffe029"/> <circle cx="497.5" cy="735.7" r="3.7" transform="translate(-280.6 307.6) rotate(-27.1)" style="fill: #ffe029"/> <circle cx="494.4" cy="753.9" r="3.7" transform="translate(-289.3 308.2) rotate(-27.1)" style="fill: #ffe029"/> <circle cx="477" cy="760.1" r="3.7" transform="translate(-294 300.9) rotate(-27.1)" style="fill: #ffe029"/> <circle cx="460" cy="766.8" r="3.7" transform="translate(-298.9 293.9) rotate(-27.1)" style="fill: #ffe029"/> <circle cx="462" cy="748" r="3.7" transform="translate(-290.1 292.7) rotate(-27.1)" style="fill: #ffe029"/> <circle cx="465.1" cy="729.7" r="3.7" transform="translate(-281.5 292.1) rotate(-27.1)" style="fill: #ffe029"/> <circle cx="446.6" cy="735.7" r="3.7" transform="translate(-286.2 284.4) rotate(-27.1)" style="fill: #ffe029"/> <circle cx="444.7" cy="754.5" r="3.7" transform="translate(-295 285.6) rotate(-27.1)" style="fill: #ffe029"/> <circle cx="443.6" cy="774" r="3.7" transform="translate(-304 287.2) rotate(-27.1)" style="fill: #ffe029"/> <circle cx="427.5" cy="782.4" r="3.7" transform="translate(-309.6 280.8) rotate(-27.1)" style="fill: #ffe029"/> <circle cx="428.1" cy="762.4" r="3.7" transform="translate(-300.4 278.9) rotate(-27.1)" style="fill: #ffe029"/> <circle cx="412" cy="771.5" r="3.6" transform="translate(-306.3 272.5) rotate(-27.1)" style="fill: #ffe029"/> <circle cx="411" cy="791.3" r="3.7" transform="translate(-315.5 274.3) rotate(-27.1)" style="fill: #ffe029"/> <circle cx="426" cy="802.5" r="3.7" transform="translate(-318.9 282.3) rotate(-27.1)" style="fill: #ffe029"/> <circle cx="410" cy="811.3" r="3.7" transform="translate(-324.7 276) rotate(-27.1)" style="fill: #ffe029"/> <circle cx="423.8" cy="822.7" r="3.7" transform="translate(-328.4 283.6) rotate(-27.1)" style="fill: #ffe029"/> <circle cx="439.3" cy="833.1" r="3.7" transform="translate(-331.4 291.8) rotate(-27.1)" style="fill: #ffe029"/> <circle cx="4.........完整代码请登录后点击上方下载按钮下载查看
网友评论0