css动画2张图过渡_css 变量学习与实践

一、css 变量带来的变化

节约 css 代码，降低开发和维护成本

比如下面声明的全局变量可在整站使用

:

和less 等预编译语言很像，但css变量是浏览器原生支持的

再看一个例子:

以前的做法是，用span将每一个字符包裹起来，并添加动画，每个span的动画要比前一个延迟几百毫秒就可以达到这个效果。也就意味着需要拿到所有span单独设置 animation-delay

有了css 变量之后：http://js.jirengu.com/qabebimiwa/1/edit?html,css,js,output

只需要一行：

--animation-delay

除了节约一点 css 代码，对于以往写交互和动画的习惯也有了很大的改变

将部分交互与动画从 js 转移到 css

从此有些交互和动画不是只能通过 js实现，可结合鼠标事件来完成更多的酷炫效果，例如动画关联、事件响应等操作。

点击按钮出现涟漪效果：http://js.jirengu.com/teqabazasa/1/edit

白色底用伪元素写：

button

用 js 动态修改伪元素位置

button

二、css 变量的使用

1、纯 css：

定义：--key: value

使用：var(--key)

2、配合 html：

定义：style="--key: value"

3、配合js：

读取变量：ele.style.getPropertyValue()

设置变量：ele.style.setProperty()

删除变量：ele.style.removeProperty()

此后，Js 用于响应事件修改变量（摘自张鑫旭老师文章）

全局注册mousedown事件，将鼠标位置实时放在body 与html元素上

/**

结合 css 实现点击任意位置出现文本的效果

http://js.jirengu.com/dihijukiqo/1/edit

body

此时的 js 相当于为 css 提供了接口，CSS变量成为了CSS API接口，只管调用就是了。。

三、css 变量可应用的领域

1、可用在与定位有关的动画与交互上，如上示例

2、css 变量可继承，设置后对当前元素与子元素生效，可用于切换组件状态，皮肤，网站整体风格

3、css 变量值为数字时，除定位外可用于一些计算进行布局

这里配合grid做一个列数可控的布局：http://js.jirengu.com/lacudayice/1/edit?html,css,output

<

与 less sass 的变量相比，css 变量是浏览器原生支持的，且增加了一种 css 与 js 的通信方式，css 变量可扩展且灵活，与 html js 搭配会是一种新的思维，并且目前的兼容性也还不错，后面写样式和交互就可以考虑起来啦~

此外需要提一下：上面的宫格中使用 attr() 函数，这也是一种在css中使用变量的方式，data-content 即是 html 标签的属性，当 data-content 被修改时，css也会同步更新。

参考：

阮一峰：CSS 变量教程

张鑫旭：CSS变量对JS交互组件开发带来的提升与变革

妙用 CSS变量，让你的 CSS 变得更心动