html 鼠标悬停时CSS中的凸出/弹出效果[已关闭]

k0pti3hp  于 2023-09-28  发布在  其他
关注(0)|答案(1)|浏览(158)

已关闭,此问题需要更focused。它目前不接受回答。
**想改善这个问题吗?**更新问题,使其只关注editing this post的一个问题。

关闭7天前。
Improve this question
我试图复制一个css效果(可能)在网站themekaverse上创建。所以如果我们去这个网站的“加入我们的不和谐”部分,我们可以找到这个动画,在那里,背景中有一个类似网格的结构,当我们将鼠标悬停在它上面时,网格非常平滑地凸出,就像某种3D变换一样。

  1. You can checkout the animation demo at: https://imgur.com/a/remy2zj

请告诉我实现这一目标的最佳方法是什么?
我目前的尝试是创建一个div网格并添加transform matrix3d。但我无法达到类似的效果。

kkih6yb8

kkih6yb81#

这里有一个小例子,我鞭打了,给你一个 * 类似 * 的效果使用2D画布。

  1. const canvas = document.getElementById("c");
  2. const ctx = canvas.getContext("2d");
  3. function redraw(mouseX, mouseY) {
  4. const meshResX = 50;
  5. const meshResY = 20;
  6. const maxDistance = 100;
  7. const meshW = canvas.width / meshResX;
  8. const meshH = canvas.height / meshResY;
  9. const meshPoints = [];
  10. for (let y = 0; y < meshResY; y++) {
  11. const line = [];
  12. meshPoints.push(line);
  13. for (let x = 0; x < meshResX; x++) {
  14. let pointX = x * meshW;
  15. let pointY = y * meshH;
  16. // Compute distance and direction of mouse to point
  17. const dx = mouseX - pointX;
  18. const dy = mouseY - pointY;
  19. const distance = Math.sqrt(dx * dx + dy * dy);
  20. const a = Math.atan2(dy, dx);
  21. if (distance < maxDistance) {
  22. // Compute force
  23. const force = Math.sin((distance / maxDistance) * Math.PI) * -20;
  24. // Apply force to point
  25. pointX += Math.cos(a) * force;
  26. pointY += Math.sin(a) * force;
  27. }
  28. line.push({ x: pointX, y: pointY });
  29. }
  30. }
  31. // Draw the mesh
  32. ctx.clearRect(0, 0, canvas.width, canvas.height);
  33. ctx.beginPath();
  34. for (let y = 0; y < meshResY - 1; y++) {
  35. for (let x = 0; x < meshResX - 1; x++) {
  36. const p1 = meshPoints[y][x];
  37. const p2 = meshPoints[y][x + 1];
  38. const p3 = meshPoints[y + 1][x + 1];
  39. const p4 = meshPoints[y + 1][x];
  40. ctx.moveTo(p1.x, p1.y);
  41. ctx.lineTo(p2.x, p2.y);
  42. ctx.moveTo(p1.x, p1.y);
  43. ctx.lineTo(p3.x, p3.y);
  44. ctx.moveTo(p1.x, p1.y);
  45. ctx.lineTo(p4.x, p4.y);
  46. }
  47. }
  48. ctx.stroke();
  49. }
  50. canvas.addEventListener("mousemove", (e) => {
  51. const rect = canvas.getBoundingClientRect();
  52. const x = e.clientX - rect.left;
  53. const y = e.clientY - rect.top;
  54. redraw(x, y);
  55. });
  1. canvas {
  2. border: 1px solid blue;
  3. }
  1. Mouse over below:<br>
  2. <canvas width="1024" height="400" id="c"></canvas>
展开查看全部

相关问题