前几天在微信上看到了一篇文章，教做了一个炫酷的点击按钮，效果图如下：
鼠标不在上面
鼠标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变量中的默认值只适用于变量未定义的情况！
最后附一下那个炫酷按钮的代码吧
<!DOCTYPE html>
<html>
<head>
<title>css hover 炫酷渐变</title>
<meta charset="utf-8">
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js"></script>
</head>
<body>
<style type="text/css">
.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;
}
</style>
<div class="container">
<div class="btn"><span>I'm Awesome ! </span></div>
</div>
<script type="text/javascript">
$('.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`);
});
</script>
</body>
</html>
