canvas实现好玩的粒子喷射器小球交互效果代码
代码语言:html
所属分类:粒子
代码描述:canvas实现好玩的粒子喷射器小球交互效果代码,鼠标移动控制粒子发射方向,单击发射。
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> :root { background: #202126; --c: #fff; } html, body { height: 100vh; margin: 0; overflow: hidden; } .player { --t: 1; position: absolute; top: 0; left: 0; width: 5vmin; height: 5vmin; border-radius: 50%; box-shadow: 0 0 0 0.5vmin var(--c); transform: translate(-50%, -50%) translate(var(--x, 0), var(--y, 0)) rotate(var(--r, 0deg)) scaleY(calc(0 + var(--t))) scaleX(calc(2 - var(--t))); background: #202126; z-index: 10; will-change: transform; } .player::after { content: ""; position: absolute; width: 15%; height: 15%; background: #202126; box-shadow: 0 0 0 0.4vmin #fff; left: 50%; top: 0; transform: translate(-50%, calc(-50% - 0.2vmin)) rotate(-45deg); } .player::before { content: ""; position: absolute; inset: 0; background: lch(110 80 var(--ch)); border-radius: 50%; -webkit-clip-path: inset(50% 0 0 0); clip-path: inset(50% 0 0 0); transform: rotate(calc(-1 * var(--r, 0deg))); transition: 200ms transform; box-shadow: inset 0 0 0 0.1vmin; } .shooting .player { -webkit-animation: float 0.1s infinite alternate ease-in-out; animation: float 0.1s infinite alternate ease-in-out; } @-webkit-keyframes float { 0% { --t: 0.75; } 100% { --t: 1; } } @keyframes float { 0% { --t: 0.75; } 100% { --t: 1; } } .project.........完整代码请登录后点击上方下载按钮下载查看
网友评论0