【每日一练】227—JS实现鼠标效果

每日一练7个月前发布 admin
1,163 0

第227练最终效果如下:

【每日一练】227—JS实现鼠标效果

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);
});

 

© 版权声明

相关文章

暂无评论

暂无评论...