canvas实现粒子鼠标交互动画效果代码
代码语言:html
所属分类:粒子
代码描述:canvas实现粒子鼠标交互动画效果代码,鼠标放上去,粒子会躲避。
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> html, body { background: #111; } #container { background: #111; position: absolute; left: 50%; top: 50%; } /* #stats { position: absolute; right: 10px; top: 10px; } */ /* Info */ @keyframes show-info { 0% { transform: rotateY(120deg); } 100% { transform: rotateY(0deg); } } .info { transition: all 180ms ease-out; transform-style: preserve-3d; transform: perspective(800px); font-family: "Lucida Console", Monaco, monospace; position: absolute; font-size: 12px; opacity: 0.8; color: #fff; width: 220px; left: 0px; top: 20px; } .info:hover { box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.05); opacity: 1; } .info h1, .info h2, .info h3 { line-height: 1; margin: 5px 0; } .info a { transition: all 200ms ease-out; border-bottom: 1px dotted rgba(255, 255, 255, 0.4); text-decoration: none; opacity: 0.6; color: #fff; } .info a:hover { opacity: 0.99; } .info .about, .info .more { transform-origin: 0% 50%; transform: rotateY(120deg); margin-bottom: 1px; background: rgba(0, 0, 0, 0.8); padding: 12px 15px 12px 20px; } .info .about { animation: show-info 500ms cubic-bezier(0.23, 1, 0.32, 1) 600ms 1 normal forwards; padding-bottom: 15px; } .info .about a { opacity: 0.9; } .info .about h1 { letter-spacing: -1px; font-weight: 300; font-size: 19px; opacity: 0.95; } .info .about h2 { font-weight: 300; font-size: 13px; opacity: 0.8; } .info .about h3 { text-transform: uppercase; margin-top: 10px; font-size: 11px; } .info .about h3:before { margin-right: 2px; font-size: 14px; content: "›"; } .info .more { animation: show-info 500ms cubic-bezier(0.23, 1, 0.32, 1) 500ms 1 normal forwards; padding: 5px 15px 10px 20px; } .info .more a { text-transform: uppercase; margin-right: 10px; font-size: 10px; } </style> </head> <body > <div id='container'></div> <div class='info'> <hgroup class='about'> <h3>Particles</h3> <h1>Use your mouse to interact</h1> <h3 id='coords'></h3><br> </hgroup> </div> <script > let NUM_PARTICLES = (ROWS = 100) * (COLS = 300), THICKNESS = Math.pow(80, 2), SPACING = 3, MARGIN = 100, COLOR = 220, DRAG = 0.95, EASE = 0.25, container, particle, canvas, mouse, list, ctx, tog, man, dx,dy, mx,my, d,t,f, a,b, i,n, w,h, p,s, r,c; particle = { vx: 0, vy: 0, x.........完整代码请登录后点击上方下载按钮下载查看
网友评论0