主页 / 问题 / 1265515
Accepted
Михаил Камахин
Asked:2022-04-03 16:57:17 +0800 CST2022-04-03 16:57:17 +0800 CST

通过 JavaScript 跟踪 CSS 变量

  • 772

我在 CSS 中有一个动画，可以改变 CSS 变量。

我想通过 JavaScript 跟踪更改，CSS переменных并根据值执行一些操作（您可以纯粹在 JS 中执行动画，但我对此很感兴趣）。如果有人有任何想法，请告诉我

*,
*::before,
*::after {
  box-sizing: border-box;
}

@property --x {
  inherits: false;
  initial-value: 0;
  syntax: '<number>';
}

@property --y {
  inherits: false;
  initial-value: 0;
  syntax: '<number>';
}

@property --r {
  inherits: false;
  initial-value: 0;
  syntax: '<number>';
}

@property --g {
  inherits: false;
  initial-value: 0;
  syntax: '<number>';
}

@property --b {
  inherits: false;
  initial-value: 0;
  syntax: '<number>';
}

body {
  margin: 0;
  min-height: 100vh;
  position: relative;
  background-color: rgb(var(--r), var(--g), var(--b));
  animation: ballAnimate 2s infinite alternate ease-in-out;
}

.ball {
  --size: 10vmin;
  position: absolute;
  top: 0;
  left: 0;
  width: var(--size);
  height: var(--size);
  background-color: rgb(var(--r), var(--g), var(--b));
  filter: invert(100%);
  border-radius: 50%;
  transform: translate(calc(var(--x) * 1vmin), calc(var(--y) * 1vmin));
  animation: ballAnimate 2s infinite alternate ease-in-out;
}

@keyframes ballAnimate {
  0% {
    --x: 0;
    --y: 0;
  }
  25% {
    --y: 20;
    
    --r: 100;
    --g: 100;
    --b: 30;
  }
  50% {
    --x: 30;
  }
  75% {
    --y: 50;
    
    --r: 255;
    --g: 0;
    --b: 255;
  }
  100% {
    --x: 200;
    --y: 80;
    
    --r: 0;
    --g: 255;
    --b: 250;
  }
}
<div class="ball"></div>

javascript

1 个回答

  1. Best Answer

    “Track”，可能通过requestAnimationFrame()每秒被调用大约 60 次。

    (function loop() {
  let style = getComputedStyle(document.body);
  
  let x = style.getPropertyValue('--x');
  let y = style.getPropertyValue('--y');
  
  console.clear();
  console.log('x:', x, '| y:', y);
  
  requestAnimationFrame(loop);
})();
    *,
*::before,
*::after {
  box-sizing: border-box;
}

@property --x {
  inherits: false;
  initial-value: 0;
  syntax: '<number>';
}

@property --y {
  inherits: false;
  initial-value: 0;
  syntax: '<number>';
}

@property --r {
  inherits: false;
  initial-value: 0;
  syntax: '<number>';
}

@property --g {
  inherits: false;
  initial-value: 0;
  syntax: '<number>';
}

@property --b {
  inherits: false;
  initial-value: 0;
  syntax: '<number>';
}

body {
  margin: 0;
  min-height: 100vh;
  position: relative;
  background-color: rgb(var(--r), var(--g), var(--b));
  animation: ballAnimate 2s infinite alternate ease-in-out;
}

.ball {
  --size: 10vmin;
  position: absolute;
  top: 0;
  left: 0;
  width: var(--size);
  height: var(--size);
  background-color: rgb(var(--r), var(--g), var(--b));
  filter: invert(100%);
  border-radius: 50%;
  transform: translate(calc(var(--x) * 1vmin), calc(var(--y) * 1vmin));
  animation: ballAnimate 2s infinite alternate ease-in-out;
}

@keyframes ballAnimate {
  0% {
    --x: 0;
    --y: 0;
  }
  25% {
    --y: 20;
    
    --r: 100;
    --g: 100;
    --b: 30;
  }
  50% {
    --x: 30;
  }
  75% {
    --y: 50;
    
    --r: 255;
    --g: 0;
    --b: 255;
  }
  100% {
    --x: 200;
    --y: 80;
    
    --r: 0;
    --g: 255;
    --b: 250;
  }
}
    <div class="ball"></div>

    • 5

相关问题