css自定义属性和聚光灯效果怎么实现

　　介绍

这篇文章将为大家详细讲解有关css自定义属性和聚光灯效果怎么实现,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。

简介

css变量,一个并不是那么新的东西,但对css来说绝对是一场革命。

之前使用变量的时候,需要借助sass,少等预处理工具来实现,现在我们可以直接使用css来声明变量。

兼容性

老规矩,先来看下兼容性

兼容性一片绿,红的那不是还有两个吗?做大事怎么能拘小节呢,让它咕噜(枪)一边去吧。

语法

语法有点难看但很简单,<代码>——*> var(——*) 来使用,也许你要问了,为什么使用<代码>,不用<代码> 一元类的呢,唉,那不是sass,少了两个货用了吗

<>强声明和使用必须放在{}代码块里

身体{ 　　——bg-color: lightblue; 　　background - color: var (——bg-color); 　　}

代码是不是很简单,可以直接看效果,就不赘述了。

全局变量与变量覆盖

在<代码>:根> :根{ 　　——bg-color:红色; 　　} 　　身体{ 　　——bg-color: lightblue; 　　background - color: var (——bg-color); 　　}

最后生效的是<代码>——bg-color: lightblue ,<代码> bg-color> lightblue

变量的缺省值

完整的变量使用语法<代码> var([,] ?)> <前类="刷:php;工具栏:false”>身体{ 　　——1:红色; 　　颜色:var(, 2、蓝色); 　　}

上面代码会在身体<代码> 的作用域里面查找<代码>,2>

可以看的到,上面我们的变量名直接使用了数字,css变量很叼的,不只是数字,汉字都是可以的。

参与计算

:根{ 　　——bg-color: lightblue; 　　——文字颜色:白色; 　　——fong-size: 30; 　　} 　　身体{ 　　background - color: var (——bg-color); 　　} 　　div { 　　颜色:var(——文字颜色); 　　字体大小:var (——fong-size) px; 　　}

此时p里面的文字的大小是多少呢?是浏览器默认的大小,为什么不是咱们想象的30 px呢,这是因为变量转换的时候末尾会带上空格,<代码> var (——fong-size) px>

我们可以老老实实声明变量的时候带上单位

——fong-size: 30 px;

或者使用<代码>钙()计算属性

字体大小:钙(var (——fong-size) * 1 px);

js获取与赋值

我们可以使用js来获取和赋值css变量,你看,是不是老方便的了,老铁。

:根{ 　　——bg-color: lightblue; 　　}//获取 　　getComputedStyle (document.documentElement) .getPropertyValue (& # 39;——bg-color& # 39;)//lightblue//赋值 　　document.documentElement.style.setProperty (& # 39;——bg-color& # 39; & # 39;黄绿色# 39;)

简单应用

上面我们介绍了css变量的声明使用以及使用js来进行获取和赋值的操作,接下来,我们完成个聚光灯的效果(我自己瞎起的,我也不知道应该叫什么),诺,它长这样gif图有点卡顿,担待着看吧

写代码之前我们来梳理下思路,怎么来实现这个效果,主要有以下几步
1,声明全局css变量
2,设置的身体为纯黑背景,添加p并设置背景图
3,将p的背景图使用<代码> clip-path 进行裁剪,使用变量设置圆心位置
4,添加鼠标事件,动态更改css变量也就是圆心位置

接下来开始写代码

布局很简单,就是一个div,我们主要说下css样式

:根{ 　　——x: 40; 　　——y: 40岁; 　　} 　　* { 　　填充:0; 　　保证金:0; 　　} 　　身体{ 　　宽度:100大众; 　　身高:100 vh; 　　背景:# 000; 　　} 　　div { 　　宽度:100%; 　　高度:100%; 　　背景:url(& # 39; . ./图片/bg.png& # 39;) 0 0不再重演; 　　在calc clip-path:圆(100 px (var (- x) * 1 px)钙(var (y) * 1 px)); 　　background-size:封面; 　　}

使用<代码> * 通配符简单粗暴干掉浏览器默认样式,身体设置100%,这里使用了大众

css自定义属性和聚光灯效果怎么实现