gsap实现彩虹云跟随鼠标动画效果代码

代码语言:html

所属分类:动画

代码描述:gsap实现彩虹云跟随鼠标动画效果代码,一团雾气凝结。

代码标签: gsap 彩虹 跟随 鼠标 动画

下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  

  
  
<style>
html, body, canvas {
  width:100%;
  height:100%;
  margin:0;
  padding:0;
}

canvas {
  position:fixed;
}
</style>

  
</head>

<body >
  <canvas></canvas>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/gsap.3.10.1.js"></script>
      <script  >
console.clear()
const c = document.querySelector('canvas')
const ctx = c.getContext('2d')
let cw = c.width = innerWidth
let ch = c.height = innerHeight
const imgs = []
const dust = Array(99)
const m = {x:0, y:0}
let currentIndex = 0
const imgData = ['data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGAAAABfBAMAAADlmt9zAAAAJFBMVEX////////////////////////////////////////////////Vd7HLAAAADHRSTlMNARor/zyfUIJlvNzDamF6AAAGp0lEQVR4AY2YSY6kyBKGgRPwboAc9f4JF+oL9BxL5EJ1AZc/ctlCLi5AOb1/BexTKOWxTdUQXK5/M8KryCAn67nLPn6bISv6z0sWP/+/nwViWBSl6buBNIoiEPF7gWhv6ZsAHp3gD7YsA3EADtEkmQjPBxC9CuCB8BJZFhSYeBlIY3ITZBzU9Z8vAlEU/KFBSsn2L/FLQMxABv+CHs0gS8TPAmkasSUiFxIEY6yQHhXC89OEHWUlgeSykCIBAYkXAM4AjmWrZJEDApawyBEI/ghHlvXcSvxDKVUVQoqQ9xGgp8OxtADgbwHInID4CCBlpEtPLdt6nOdWKWvbGkTFhboF4B9HSS4RRd3aeQJhLVGtagskkd4CnAEL1NZ2g3MOKm5Q9WhbTiI6ACkEyL+b4Uk29XqwHQOcxROAHo8MKqm6if17o/E35wYkomQO4ikQ80RIquhknNaN143ujTNzCwUYiFuFRLCCdYtetPdLo7Vf3NjWraTqYkV2AJU0oR5Uanb+7JdFa734+9/mkULiBmbIYg9EBJQ/d64/rxdN1jT3n+extkDquqqyKADsnyGFXKkPKI1fP+Pxrtf6/rOb0Q1o1KqgoQ0AB4SUVdtNjWkQ0WIccjlfzDijzKOy6F4U7RXgjxHqpt7r3i9eG/wbAG/mcYYKNWMHcInQtM4iZVTH9Np9Wld/Xn+5uAkKBCCmeANYgBW6bnbIFuEYrR9/+WX95ZeTcQNJVBIxpUHhOtcl/OGJx09G3/3CtgKHAoA8+64QU0lzmQPoTUMhTaa/34BLQ8BoqwJAyCHlHqCqHzBG6LEZHEfEAEL8OAEQNLIbwDnT/qp6tpNuaOp8w+7IYTFmQF1lFkEh3gMwZQFogyKtZzgHCTNYCSAKCikBZZ7nkABgdN+sKyIKEs1iRpybBEAagIxPCma7g4L2wXsDdGOGv7eTySHxYMAfjKxnGiGEs7OLRxoAiAghZUKCKArcI3SuQTx7WxdSENEuJL52OS5kjU40/gY4nRnIdkknoqBzWpQKOawYiKeAH2z7XxFluxwknq4kNaI/7x4fCjuMbSH4JAeFXORlqSosdHPw/+WzdjM6ne0UkAJq1Crb9f6Xgy0A0GoBhdBpUQjaf8wSFvog8Zd2iAnDFKq0XRilACCi9ZcD4A2ylryj8bXTvG+t6o4ZcJWWwSpZUEwpAH61MVBNzwLo3NBWrBCzQoyYCFDlJ38MiOv0cWwxr1mMmPYKH3p/PgZ0WikkSAhWIIavnkLXngMeH1eENLbl9S0RQgLQucbfHQEk/QBAkgK8ERLXFbtAp6u5lTidV6/hr8LOAeBOi5J353yb9cV77baqZgmS4MbxPpSdc1of+uxxRRwJCAB7BVkDQEQADgrmY9vKjP1jblxCr1s7T85dgR11WhDRAIUsCgBNq/zZ4nK76R/e/8vdU2AeK+7CDwXUqK1xuYferwTc7wAPgAZDbBJhH36qcFgHAGcEdNqXdV0IEDmA0Ac+rUWOWz9PHjHd3IzLtgxJSPp6NYq8tpZuzC1wWQYo5GLL4ccCYTZKZSdsEK3QDvprCQoswAoJA6VEHlNzuTkzq3/AIAkoZN8B+p7FztFppffDE4BmdbR/Q0HAPwAIKqKtRjM+ab5k6/mRo1oBPADgz9LdC4UMzQYwGXf2cPPr+Tqr3oyW+xBy4JggkQNQiGnSeN0u+q65nm79P/x/XF74p2kAyKiubTdanGMspdEMLKanG8MK4dxfYxJQGNsOYU09fczw0Txp58w4Kp5u+AcgJoBeWPzB17leY6b1PZrgYJbWTe4Bjgn3u6xkabsZg86fD5jZz8Pghu/+cQBg/KauZK6kIg1tHGQeTw+DcyN/VfMF+AHEiEhAQBIwzli+ee7nf06fDYYbQMFnbwekKQ74TwrJISjYPKMjOOWfez2Qwna5dwBPbNmq7YsbhvRHOiOTm7eLEaXRHuDKFvDOUaxWsVkQjr/B+Ugev4wT5J0XoFQwO42QoqYBiOODwoYQUFUbMf+f0uLlgf8tkGDKAYCosEuwqqzbqlSFYIXjzw+bBAoiZU4AfUngvIQpOgAclbgaRCoAigAK6DkgTVMmMgJyeGNUJKwIY3dUICDDJjJQUb0K/Eto8gEIRCRQKwH3nMpTgE4g8ALAQSHza1QAwIrXfhaN+R4kGQPM7QWOABMJmwjuSfYyEJYPHQTGP1NmCOhlIKTBYeHRMMCcwUs5BCRLmGKLXwZg9PXBRBQsfvu3KZD50f3t3zkJO/MugCH8gT/fCyCUF+xfgsS4OroeyDkAAAAASUVORK5CYII=', 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEYAAABEBAMAAADOyF68AAAAJFBMVEVHcEz///////////////////////////////////////////8Uel1nAAAADHRSTlMAChMfRzDCiqJcc+CoT0BUAAAEJUlEQVR4AYWVWZajOBOFrVoBIjfwI/21gESlFaR4IB9TUg8b4HBOvjckCzAsgB7Eaw80WkBN3lzfwK4yzjE8259v3IhA0u4YHJEku1cjFQLQqwgDIyD0KgIme10mERQbBm/5c6k2OmzHssf2EhDp5o+cSyv4pRJPRZbxrT1d5NmFEOOp3H7FlHLGqssiuJAKBr55ufLeGI9enL44MUqtXyWcZzzV3oSxOAonSXKEUrkyDGbRSqELM4Yi252Yk8dcWZUnOwY4T6UzZTDFNTEcDtiRUdYqkQDxVkltzBRG+79jF1DviVErIzUY/7Mp4xKKa0Y6aXrKJRQiT2DWa63LUMYYw12yVvOtvDST3iuhHZ6Vh5u5bR5usixhHI0jhsqR3hTemcIqpUvkavuusDZDU6xIqDrCXTBmNKtOWZZx6GNBH3K/MlDZcVUuxgTo5GDCFNsuFNZrVJBzQiD1Tk+LKUdMAKMKYZ77LhgA3ltqN26cvXNzN5YG4X0Zp7kFM97JlSHPGEFyddt0o3FgChObrt0P3bTYleHZaSR6arq/DLIEM83DsK+qpvnLgpBqvbAgw93UxBFZ4oKyq2pf1f2M4tGzjK+NBuOnbincbdNHtK+uqo913zwUSis45mA4I52I/iBLPzdthaiHpruh+VCe1U/6YZoCSh7wWz0Aua+r/sFiVjQGQo5MjF1bffxIIh/v8dJ3N0hEAHHI9X+0tmmG+8OhOhCFZBjYeanAE3tfhu/Mx7WuGsPITzJUFTHT3De/EHN/gCnclxEMpvBd6j2Kmgc4qQ6Hw8d+QIHLNOYX60s6F2cqmqC6aYd+6OJ4zbaM0DqQDjKBie3Q9N0y5luGZUIb6g5USAfNxIyL6y1ylUupb5GgWj2jQiBeZduN7cqrXGFaw8fDR3gecGksv+aZ4Bsh6Qory7mHa6qr3lN3RIahb3ScudHl3Ax7pCIG8y+UEiI7M6kbC1xCqHl/oBbue3QQ+aVIzjoGQUy9h2Xq4GgMoM02xaQxWDAzLkFk65sOVbmy8Dbf7H/v3TiaEOO/+7pFg+MMHVpf+Rlh4oMJJixlSypLCWbBF16dGc5S7cw4xakdaqxhV05xdEDOqRjnXHljIjzDbbDaBVTltxsrT1OeKmd+H1D6EMdCato/cqX4mRFCpBD6HWMaMMk7oZy3Qgqx3dXBSO9gFVfEaK9p6wOxPQw4/UV6NBqOFmMzxlME354FTCBo+f+MDoUCDJWRZekFk+e50kWujQmjtxktgzQh4sKPUNoKoR0NifZ3RufmBmIwJBWK5dKvDGOns/CREDFCOu+J2fy8qYwLRQwao9CV5yLhPJVKwjgQakvyLEX5JGkh6KR5PmD9GJy/gEAKGTnkeMpfRE5iCLx9UYfurwCkg9a9FRBgb2DI9LYOEIZ4I9WLdv8DjsSxeJ9m1lwAAAAASUVORK5CYII=', 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEoAAABIBAMAAACjNn5JAAAAJFBMVEVHcEz///////////////////////////////////////////8Uel1nAAAADHRSTlMALj4fTwoTY33FnvKTZWm1AAAFF0lEQVR4AaWWR5LbuBvF9Q/wHmCHNSBMXA0a05y1YFSxl2yryK0DTRzAxSqwvJ1AWicw1QdoiicYjS43D1TqOBHOxk8P73sfgib/ZmR/gSHu8s+hlKizdJL+mdSc8TcT8memlDQxqDQlGM/RObN2WgbRP9K6ZtaYswlUSBB8gsAKaa6Z9FPMPlsByV1KssJWIzWKPbKdTUgB366wWBFSB2MPKXU5mVNm+eXo/glf8zidzMVZ+s7YGcWKTxWZERXn+YWfld9XdnZi4gA9zIsoKtyFrK3Q5603iedZ9ljrhfTmrVw0VkZfDY31/kPsyMMC0vnHvrFVXQnBrlYD/pBRXJLsQWbvFn3jK2mNkFer/oNWjOqSpA+8n/dt21dUGuHrrn+ZFZRHZe7Ke97yb/t6MRgqq6t2AYrkimqnaPTmWF85+d+JTxbLSrB66Ffr/mVe0EjHSvD4QBUjhfm2Youu69af4V5QGinJ44O1t2fpvG5XXds29lOH0deNtdZE0Lo8UO+mCGK1Wg5Dj+VulkNzNSbGmaAHilyY7/7zsVsPw7AK6y0bc/WTrTxSEdNyT82ZOXu1WK27btl1N9.........完整代码请登录后点击上方下载按钮下载查看

网友评论0