css怎么实现聚光灯效果

　　介绍

小编给大家分享一下css怎么实现聚光灯效果,希望大家阅读完这篇文章后大所收获、下面让我们一起去探讨吧!

<强>简介

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

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

<强>兼容性

老规矩,先来看下兼容性

css怎么实现聚光灯效果

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

<强>语法

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

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

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

css怎么实现聚光灯效果

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

<强>全局变量与变量覆盖

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

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

<强>变量的缺省值

完整的变量使用语法<代码> var([,] ?) ,当变量没有定义的时候,会使用后面的值。看下面的例子

身体{ 　　——1:红色; 　　颜色:var(, 2、蓝色); 　　}

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

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

参与计算

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

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

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

——fong-size: 30 px;

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

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

css怎么实现聚光灯效果

<强> 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图有点卡顿:愤怒的:,担待着看吧

css怎么实现聚光灯效果

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

接下来开始写代码

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

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

css怎么实现聚光灯效果