TweenMax+svg实现大熊猫激光工厂运转动画效果代码
代码语言:html
所属分类:动画
代码描述:TweenMax+svg实现大熊猫激光工厂运转动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <link href='https://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'> <style> /* ------------------------------------* BEST VIEWED FULL-SCREEN: https://codepen.io/sdras/full/waXKPw/ *--------------------------------------*/ body { font-family: 'Oswald', sans-serif; color: white; width: 100%; height: 100%; margin: 0; padding: 0; background: #91CAC7; } h2 { font-weight: normal; width: 90%; margin-left: 5%; text-align: center; } svg { transition: all 0.5s ease; } .size { position: absolute; right: 0; top: 20px; width: 70px; height: 115px; letter-spacing: 0.02em; opacity: 0.65; font-size: 15px; padding: 20px; border-radius: 10px 0 0 10px; background: #4E3440; } .container { width: 900px; margin: 10px auto; } .first { height: auto; z-index: 30; } .second { z-index: 50; height: auto; } .third { height: auto; z-index: 1; } #button, #handle1, #handle2 { cursor: pointer; position: relative; z-index: 5000; } #smoke circle, #smoke path, #paint, #panda, #panda2, #panda3 { visibility: hidden; } @media screen and (max-width: 730px) { .container { width: 100% !important; } .sm-foot { display: none; } svg { position: relative; } .size { display: none; } .first { width: 100%; } .second { width: 70%; top: -90px; margin-left: 70px; transform: scaleX(-1) !important; } .third { width: 60%; margin-left: 70px; top: -135px; } } @media screen and (min-width: 731px) { .foot { display: none; } svg { position: absolute; } .first { width: 550px; } .second { width: 350px; margin-left: 365px; top: 370px !important; } .third { width: 330px; top: 514px !important; } } </style> </head> <body > <div class="container"> <h2>Click the hotspots to make Huggy Laser Pandas</h2> <div class="size">Size the browser window down horizontally</div> <svg class="first" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 468.4"> <path fill="#FFF" d="M299.7 150v-39.9c0-2.7-2.2-4.9-4.9-4.9h-39.4v-.7h39.4c3.1 0 5.6 2.5 5.6 5.6V150h-.7z" /> <path fill-rule="evenodd" clip-rule="evenodd" fill="#4E3440" d="M225.3 20.9h1.2v68.9h-1.2zM231.9 112.4h2.3v161.7h-2.3z" /> <path fill="#FFF" d="M330.1 211.9v-6.8c0-2.7-2.2-4.9-4.9-4.9h-9.3v-.7h9.3c3.1 0 5.6 2.5 5.6 5.6v6.8h-.7z" /> <path fill="#4E3440" d="M298.9 167h2.3v4.8h-2.3z" /> <path fill-rule="evenodd" clip-rule="evenodd" fill="#EAEAEA" d="M321.3 193.2c0 11.9-9.6 21.5-21.5 21.5s-21.5-9.6-21.5-21.5 9.6-21.5 21.5-21.5 21.5 9.6 21.5 21.5z" /> <path fill-rule="evenodd" clip-rule="evenodd" fill="#FFF" d="M284.5 178c-8.4 8.4-8.4 22 0 30.4l30.4-30.4c-8.4-8.4-22-8.4-30.4 0z" /> <path fill="#FFF" d="M270 184.7c0 .6-.5 1.1-1.1 1.1h-3.6c-.6 0-1.1-.5-1.1-1.1 0-.6.5-1.1 1.1-1.1h3.6c.6 0 1.1.5 1.1 1.1z" /> <path fill="#FFF" d="M267.9 173.1V186c0 2.7 2.2 4.9 4.9 4.9h24.6v1.5h-24.6c-3.5 0-6.4-2.9-6.4-6.4v-12.9h1.5z" /> <path fill="#EAEAEA" d="M274.7 175.7c0 4.2-3.4 7.6-7.6 7.6-4.2 0-7.6-3.4-7.6-7.6 0-4.2 3.4-7.6 7.6-7.6 4.2 0 7.6 3.4 7.6 7.6z" /> <path fill="#FFF" d="M263 181.8c-3.4-2.4-4.3-7.1-1.9-10.5 2.4-3.4 7.1-4.3 10.5-1.9-3.4 4.7-4 5.8-8.6 12.4z" /> <path fill="#4E3440" d="M267.1 183.7c-4.4 0-8-3.6-8-8s3.6-8 8-8 8 3.6 8 8-3.6 8-8 8zm0-15.2c-3.9 0-7.2 3.2-7.2 7.1 0 3.9 3.2 7.2 7.2 7.2 3.9 0 7.2-3.2 7.2-7.2 0-3.9-3.3-7.1-7.2-7.1z" /> <path fill="#4E3440" d="M266.1 176.2c-.3-.4-.3-1.1.2-1.4.4-.3 1.1-.3 1.4.2.3.5 2 4.3 2 4.3s-3.3-2.7-3.6-3.1z" /> <path fill="#FFF" d="M259.5 264.2v-28.3c0-2.7 2.2-4.9 4.9-4.9h19.5v-.7h-19.5c-3.1 0-5.6 2.5-5.6 5.6v28.3h.7zM259.8 209.4c0 4.1-3.3 7.4-7.4 7.4-4.1 0-7.4-3.3-7.4-7.4 0-4.1 3.3-7.4 7.4-7.4 4.1 0 7.4 3.3 7.4 7.4z" /> <path fill="#368426" d="M247.6 211.3c.6 2.1 2.6 3.6 4.8 3.6 2.3 0 4.2-1.5 4.8-3.6h-9.6z" /> <path fill="#FFF" d="M299.7 137.7v13.5c0 2.7-2.2 4.9-4.9 4.9h-31.9v.7h31.9c3.1 0 5.6-2.5 5.6-5.6v-13.5h-.7zM330.1 211.8v13.8c0 2.7-2.2 4.9-4.9 4.9h-1.6v.7h1.6c3.1 0 5.6-2.5 5.6-5.6v-13.8h-.7z" /> <g fill="#FFF"> <path d="M242.1 264.5v-20.8c0-2.7 2.2-4.9 4.9-4.9h14.6v-.7H247c-3.1 0-5.6 2.5-5.6 5.6v20.8h.7zM209.5 190.3v52.4c0 2.7-2.2 4.9-4.9 4.9h-51.8v.7h51.8c3.1 0 5.6-2.5 5.6-5.6v-52.4h-.7z" /> <path d="M267.6 219.4v13.8c0 2.7-2.2 4.9-4.9 4.9H261v.7h1.6c3.1 0 5.6-2.5 5.6-5.6v-13.8h-.6zM237.4 195.2v-6.8c0-2.7-2.2-4.9-4.9-4.9h-9.3v-.7h9.3c3.1 0 5.6 2.5 5.6 5.6v6.8h-.7z" /> <path d="M267.6 221.8V215c0-2.7-2.2-4.9-4.9-4.9h-9.3v-.7h9.3c3.1 0 5.6 2.5 5.6 5.6v6.8h-.7zM253.3 209.4H243c-2.7 0-4.9-2.2-4.9-4.9v-9.3h-.7v9.3c0 3.1 2.5 5.6 5.6 5.6h10.3v-.7zM210.2 195.2v-6.8c0-2.7 2.2-4.9 4.9-4.9H228v-.7h-12.9c-3.1 0-5.6 2.5-5.6 5.6v6.8h.7zM144.3 260v-6.8c0-2.7 2.2-4.9 4.9-4.9h12.9v-.7h-12.9c-3.1 0-5.6 2.5-5.6 5.6v6.8h.7z" /> </g> <path fill="#FFF" d="M252.7 206.3v-44.4c0-2.7 2.2-4.9 4.9-4.9h12.9v-.7h-12.9c-3.1 0-5.6 2.5-5.6 5.6v44.4h.7zM318.6 235.6c-2.8 0-5.1-2.3-5.1-5.1s2.3-5.1 5.1-5.1 5.1 2.3 5.1 5.1-2.3 5.1-5.1 5.1zm0-9.5c-2.4 0-4.4 2-4.4 4.4 0 2.4 2 4.4 4.4 4.4 2.4 0 4.4-2 4.4-4.4 0-2.4-2-4.4-4.4-4.4z" /> <path fill="#FFF" d="M312.6 235.6c-2.8 0-5.1-2.3-5.1-5.1s2.3-5.1 5.1-5.1 5.1 2.3 5.1 5.1-2.2 5.1-5.1 5.1zm0-9.5c-2.4 0-4.4 2-4.4 4.4 0 2.4 2 4.4 4.4 4.4 2.4 0 4.4-2 4.4-4.4 0-2.4-1.9-4.4-4.4-4.4z" /> <path fill="#FFF" d="M306.7 235.6c-2.8 0-5.1-2.3-5.1-5.1s2.3-5.1 5.1-5.1 5.1 2.3 5.1 5.1-2.3 5.1-5.1 5.1zm0-9.5c-2.4 0-4.4 2-4.4 4.4 0 2.4 2 4.4 4.4 4.4 2.4 0 4.4-2 4.4-4.4 0-2.4-2-4.4-4.4-4.4z" /> <path fill="#FFF" d="M300.8 235.6c-2.8 0-5.1-2.3-5.1-5.1s2.3-5.1 5.1-5.1 5.1 2.3 5.1 5.1-2.3 5.1-5.1 5.1zm0-9.5c-2.4 0-4.4 2-4.4 4.4 0 2.4 2 4.4 4.4 4.4 2.4 0 4.4-2 4.4-4.4 0-2.4-2-4.4-4.4-4.4z" /> <path fill="#FFF" d="M294.9 235.6c-2.8 0-5.1-2.3-5.1-5.1s2.3-5.1 5.1-5.1 5.1 2.3 5.1 5.1-2.3 5.1-5.1 5.1zm0-9.5c-2.4 0-4.4 2-4.4 4.4 0 2.4 2 4.4 4.4 4.4 2.4 0 4.4-2 4.4-4.4 0-2.4-2-4.4-4.4-4.4z" /> <path fill="#FFF" d="M288.9 235.6c-2.8 0-5.1-2.3-5.1-5.1s2.3-5.1 5.1-5.1 5.1 2.3 5.1 5.1-2.3 5.1-5.1 5.1zm0-9.5c-2.4 0-4.4 2-4.4 4.4 0 2.4 2 4.4 4.4 4.4 2.4 0 4.4-2 4.4-4.4 0-2.4-2-4.4-4.4-4.4z" /> <path opacity=".1" fill="#111135" d="M258.4 213.6c2.3-3.3 1.5-7.9-1.7-10.2l-8.4 12c3.3 2.3 7.8 1.5 10.1-1.8z" /> <path fill-rule="evenodd" clip-rule="evenodd" fill="#4E3440" d="M219.4 112.5c0 .9.7 1.7 1.7 1.7h25.3c.9 0 1.7-.7 1.7-1.7 0-.9-.7-1.7-1.7-1.7h-25.3c-.9.1-1.7.8-1.7 1.7z" /> <path id="light" fill-rule="evenodd" clip-rule="evenodd" fill="#E8E4E5" d="M205.1 203c0-8.4-6.9-15.2-15.3-15.2s-15.2 6.8-15.2 15.2c0 5.9 3.3 11 8.3 13.5v7c0 3.9 3.1 7 7 7s7-3.1 7-7v-7c5.1-2.5 8.2-7.6 8.2-13.5z" /> <path fill-rule="evenodd" clip-rule="evenodd" fill="#4E3440" d="M182.8 223.1v4.6c0 3.9 3.1 7 7 7s7-3.1 7-7v-4.6h-14z" /> <path fill-rule="evenodd" clip-rule="evenodd" fill="#FFF" d="M182.8 201.8h14v2.3h-14z" /> <path fill-rule="evenodd" clip-rule="evenodd" fill="#FFF" d="M188.7 196h2.3v14h-2.3z" /> <path opacity=".1" fill-rule="evenodd" clip-rule="evenodd" fill="#111135" d="M193 188.1c-6.9 1.5-12 7.6-12 14.9 0 5.9 3.3 11 8.2 13.5v11.2c0 2.7 1.6 5.1 3.8 6.2 2.3-1.2 3.8-3.5 3.8-6.2v-11.2c4.9-2.5 8.2-7.6 8.2-13.5 0-7.3-5.1-13.4-12-14.9z" /> <path fill-rule="evenodd" clip-rule="evenodd" fill="#4E3440" d="M297.3 218.1c0 .7-.5 1.2-1.2 1.2h-73.7c-.7 0-1.2-.5-1.2-1.2s.5-1.2 1.2-1.2h73.7c.7 0 1.2.5 1.2 1.2z" /> <path fill="#E4311B" d="M299.8 216.1c-12.7 0-23-10.3-23-23s10.3-23 23-23 23 10.3 23 23-10.3 23-23 23zm0-42.9c-11 0-20 9-20 20s9 20 20 20 20-9 20-20-8.9-20-20-20z" /> <path id="needle3" fill="#4E3440" d="M301.9 192.1c1 1.2.9 3-.3 4s-3 .9-4-.3-6.3-11.7-6.3-11.7 9.6 6.8 10.6 8z" /> <path fill="#4E3440" d="M299.4 176.1h1v2.4h-1zM297.8 178.6l-1 .2-.4-2.4 1-.1zM293.528 177.348l.94-.342.82 2.255-.94.343zM292.9 180.2l-.8.5-1.2-2.1.8-.4zM288.53 180.39l.764-.644 1.546 1.836-.765.644zM288.9 183.4l-.6.7-1.8-1.5.6-.7zM287.4 185.4l-.5.9-2.1-1.2.5-.9zM286.2 187.7l-.3.9-2.2-.8.3-.9zM285.5 190.2l-.2.9-2.3-.4.2-.9zM285.2 192.7v1h-2.4v-1zM285.3 195.3l.2.9-2.3.5-.2-1zM285.9 197.8l.4.9-2.3.8-.3-.9zM286.9 200.1l.5.9-2 1.2-.5-.9zM287.114 204.55l-.642-.768 1.84-1.54.642.767zM289.34 206.612l-.765-.646 1.55-1.832.764.646zM292.2 205.7l.8.5-1.2 2-.8-.5zM294.5 206.8l.9.4-.8 2.2-1-.3zM296.9 207.6l1 .2-.4 2.3-1-.2zM299.5 207.9h1v2.4h-1zM302 207.7l1-.1.4 2.3-1 .2zM304.5 207.2l.9-.4.8 2.2-.9.4zM306.9 206.1l.8-.4 1.2 2-.8.5zM309 204.7l.8-.6 1.5 1.8-.7.6zM310.9 203l.6-.8 1.8 1.5-.6.8zM312.4 200.9l.5-.8 2.1 1.1-.5.9zM316.11 198.532l-.344.94-2.254-.824.343-.94zM314.3 196.2l.2-1 2.3.4-.2 1zM314.6 193.6v-1h2.4v1zM314.5 191l-.2-.9 2.3-.4.2.9zM313.9 188.5l-.3-.9 2.2-.8.3.9zM312.9 186.2l-.5-.8 2-1.2.5.8zM312.69 181.792l.642.766-1.84 1.54-.642-.766zM309.7 182.2l-.7-.6 1.5-1.9.7.7zM307.6 180.6l-.8-.4 1.2-2.1.8.5zM305.3 179.5l-.9-.3.9-2.3.9.4zM302.293 176.234l.985.17-.41 2.366-.986-.17z" /> <path fill="#C45314" d="M309.1 218.1c0 1.4-1.1 2.6-2.6 2.6h-13.1c-1.4 0-2.6-1.1-2.6-2.6 0-1.4 1.1-2.6 2.6-2.6h13.1c1.4.1 2.6 1.2 2.6 2.6z" /> <circle fill="#C45314" cx="300" cy="164.9" r="3.7" /> <path fill-rule="evenodd" clip-rule="evenodd" fill="#D1D1D1" d="M232.4 215.8c1.3-.2 2.5.6 2.7 1.8.2 1.3-.6 2.5-1.8 2.7-1.3.2-2.5-.6-2.7-1.8-.2-1.2.6-2.4 1.8-2.7z" /> <path fill="#FFF" d="M235.7 217.6c.3 1.5-.7 3-2.3 3.3-1.5.3-3-.7-3.3-2.2-.3-1.5.7-3 2.3-3.3 1.5-.4 3 .6 3.3 2.2zm-4.6.9c.2 1 1.1 1.6 2.1 1.4 1-.2 1.6-1.1 1.4-2.1-.2-1-1.1-1.6-2.1-1.4-.9.1-1.6 1.1-1.4 2.1z" /> <path fill-rule="evenodd" clip-rule="evenodd" fill="#8E8E8E" d="M233.3 216.5c.2.1.3.3.3.5l-.7 2.5c-.1.2-.3.3-.5.3-.2-.1-.3-.3-.3-.5l.7-2.5c.1-.2.3-.4.5-.3z" /> <path fill="#E4311B" d="M245.3 19.1c0 1.8-1.5 3.2-3.2 3.2h-17c-1.8 0-3.2-1.5-3.2-3.2 0-1.8 1.5-3.2 3.2-3.2h17c1.8 0 3.2 1.4 3.2 3.2z" /> <g id="windmill"> <path fill="#FFF" d="M243.4 14.5h-2.6l-1.7-8.3h5.9z" /> <path fill="#E2E2E2" d="M242.1 6.2h-3l1.7 8.3h1.3z" /> <path fill="#FFF" d="M240.1 14.7l-1.9 1.7-6.6-5.3 4.5-3.7z" /> <path fill="#E2E2E2" d="M233.8 9.2l-2.2 1.9 6.6 5.3 1-.8z" /> <path fill="#FFF" d="M237.8 17l-.4 2.5-8.4.2 1-5.8z" /> <path fill="#E2E2E2" d="M229.5 16.8l-.5 2.9 8.4-.2.2-1.2z" /> <path fill="#FFF" d="M237.5 20.2l1.3 2.2-6.3 5.6-2.9-5.1z" /> <path fill="#E2E2E2" d="M231 25.4l1.5 2.6 6.3-5.6-.6-1.1z" /> <path fill="#FFF" d="M239.4 22.9l2.4.8-1.3 8.4-5.5-2z" /> <path fill="#E2E2E2" d="M237.8 31.1l2.7 1 1.3-8.4-1.2-.4z" /> <g> <path fill="#FFF" d="M242.5 23.7l2.4-.9 4.4 7.2-5.5 2z" /> <path fill="#E2E2E2" d="M246.5 31l2.8-1-4.4-7.2-1.2.5z" /> </g> <g> <path fill="#FFF" d="M245.4 22.4l1.3-2.3 8 2.8-3 5z" /> <path fill="#E2E2E2" d="M253.2 25.4l1.5-2.5-8-2.8-.6 1.2z" /> </g> <g> <path fill="#FFF" d="M246.8 19.5l-.5-2.6 7.9-3 1 5.7z" /> <path fill="#E2E2E2" d="M254.7 16.8l-.5-2.9-7.9 3 .3 1.3z" /> </g> <g> <path fill="#FFF" d="M246 16.3l-2-1.6 4.1-7.4 4.4 3.8z" /> <path fill="#E2E2E2" d="M250.3 9.2l-2.2-1.9-4.1 7.4 1 .8z" /> </g> </g> <circle fill="#FFF" cx="242.2" cy="19.1" r="2.2" /> <path fill="#FFF" d="M233.3 86.6c-12.5 0-22.6 10.1-22.6 22.6h45.2c0-12.5-10.1-22.6-22.6-22.6z" /> <path fill="#4E3440" d="M232.6 88.9h1.1v2.8h-1.1zM230.7 91.8l-1.1.2-.5-2.7 1.2-.2zM225.74 90.292l1.033-.377.96 2.63-1.034.377zM225 93.7l-1 .6-1.4-2.4 1-.6zM222.5 95.4l-.9.7-1.8-2.1.9-.7zM220.3 97.5l-.8.9-2.1-1.8.7-.9zM218.5 99.9l-.6 1-2.4-1.4.5-1zM217.1 102.6l-.4 1.1-2.6-1 .4-1zM216.2 105.5l-.2 1.2-2.7-.5.2-1.2zM215.9 108.5v1.2h-2.8v-1.2zM250.7 109.6v-1.2h2.8v1.2zM250.5 106.5l-.2-1.1 2.7-.5.2 1.2zM249.8 103.6l-.4-1.1 2.6-.9.4 1zM248.6 100.8l-.6-1 2.4-1.4.6 1zM246.9 98.3l-.7-.9 2.1-1.8.8.9zM244.8 96.1l-.8-.8 1.8-2.1.8.7zM242.4 94.3l-1-.6 1.4-2.4 1 .5zM239.7 92.9l-1.1-.4 1-2.6 1.1.4zM236.15 89.02l1.085.185-.474 2.76-1.083-.186z" /> <path fill="#E21E6E" d="M257.6 110.9H209v-1.7c0-13.4 10.9-24.3 24.3-24.3s24.3 10.9 24.3 24.3v1.7zm-45.2-3.4h41.7c-.9-10.8-9.9-19.2-20.9-19.2-10.9-.1-19.9 8.4-20.8 19.2z" /> <path fill="#4E3440" d="M84.5 244.5h7V268h-7z" /> <path fill-rule="evenodd" clip-rule="evenodd" fill="#D1D1D1" d="M232.6 110.2c1.3-.2 2.5.6 2.7 1.8.2 1.3-.6 2.5-1.8 2.7-1.3.2-2.5-.6-2.7-1.8-.3-1.2.5-2.4 1.8-2.7z" /> <path fill="#FFF" d="M235.8 112c.3 1.5-.7 3-2.3 3.3-1.5.3-3-.7-3.3-2.3-.3-1.5.7-3 2.3-3.3 1.5-.3 3 .7 3.3 2.3zm-4.6.9c.2 1 1.1 1.6 2.1 1.4 1-.2 1.6-1.1 1.4-2.1-.2-1-1.1-1.6-2.1-1.4-.9.2-1.5 1.1-1.4 2.1z" /> <path fill-rule="evenodd" clip-rule="evenodd" fill="#8E8E8E" d="M233.4 110.9c.2.1.3.3.3.5l-.6 2.5c-.1.2-.3.3-.5.3-.2-.1-.3-.3-.3-.5l.7-2.5c0-.2.2-.4.4-.3z" /> <path id="chip" fill="#F7931E" d="M52.3 349.4h4.3v1.1h-4.3z" /> <path id="needle4" fill="#CC1B1B" d="M235 103.5c.6 1 .3 2.2-.7 2.8-1 .6-2.2.3-2.8-.7-.6-1-3.2-9-3.2-9s6.1 6 6.7 6.9z" /> <path fill="#EDEDED" d="M304.7 138.1c0 2.5-2.1 4.6-4.6 4.6-2.5 0-4.6-2.1-4.6-4.6v-17.7c0-2.5 2.1-4.6 4.6-4.6 2.5 0 4.6 2.1 4.6 4.6v17.7z" /> <path fill="#FFF" d="M304.7 138.1v-17.7c0-2.5-2.1-4.6-4.6-4.6v27c2.5-.1 4.6-2.2 4.6-4.7z" /> <ellipse fill="#FFF" cx="174.5" cy="248.1" rx="3.1" ry="3.1" /> <path fill="#FBDF59" d="M172.1 248.8c.3 1 1.3 1.8 2.4 1.8 1.1 0 2.1-.7 2.4-1.8h-4.8z" /> <path opacity=".1" fill="#111135" d="M177 249.9c1-1.4.6-3.4-.8-4.4l-3.6 5.1c1.5 1 3.4.7 4.4-.7z" /> <path fill="#FFF" d="M69.6 265c0 .7-.6 1.3-1.4 1.3h-4.7c-.8 0-1.4-.6-1.4-1.3 0-.7.6-1.3 1.4-1.3h4.7c.8 0 1.4.6 1.4 1.3z" /> <path fill="#EAEAEA" d="M71.4 228.2c0 9.4 7.6 17.1 17.1 17.1 9.4 0 17.1-7.6 17.1-17.1 0-9.4-7.6-17.1-17.1-17.1-9.5 0-17.1 7.7-17.1 17.1z" /> <path fill.........完整代码请登录后点击上方下载按钮下载查看
网友评论0