3d文字鼠标跟随特效

代码语言:html

所属分类:视觉差异

代码描述:3d文字鼠标跟随特效

代码标签: 跟随 特效

下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

<style>
path {
  fill: none;
  stroke: black;
  stroke-width: 1px;
}

svg {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  outline: 1px solid black;
}

canvas {
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
  margin: auto;
  touch-action: none;
}

body {
  display: flex;
  height: 100vh;
  overflow: hidden;
  align-items: flex-start;
  margin: 0;
  background: black;
}
</style>

</head>
<body translate="no">
<svg xmlns="http://www.w3.org/2000/svg" width="1000" height="1000" viewBox="0 0 1000 1000"><path d="M101.85 141.28h74.46L206.4 243.4l34.34-102.73h61.39l34.34 102.73 30.09-102.12h73.25l-69.6 214.27h-62l-37.38-105.77-37.38 105.77h-62l-69.6-214.27z" /><path d="M451.98 141.28h71.12v75.07h65.04v-75.07h71.12v212.75h-71.12v-76.29H523.1v76.29h-71.12V141.28z" /><path d="M746.79 278.66l-80.24-137.37h79.63l36.47 69.9 36.77-69.9h78.72L817.9 277.75v76.29h-71.12v-75.38z" /><g><path d="M360.62 590.72l23.7-28.26c14.41 11 30.91 15.55 46.46 15.55 7.96 0 11.38-2.09 11.38-5.69v-.38c0-3.79-4.17-5.88-18.39-8.72-29.77-6.07-55.94-14.6-55.94-42.67v-.38c0-25.22 19.72-44.75 56.32-44.75 25.6 0 44.56 6.07 59.92 18.2l-21.62 29.96c-12.52-9.1-27.5-13.08-39.82-13.08-6.64 0-9.67 2.28-9.67 5.5v.38c0 3.6 3.6 5.88 17.64 8.53 33.94 6.26 56.7 16.12 56.7 42.86v.38c0 27.88-22.95 44.94-58.6 44.94-26.93.01-51.2-7.58-68.08-22.37z" /><path d="M494.5 544.64v-.38c0-38.5 31.67-69.22 72.63-69.22 40.96 0 72.25 30.34 72.25 68.84v.38c0 38.5-31.67 69.22-72.63 69.22-40.96 0-72.25-30.34-72.25-68.84z" /><path d="M594.63 544.64v-.38c0-15.74-10.81-29.96-27.88-29.96-16.88 0-27.5 14.03-27.5 29.58v.38c0 15.74 10.81 29.96 27.88 29.96 16.88 0 27.5-14.03 27.5-29.58z" /></g><g><path d="M87 825.31l19.12-22.79c11.63 8.87 24.93 12.54 37.48 12.54 6.42 0 9.18-1.68 9.18-4.59v-.31c0-3.06-3.37-4.74-14.84-7.04-24.02-4.89-45.12-11.78-45.12-34.42v-.31c0-20.34 15.91-36.1 45.43-36.1 20.65 0 35.95 4.89 48.34 14.68l-17.44 24.17c-10.1-7.34-22.18-10.55-32.12-10.55-5.35 0-7.8 1.84-7.8 4.44v.31c0 2.91 2.91 4.74 14.23 6.88 27.38 5.05 45.74 13 45.74 34.57v.31c0 22.49-18.51 36.25-47.27 36.25-21.74.01-41.32-6.1-54.93-18.04z" /><path d="M197.44 734.3h91.32v29.37h-56.14v10.86h52.31v25.85h-52.31v11.63h56.9v29.37h-92.09V734.3z" /><path d="M299.16 734.3h52.31c18.97 0 31.05 4.74 38.55 12.24 6.42 6.42 9.79 14.38 9.79 25.39v.31c0 15.6-8.11 26.46-21.11 32.74l24.93 36.41h-40.84L342.6 810.8h-7.65v30.59h-35.79V734.3z" /><path d="M350.4 785.24c8.57 0 13.77-3.82 13.77-10.4v-.31c0-6.88-5.35-10.25-13.61-10.25h-15.6v20.96h15.44z" /><path d="M408.83 734.3h35.79v107.08h-35.79V734.3z" /><path d="M454.72 788.14v-.31c0-31.05 25.55-55.83 58.59-55.83 33.04 0 58.28 24.48 58.28 55.53v.31c0 31.05-25.54 55.83-58.59 55.83-33.04 0-58.28-24.47-58.28-55.53z" /><path d="M535.49 788.14v-.31c0-12.7-8.72-24.17-22.49-24.17-13.61 0-22.18 11.32-22.18 23.86v.31c0 12.7 8.72 24.17 22.49 24.17 13.61.01 22.18-11.31 22.18-23.86z" /><path d="M580.46 793.34V734.3h36.41v58.59c0 13.31 6.88 18.97 16.52 18.97s16.52-5.2 16.52-18.2V734.3h36.41v58.28c0 36.56-21.26 50.94-53.23 50.94-31.98 0-52.63-14.69-52.63-50.18z" /><path d="M688.75 825.31l19.12-22.79c11.63 8.87 24.93 12.54 37.48 12.54 6.43 0 9.18-1.68 9.18-4.59v-.31c0-3.06-3.37-4.74-14.84-7.04-24.02-4.89-45.13-11.78-45.13-34.42v-.31c0-20.34 15.91-36.1 45.43-36.1 20.65 0 35.95 4.89 48.34 14.68l-17.44 24.17c-10.1-7.34-22.18-10.55-32.12-10.55-5.35 0-7.8 1.84-7.8 4.44v.31c0 2.91 2.91 4.74 14.23 6.88 27.38 5.05 45.74 13 45.74 34.57v.31c0 22.49-18.51 36.25-47.27 36.25-21.72.01-41.3-6.1-54.92-18.04z" /><path d="M856.1 781.57l1.84-1.84c16.21-2.14 21.26-5.66 21.26-10.55v-.15c0-3.52-3.21-5.97-9.02-5.97s-14.23 3.82-21.72 9.64l-16.52-24.78c9.79-8.72 23.25-15.45 41.76-15.45 22.79 0 39.31 12.85 39.31 32.43v.31c0 19.12-12.08 27.53-29.52 32.58l-1.84 10.25h-21.26l-4.29-26.47zm-3.37 32.27h35.49v27.53h-35.49v-27.53z" /></g></svg>

<script type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/p5.js"></script>
<script >
console.clear();

const largePaths = document.querySelectorAll("path");
const smallPaths = [];
const svg_width = Math.ceil(
  parseFloat(document.querySelector("svg").viewBox.baseVal.width)
);
const svg_height = Math.ceil(
  parseF.........完整代码请登录后点击上方下载按钮下载查看

网友评论0