css也可以使用变量（CSS 自定义属性）

css也可以使用变量（CSS 自定义属性）

今天看到这本掘金小册的试读文章玩转CSS的艺术之美-变量计算；记录一下学习成果;

基础部分

阮一峰老师的网络日志上有详细教程《css变量教程》，

1. –myVariable:10   // 双横线- -用于声明CSS自定义属性    /*变量名大小写敏感 */
2. var(<custom-property-name> , <declaration-value>? )   // var()函数用于读取变量
   · var()函数的第二个参数表示后备值 (可选)；
   · 变量值不能用做属性名；
   · 变量为字符串可以与字符串拼接;
   · 变量为数字不能与单位直接拼接，可使用calc( )函数进行处理 ，如：calc(var(–myVariable)*1px)
   · 作用域在当前节点块作用域及其子节点块作用域下有效 ，有CSS优先级
3. js操作

// 设置CSS自定义属性    CSSStyleDeclaration.setProperty();

用法：documentElement.style.setProperty(propertyName[, value][,priority]);
// 参数
propertyName 是一个 DOMString ，代表被更改的CSS属性。
value可选 是一个 DOMString ，含有新的属性值。如果没有指定, 则当作空字符串。
注意: value 不能包含 “!important” --那个应该使用 priority 参数.
priority可选 是一个 DOMString 允许设置 “important” CSS 优先级。如果没有指定, 则当作空字符串。

// 读取CSS自定义属性    CSSStyleDeclaration.getPropertyValue();

用法：documentElement.style.getPropertyValue(property);
// 参数
property 是一个 DOMString，是需要查询的CSS 属性名称。
返回包含查找属性的值。若对应属性没有设置，则返回空字符串。

// 删除CSS自定义属性    CSSStyleDeclaration.removeProperty();

用法：documentElement.style.removeProperty(property);
// 参数
property 是一个 DOMString ，代表要移除的属性名。注意由多个单词组成的属性要用连字符连接各个单词，不接收驼峰命名法的形式。
返回被移除的属性在移除前的属性值。

实践部分

接下来实现几个效果，来进一步熟悉

• 一个加载的效果
  

分析：
· 给每个条形添加改变高度的动画
· 给每根条形添加依次递增的动画延迟时间

1.创建基本结构

<ul>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
 </ul>

<style>
	ul {
   
      list-style: none;
      dis