13518219792
本篇内容介绍了“怎么使用CSS变量实现心动效果”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！
创新互联公司主要从事成都网站建设、网站制作、网页设计、企业做网站、公司建网站等业务。立足成都服务彭阳,10多年网站建设经验,价格优惠、服务专业,欢迎来电咨询建站服务:18982081108
前言
「CSS变量」又叫「CSS自定义属性」，为什么会突然提起这个很少人用到的东西呢？因为最近在重构个人官网，不知道为什么突然喜欢用上「CSS变量」，可能其自身隐藏的魅力，让笔者对它刮目相看。
谈到为什么会在CSS中使用变量，下面举个栗子，估计大家一看就会明白。
/* 不使用CSS变量 */ .title { background-color: red; } .desc { background-color: red; } /* 使用CSS变量 */ :root { --bg-color: red; } .title { background-color: var(--bg-color); } .desc { background-color: var(--bg-color); }看完可能会觉得使用「CSS变量」的代码量多了一点，但是有没有想到突然某天万恶的策划小哥哥和设计小姐姐说要做一个换肤功能。按照平常的思路，估计有些同学就会按照默认颜色主题增加一份对照的新颜色主题CSS文件。这样每次新增需求都同时维护几套主题颜色多麻烦啊。
此时「CSS变量」就派上用场了，提前跟设计小姐姐规范好各种需要变换的颜色并通过「CSS变量」进行定义，通过JS批量操作这些定义好的「CSS变量」即可。这也是「变换主题颜色」的一种解决方案之一，好处在于只需写一套CSS代码。
["red", "blue", "green"].forEach(v => { const btn = document.getElementById(`${v}-theme-btn`); btn.addEventListener("click", () => document.body.style.setProperty("--bg-color", v)); });在此总结下CSS使用变量的好处：
减少样式代码的重复性
增加样式代码的扩展性
提高样式代码的灵活性
增多一种CSS与JS的通讯方式
不用深层遍历DOM改变某个样式
可能有些同学会问，Sass和Less早就实现了变量这个特性，何必再多此一举呢。可是细想一下，「CSS变量」对比Sass和Less的变量，又有它的过人之处。
浏览器原生特性，无需经过任何转译就可直接运行
DOM对象一员，极大便利了CSS与JS之间的联系
认识
本来打算用一半篇幅讲述「CSS变量」的规范和用法，但是网上一搜一大把就感觉没必要了，贴上阮一峰老师写的教程《CSS变量教程》。同时笔者也对「CSS变量」的细节地方进行一个整理，方便大家记忆。
声明：--变量名
读取：var(--变量名, 默认值)
类型
普通：只能用作属性值不能用作属性名
字符：与字符串拼接 "Hello, "var(--name)
数值：使用calc()与数值单位连用 var(--width) * 10px
作用域
范围：在当前元素块作用域及其子元素块作用域下有效
优先级别：内联样式 > ID选择器 > 类选择器 = 属性选择器 = 伪类选择器 > 标签选择器 = 伪元素选择器
接下来使用几个特别的场景展示「CSS变量」的魅力。还是那句话，「一样东西有使用的场景，那自然就会有它的价值」，那么用的人也会越来越多。
使用场景
其实「CSS变量」有一个特别好用的场景，那就是结合List元素集合使用。如果不明白这是什么，请继续往下看。
以下所有演示代码基于Vue文件，但HTML、CSS和JS分开书写，为了简化CSS的书写而使用Sass进行预处理，方便代码演示
条形加载条
一个条形加载条通常由几条线条组成，并且每条线条对应一个存在不同时延的相同动画，通过时间差运行相同的动画，从而产生加载效果。估计大部分的同学可能会把CSS代码写成以下这样。
