您好,登錄后才能下訂單哦!
這篇文章給大家分享的是有關(guān)css中自定義屬性和聚光燈效果的實(shí)現(xiàn)方法的內(nèi)容。小編覺得挺實(shí)用的,因此分享給大家做個(gè)參考,一起跟隨小編過(guò)來(lái)看看吧。
簡(jiǎn)介
CSS Variables,一個(gè)并不是那么新的東西,但對(duì)css來(lái)說(shuō)絕對(duì)是一場(chǎng)革命。
之前使用變量的時(shí)候,需要借助sass、less等預(yù)處理工具來(lái)實(shí)現(xiàn),現(xiàn)在我們可以直接使用css來(lái)聲明變量。
兼容性
老規(guī)矩,先來(lái)看下兼容性
兼容性一片綠,紅的那不是還有兩個(gè)嗎?做大事怎么能拘小節(jié)呢,讓它咕嚕(gun)一邊去吧。
語(yǔ)法
語(yǔ)法有點(diǎn)難看但很簡(jiǎn)單, --*
來(lái)聲明變量名, var(--*)
來(lái)使用,也許你要問(wèn)了,為什么使用 --
不用 $
一類的呢,唉,那不是sass、less兩個(gè)貨用了嗎
聲明和使用必須放在{}代碼塊里
body{ --bg-color: lightblue; background-color: var(--bg-color); }
代碼是不是很簡(jiǎn)單,可以直接看效果,就不贅述了。
全局變量與變量覆蓋
在 :root
代碼塊里面聲明的變量就是全局變量,并且局部變量會(huì)覆蓋全局變量
:root{ --bg-color: red; } body{ --bg-color: lightblue; background-color: var(--bg-color); }
最后生效的是 --bg-color: lightblue
, bg-color
變量的值也就變成了 lightblue
變量的缺省值
完整的變量使用語(yǔ)法 var( [, ]? )
,當(dāng)變量沒(méi)有定義的時(shí)候,會(huì)使用后面的值??聪旅娴睦?/p>
body{ --1: red; color:var(--2, blue); }
上面代碼會(huì)在 body
的作用域里面查找 --2
變量,沒(méi)有的話就會(huì)查找全局,都沒(méi)有的話就會(huì)使用后面的值,所以最后生效的顏色就是blue
可以看到,上面我們的變量名直接使用了數(shù)字:joy:,css變量很叼的,不只是數(shù)字,漢字都是可以的。
參與計(jì)算
:root{ --bg-color: lightblue; --文字顏色: white; --fong-size: 30; } body{ background-color: var(--bg-color); } div{ color: var(--文字顏色); font-size: var(--fong-size)px; }
此時(shí)div里面的文字的大小是多少呢?是瀏覽器默認(rèn)的大小,為什么不是咱們想象的30px呢,這是因?yàn)樽兞哭D(zhuǎn)換的時(shí)候末尾會(huì)帶上空格, var(--fong-size)px
會(huì)轉(zhuǎn)換成 30 px
我們可以老老實(shí)實(shí)聲明變量的時(shí)候帶上單位
--fong-size: 30px;
或者使用 calc()
計(jì)算屬性
font-size: calc(var(--fong-size) * 1px);
js獲取與賦值
我們可以使用js來(lái)獲取和賦值css變量,你看,是不是老方便了,老鐵。
:root{ --bg-color: lightblue; } // 獲取 getComputedStyle(document.documentElement).getPropertyValue('--bg-color') // lightblue // 賦值 document.documentElement.style.setProperty('--bg-color', 'yellowgreen')
簡(jiǎn)單應(yīng)用
上面我們介紹了css變量的聲明使用以及使用js來(lái)進(jìn)行獲取和賦值的操作,接下來(lái),我們完成個(gè)聚光燈的效果(我自己瞎起的,我也不知道應(yīng)該叫什么),諾,它長(zhǎng)這樣。GIF圖有點(diǎn)卡頓:angry:,擔(dān)待著看吧
寫代碼之前我們來(lái)梳理下思路,怎么來(lái)實(shí)現(xiàn)這個(gè)效果,主要有以下幾步 1、聲明全局css變量 2、設(shè)置body為純黑背景,添加div并設(shè)置背景圖 3、將div的背景圖使用 clip-path
進(jìn)行裁剪,使用變量設(shè)置圓心位置 4、添加鼠標(biāo)事件,動(dòng)態(tài)更改css變量也就是圓心位置
接下來(lái)開始寫代碼
布局很簡(jiǎn)單,就是一個(gè)div,我們主要說(shuō)下css樣式
:root{ --x: 40; --y: 40; } *{ padding: 0; margin: 0; } body{ width: 100vw; height: 100vh; background: #000; } div{ 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; }
使用 *
通配符簡(jiǎn)單粗暴干掉瀏覽器默認(rèn)樣式,body設(shè)置100%,這里使用了 vw
和 vh
單位,表示將視口的等分成100份, 100vw
就是100份寬就是100%的寬, vh
同理。
重點(diǎn)來(lái)了,使用css聲明了 --x
、 --y
兩個(gè)變量,然后在 div
樣式里裁剪時(shí)使用 clip-path: circle(100px at calc(var(--x) * 1px ) calc(var(--y) * 1px))
,我們使用 clip-path
裁剪了一個(gè)圓,它的語(yǔ)法如下
clip-path: circle(半徑 at 圓心X軸坐標(biāo) 圓心Y軸坐標(biāo) )
更多關(guān)于 clip-path
的知識(shí)請(qǐng)戳:point_down:這里
此時(shí),頁(yè)面上顯示了一個(gè)這樣的圓
最后一步,我們添加鼠標(biāo)跟隨事件,并更改 --x
和 --y
的值
document.addEventListener('mouseover', function(e){ document.documentElement.style.setProperty('--x', e.clientX) document.documentElement.style.setProperty('--y', e.clientY) })
此時(shí),我們使用css變量完成了一個(gè)簡(jiǎn)單的效果,css變量還有更多的使用場(chǎng)景,請(qǐng)盡情的發(fā)揮吧。
詳細(xì)代碼,請(qǐng)移駕 github
小結(jié)
1、可以嵌套使用
:root{ --green: green; --bgcolor: var(--green); }
2、變量的不合法
div { --color: 10px; background-color: yellow; background-color: var(--color, green); }
此時(shí)div的背景色是什么呢?
A rgba(0,0,0,0) B 10px C yellow D green
答案是 A
簡(jiǎn)單來(lái)說(shuō)是變量聲明的時(shí)候不是合法的,背景色顯然不能是 10px
,所以瀏覽器就會(huì)使用默認(rèn)值,這個(gè)默認(rèn)值并不是使用變量的默認(rèn)值,是瀏覽器自己的默認(rèn)值 background-color: var(--color, green)
就會(huì)變成 background-color: rgba(0,0,0,0)
感謝各位的閱讀!關(guān)于“css中自定義屬性和聚光燈效果的實(shí)現(xiàn)方法”這篇文章就分享到這里了,希望以上內(nèi)容可以對(duì)大家有一定的幫助,讓大家可以學(xué)到更多知識(shí),如果覺得文章不錯(cuò),可以把它分享出去讓更多的人看到吧!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。