第227练最终效果如下：
HTML:
<!DOCTYPE html><html lang=”en”><head><meta charset=”UTF-8″ /><meta http-equiv=”X-UA-Compatible” content=”IE=edge” /><meta name=”viewport” content=”width=device-width, initial-scale=1.0″ /><title>第227练</title><link rel=”stylesheet” href=”index.css” /></head><body><script src=”index.js”></script></body></html>
CSS:
body {margin: 0;height: 100vh;background-color: black;overflow: hidden;}span {background: url(“https://cdn4.iconfinder.com/data/icons/general-office/91/General_Office_54-512.png”);width: 100px;height: 100px;position: absolute;pointer-events: none;background-size: cover;left: 50%;top: 50%;transform: translate(-50%, -50%);animation: animate 6s linear;}@keyframes animate {0% {transform: translate(-50%, -50%);opacity: 1;filter: hue-rotate(0);}100% {transform: translate(-50%, -5000%);opacity: 0;filter: hue-rotate(720deg);}}
JS:
const bodyEl = document.querySelector(“body”);bodyEl.addEventListener(“mousemove”, (event) => {const xPos = event.offsetX;const yPos = event.offsetY;const spanEl = document.createElement(“span”);spanEl.style.left = xPos + “px”;spanEl.style.top = yPos + “px”;const size = Math.random() * 100;spanEl.style.width = size + “px”;spanEl.style.height = size + “px”;bodyEl.appendChild(spanEl);setTimeout(() => {spanEl.remove();}, 3000);});
© 版权声明
文章版权归作者所有，未经允许请勿转载。
相关文章
暂无评论...
【web前端开发】一个专业而懂你的前端开发技术研究学习交流平台，每天不定时分享前端技术内容与案例，编程图书与课程，前端开发工具等学习资源，我们坚持每天学习一点点，每天进步一点点，关注我们，一起学习成长进步。
同名公众号【web前端开发】
