js+svg实现鼠标触摸毛发动画效果代码-html代码-BFW代码库

js+svg实现鼠标触摸毛发动画效果代码

代码语言：html

所属分类：动画

代码描述：js+svg实现鼠标触摸毛发动画效果代码

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


<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">

  
  
<style>
@keyframes background {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 200px 200px;
  }
}
body {
  display: flex;
  width: 100vw;
  height: 100vh;
  align-items: center;
  animation: background 10s linear infinite;
  background-color: white;
  background-blend-mode: difference;
  background-size: 200px 200px;
  justify-content: center;
}

svg {
  background-color: white;
  overflow: visible !important;
}
svg circle {
  fill: black;
}
svg path {
  stroke-dasharray: 6 2;
  stroke-width: 1px;
}
</style>


</head>

<body  >
  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="345" height="345" viewBox="0 0 345 345" overflow="visible">
</svg>

  
      <script>
/* Properties */
const svg = {
  el: document.querySelector('svg'),
  path: document.querySelector('svg path'),
  width: 1,
  height: 1,
  x: 0,
  y: 0 };


const dots = [];

const circle = {
  radius: 3,
  margin: 20 };


const mouse = {
  x: 0,
  y: 0,
  prevX: 0,
  prevY: 0,
  speed: 0 };


const ticker = {
  fps: 60,
  fpsInterval: 1000 / 60,
  lastTickTime: null };


/* Resize */
function resizeHandler() {
  const bounding = svg.el.getBoundingClientRect();

  svg.width = bounding.width;
  svg.height = bounding.height;
  svg.x = bounding.left;
  svg.y = bounding.top;
}

/* Create dots */
function createDots() {
  resizeHandler();

  const dotSize = circle.radius + circle.margin;

  const rows = Math.floor(svg.height / dotSize);
  const cols = Math.floor(svg.width / dotSize);

  const x = svg.width % dotSize / 2;
  const y = svg.height % dotSize / 2;

  for (let row = 0; row < rows; row++) {
    for (let col = 0; col < cols; col++) {
      const dot = {
        anchor: {
          x: x + col * dotSize + dotSize / 2,
          y: y + row * dotSize + dotSize / 2 } };



      dot.position = {
        x: dot.anchor.x,
        y: dot.anchor.y };


      dot.smooth = {
        x: dot.anchor.x,
        y: dot.anchor.y };


      dot.velocity = {
        x: 0,
        y: 0 };


      dot.move = {
        x: 0,
        y: 0 };


      dot.color = {
        r: 255 * (1 - dot.anchor.x / svg.width),
        g: 255 * (dot.anchor.x / svg.width),
        b: 255 * (dot.anchor.y / svg.height) };


      dot.el = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
      dot.el.setAttribute('cx', dot.anchor.x);
      dot.el.setAttribute('cy', dot.anchor.y);
      dot.el.setAttribute('r', circle.ra.........完整代码请登录后点击上方下载按钮下载查看