css 写变量吗,CSS 变量

前几天在微信上看到了一篇文章，教做了一个炫酷的点击按钮，效果图如下：

鼠标不在上面

鼠标hover在按钮上时

这个效果用到了CSS变量，哇，觉得给我打开了一扇新大门，一下子觉得之前的代码写的太糟糕了。

下面总结一下CSS变量！

1. CSS变量声明及使用

CSS变量以--开头，例如--color就是一个名字为color的CSS变量。

CSS变量声明必须在声明块里，例如：

//CSS变量权重随选择器，但是不涉及!important；

//如果变量所在的选择器和使用变量的元素没有交集，是没有效果的。

:root{ //表示根元素，所有元素都可以使用

--height: 200px;

}

#list{ //只有id为list的元素才能用

--color: white;

}

p{

--num: 3

}

.hotel{

--pos: relative;

}

使用时：

body {

--blue: #369;

background-color: var(--blue);

}

//或者

body {

--red: #ef36ef;

}

p {

background-color: var(--red);

}

但是！下面这样的使用是不行的：

:root{

--fs: font-size;

var(--fs): 16px; //变量不能作为属性名

}

2. CSS变量名

CSS变量名并没有太多限定，甚至可以是纯数字、中文、日文、韩文，但是！不能包含 $ ，[ ，^ ，( ，% 等字符，可以有 - 或 _ ;

3. CSS 变量中需要注意的小tip

(1)如果CSS变量是数字，但是没带单位的话，不能像下面这样使用：

body {

--font-size：16;

background-color: var(--font-size)px;

}

必须要：

body {

--font-size：16px;

background-color: var(--font-size);

}

//或者

body {

--font-size：16;

background-color: calc(var(--font-size) * 1px);

//这里要特别注意calc函数使用的时候，运算符前后都要加空格！！！

}

(2)

CSS变量使用的完整语法为：var( [,

如果我们使用的变量没有被定义，则使用后面的默认值作为元素的属性值。

比如：

.box {

--1: #369;

}

body {

background-color: var(--1, #cd0000);

}

则此时的背景色是#cd0000;

如果变量值不合法，例如：

body {

--color: 20px;

background-color: #369;

background-color: var(--color, #cd0000);

}

此时，检测background-color值发现--color变量的值对于background-color不合法，那么此时background-color的值就是缺省值transparent！！。

这个缺省值不是上面说的默认值，所以，CSS变量中的默认值只适用于变量未定义的情况！

最后附一下那个炫酷按钮的代码吧

css hover 炫酷渐变

.container{

width: auto;

height: auto;

position: absolute;

top: 50%;

left: 50%;

transform: translate(-50%,-50%);

overflow: hidden;

}

.btn{

width: 380px;

height: 100px;

box-shadow: 0 1px 3px rgba(0,0,0,0.6);

border-radius: 200px;

background-color: #f62757;

text-align: center;

vertical-align: middle;

line-height: 100px;

font-size: 20px;

color: white;

position: relative;

font-weight: 600;

overflow: hidden;

}

span{

position: relative;

}

.btn::before {

--size: 0px;

content: '';

position: absolute;

left: var(--x);

top: var(--y);

width: var(--size);

height: var(--size);

background: radial-gradient(circle closest-side, #4405f7, transparent);

transform: translate(-50%, -50%);

transition: width .2s ease, height .2s ease;

}

.btn:hover::before {

--size: 400px;

}

I'm Awesome !

$('.btn').on('mousemove',function(e){

//offsetX，offsetY鼠标相对于事件源元素(srcElement)的X,Y坐标

const x = e.offsetX;

const y = e.offsetY;

e.target.style.setProperty('--x', `${ x }px`);

e.target.style.setProperty('--y', `${ y }px`);

});