javascript - 在css中制作javascript脚本

Question

我正在尝试用纯 css 制作这个： Codepen

我想做同样的事情，但在 css 中。这是我的CSS：

.text{
  --a: calc(var(--a);*0.82+(1.5-var(--b);)/10);
  --b: calc(var(--b);+var(--a););
  transform: scale(var(--b););
}

它不起作用。我已经尝试了很多东西，但都没有奏效。请帮忙！

我为获得该非工作CSS而经历的所有信息：

CSS 变量 - var() 函数

在 CSS 中保留数学 | CSS 技巧

标签： javascriptcss

Answer 1

首先，您的 css 代码非常混乱。分号 (;) 用于 css 文件中的每个属性。让我修复你的代码

body{
  --bounce: 100; //create the variables first on parent element
  --size: 100;
}

.text{
  --bounce: calc(var(--bounce) * 0.82 + (1.5 - var(--size) / 10));
  --size: calc(var(--bounce) + var(--size));
  transform: scale(--size);
}

请注意，运算符符号“+”、“-”、“*”和“/”在两个变量或数字之间必须有 1 个额外的空格。