上海高端网站建设公,厦门seo搜索引擎优化,个人网站怎么注册,教育机构客户管理系统简介CSS Variables#xff0c;一个并不是那么新的东西#xff0c;但对css来说绝对是一场革命。之前使用变量的时候#xff0c;需要借助sass、less等预处理工具来实现#xff0c;现在我们可以直接使用css来声明变量。兼容性老规矩#xff0c;先来看下兼容性兼容性一片绿一个并不是那么新的东西但对css来说绝对是一场革命。之前使用变量的时候需要借助sass、less等预处理工具来实现现在我们可以直接使用css来声明变量。兼容性老规矩先来看下兼容性兼容性一片绿红的那不是还有两个吗做大事怎么能拘小节呢让它咕噜(gun)一边去吧。语法语法有点难看但很简单 --* 来声明变量名 var(--*) 来使用也许你要问了为什么使用 -- 不用 $ 一类的呢唉那不是sass、less两个货用了吗声明和使用必须放在{}代码块里1234body{--bg-color: lightblue;background-color: var(--bg-color);}代码是不是很简单可以直接看效果就不赘述了。全局变量与变量覆盖在 :root 代码块里面声明的变量就是全局变量并且局部变量会覆盖全局变量1234567:root{--bg-color: red;}body{--bg-color: lightblue;background-color: var(--bg-color);}最后生效的是 --bg-color: lightblue bg-color 变量的值也就变成了 lightblue变量的缺省值完整的变量使用语法 var( [, ]? ) 当变量没有定义的时候会使用后面的值。看下面的例子1234body{--1: red;color:var(--2, blue);}上面代码会在 body 的作用域里面查找 --2 变量没有的话就会查找全局都没有的话就会使用后面的值所以最后生效的颜色就是blue可以看到上面我们的变量名直接使用了数字:joy:css变量很叼的不只是数字汉字都是可以的。参与计算123456789101112:root{--bg-color: lightblue;--文字颜色: white;--fong-size: 30;}body{background-color: var(--bg-color);}p{color: var(--文字颜色);font-size: var(--fong-size)px;}此时p里面的文字的大小是多少呢是浏览器默认的大小为什么不是咱们想象的30px呢这是因为变量转换的时候末尾会带上空格 var(--fong-size)px 会转换成 30 px我们可以老老实实声明变量的时候带上单位1--fong-size: 30px;或者使用 calc() 计算属性1font-size: calc(var(--fong-size) * 1px);js获取与赋值我们可以使用js来获取和赋值css变量你看是不是老方便了老铁。123456789:root{--bg-color: lightblue;}// 获取getComputedStyle(document.documentElement).getPropertyValue(--bg-color) // lightblue// 赋值document.documentElement.style.setProperty(--bg-color, yellowgreen)简单应用上面我们介绍了css变量的声明使用以及使用js来进行获取和赋值的操作接下来我们完成个聚光灯的效果(我自己瞎起的我也不知道应该叫什么)诺它长这样。GIF图有点卡顿:angry:担待着看吧写代码之前我们来梳理下思路怎么来实现这个效果主要有以下几步 1、声明全局css变量 2、设置body为纯黑背景添加p并设置背景图 3、将p的背景图使用 clip-path 进行裁剪使用变量设置圆心位置 4、添加鼠标事件动态更改css变量也就是圆心位置接下来开始写代码布局很简单就是一个p,我们主要说下css样式1234567891011121314151617181920:root{--x: 40;--y: 40;}*{padding: 0;margin: 0;}body{width: 100vw;height: 100vh;background: #000;}p{width: 100%;height: 100%;background: url(../images/bg.png) 0 0 no-repeat;clip-path: circle(100px at calc(var(--x) * 1px ) calc(var(--y) * 1px));background-size: cover;}使用 * 通配符简单粗暴干掉浏览器默认样式body设置100%这里使用了 vw 和 vh 单位表示将视口的等分成100份 100vw 就是100份宽就是100%的宽 vh 同理。重点来了使用css声明了 --x 、 --y 两个变量然后在 p 样式里裁剪时使用 clip-path: circle(100px at calc(var(--x) * 1px ) calc(var(--y) * 1px)) ,我们使用 clip-path 裁剪了一个圆它的语法如下1clip-path: circle(半径 at 圆心X轴坐标 圆心Y轴坐标 )此时页面上显示了一个这样的圆最后一步我们添加鼠标跟随事件并更改 --x 和 --y 的值1234document.addEventListener(mouseover, function(e){document.documentElement.style.setProperty(--x, e.clientX)document.documentElement.style.setProperty(--y, e.clientY)})此时我们使用css变量完成了一个简单的效果css变量还有更多的使用场景请尽情的发挥吧。详细代码请移驾 github小结1、可以嵌套使用1234:root{--green: green;--bgcolor: var(--green);}2、变量的不合法12345p {--color: 10px;background-color: yellow;background-color: var(--color, green);}此时p的背景色是什么呢1A rgba(0,0,0,0) B 10px C yellow D green答案是 A简单来说是变量声明的时候不是合法的背景色显然不能是 10px 所以浏览器就会使用默认值这个默认值并不是使用变量的默认值是浏览器自己的默认值 background-color: var(--color, green) 就会变成 background-color: rgba(0,0,0,0)
