js实现可更换颜色的鼠标点击烟花绽放动画效果代码
代码语言:html
所属分类:动画
代码描述:js实现可更换颜色的鼠标点击烟花绽放动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <style> /* Demo styles */ * { box-sizing: border-box; } html, body { height: 100%; } body { display: grid; place-items: end start; font-family: system-ui, sans-serif; padding: 1.5rem; } label { display: flex; align-items: center; gap: 0.5rem; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } input[type="color"] { --size: 2em; flex-shrink: 0; -webkit-appearance: none; -moz-appearance: none; appearance: none; box-sizing: border-box; cursor: pointer; height: var(--size); width: var(--size); padding: 0; border: 0; border-radius: 50%; } input[type="color" i]::-webkit-color-swatch-wrapper { padding: 0; } input[type="color" i]::-webkit-color-swatch { border-radius: 50%; } input[type="color" i]::-moz-color-swatch { border-radius: 50%; } ::-webkit-color-swatch, ::-moz-color-swatch { border-color: transparent; } </style> </head> <body translate="no"> <label> <input type="color" id="click-spark-color" name="click-spark-color" /> spark color </label> <click-spark></click-spark> <script > class ClickSpark extends HTMLElement { constructor() { super(); this.attachShadow({ mode: "open" }); this.root = document.documentElement; this.svg; } connectedCallback() { this.setupSpark(); this.root.addEventListener("click", e => { this.setSparkPosition(e); this.animateSpark(); }); } animateSpark() { let sparks = [...this.svg.children]; let size = parseInt(sparks[0].getAttribute("y1")); let offset = size / 2 + &.........完整代码请登录后点击上方下载按钮下载查看
网友评论0