RError.com

RError.com Logo RError.com Logo

RError.com Navigation

  • 主页

Mobile menu

Close
  • 主页
  • 系统&网络
    • 热门问题
    • 最新问题
    • 标签
  • Ubuntu
    • 热门问题
    • 最新问题
    • 标签
  • 帮助
主页 / 问题 / 1265515
Accepted
Михаил Камахин
Михаил Камахин
Asked:2022-04-03 16:57:17 +0000 UTC2022-04-03 16:57:17 +0000 UTC 2022-04-03 16:57:17 +0000 UTC

通过 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 个回答
  • 10 Views

1 个回答

  • Voted
  1. Best Answer
    OPTIMUS PRIME
    2022-04-03T17:44:33Z2022-04-03T17:44:33Z

    “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

相关问题

  • 第二个 Instagram 按钮的 CSS 属性

  • 由于模糊,内容不可见

  • 弹出队列。消息显示不正确

  • 是否可以在 for 循环中插入提示?

  • 如何将 JSON 请求中的信息输出到数据表 Vuetify vue.js?

Sidebar

Stats

  • 问题 10021
  • Answers 30001
  • 最佳答案 8000
  • 用户 6900
  • 常问
  • 回答
  • Marko Smith

    表格填充不起作用

    • 2 个回答
  • Marko Smith

    提示 50/50,有两个,其中一个是正确的

    • 1 个回答
  • Marko Smith

    在 PyQt5 中停止进程

    • 1 个回答
  • Marko Smith

    我的脚本不工作

    • 1 个回答
  • Marko Smith

    在文本文件中写入和读取列表

    • 2 个回答
  • Marko Smith

    如何像屏幕截图中那样并排排列这些块?

    • 1 个回答
  • Marko Smith

    确定文本文件中每一行的字符数

    • 2 个回答
  • Marko Smith

    将接口对象传递给 JAVA 构造函数

    • 1 个回答
  • Marko Smith

    正确更新数据库中的数据

    • 1 个回答
  • Marko Smith

    Python解析不是css

    • 1 个回答
  • Martin Hope
    Alexandr_TT 2020年新年大赛! 2020-12-20 18:20:21 +0000 UTC
  • Martin Hope
    Alexandr_TT 圣诞树动画 2020-12-23 00:38:08 +0000 UTC
  • Martin Hope
    Air 究竟是什么标识了网站访问者? 2020-11-03 15:49:20 +0000 UTC
  • Martin Hope
    Qwertiy 号码显示 9223372036854775807 2020-07-11 18:16:49 +0000 UTC
  • Martin Hope
    user216109 如何为黑客设下陷阱,或充分击退攻击? 2020-05-10 02:22:52 +0000 UTC
  • Martin Hope
    Qwertiy 并变成3个无穷大 2020-11-06 07:15:57 +0000 UTC
  • Martin Hope
    koks_rs 什么是样板代码? 2020-10-27 15:43:19 +0000 UTC
  • Martin Hope
    Sirop4ik 向 git 提交发布的正确方法是什么? 2020-10-05 00:02:00 +0000 UTC
  • Martin Hope
    faoxis 为什么在这么多示例中函数都称为 foo? 2020-08-15 04:42:49 +0000 UTC
  • Martin Hope
    Pavel Mayorov 如何从事件或回调函数中返回值?或者至少等他们完成。 2020-08-11 16:49:28 +0000 UTC

热门标签

javascript python java php c# c++ html android jquery mysql

Explore

  • 主页
  • 问题
    • 热门问题
    • 最新问题
  • 标签
  • 帮助

Footer

RError.com

关于我们

  • 关于我们
  • 联系我们

Legal Stuff

  • Privacy Policy

帮助

© 2023 RError.com All Rights Reserve   沪ICP备12040472号-5