這篇文章給大家分享的是有關(guān)css中自定義屬性和聚光燈效果的實現(xiàn)方法的內(nèi)容。小編覺得挺實用的,因此分享給大家做個參考,一起跟隨小編過來看看吧。
成都創(chuàng)新互聯(lián)主營天全網(wǎng)站建設(shè)的網(wǎng)絡(luò)公司,主營網(wǎng)站建設(shè)方案,重慶APP軟件開發(fā),天全h5微信平臺小程序開發(fā)搭建,天全網(wǎng)站營銷推廣歡迎天全等地區(qū)企業(yè)咨詢
簡介
CSS Variables,一個并不是那么新的東西,但對css來說絕對是一場革命。
之前使用變量的時候,需要借助sass、less等預(yù)處理工具來實現(xiàn),現(xiàn)在我們可以直接使用css來聲明變量。
兼容性
老規(guī)矩,先來看下兼容性
兼容性一片綠,紅的那不是還有兩個嗎?做大事怎么能拘小節(jié)呢,讓它咕嚕(gun)一邊去吧。
語法
語法有點難看但很簡單, --*
來聲明變量名, var(--*)
來使用,也許你要問了,為什么使用 --
不用 $
一類的呢,唉,那不是sass、less兩個貨用了嗎
聲明和使用必須放在{}代碼塊里
body{ --bg-color: lightblue; background-color: var(--bg-color); }
代碼是不是很簡單,可以直接看效果,就不贅述了。
全局變量與變量覆蓋
在 :root
代碼塊里面聲明的變量就是全局變量,并且局部變量會覆蓋全局變量
:root{ --bg-color: red; } body{ --bg-color: lightblue; background-color: var(--bg-color); }
最后生效的是 --bg-color: lightblue
, bg-color
變量的值也就變成了 lightblue
變量的缺省值
完整的變量使用語法 var( [, ]? )
,當(dāng)變量沒有定義的時候,會使用后面的值??聪旅娴睦?/p>
body{ --1: red; color:var(--2, blue); }
上面代碼會在 body
的作用域里面查找 --2
變量,沒有的話就會查找全局,都沒有的話就會使用后面的值,所以最后生效的顏色就是blue
可以看到,上面我們的變量名直接使用了數(shù)字:joy:,css變量很叼的,不只是數(shù)字,漢字都是可以的。
參與計算
:root{ --bg-color: lightblue; --文字顏色: white; --fong-size: 30; } body{ background-color: var(--bg-color); } div{ color: var(--文字顏色); font-size: var(--fong-size)px; }
此時div里面的文字的大小是多少呢?是瀏覽器默認的大小,為什么不是咱們想象的30px呢,這是因為變量轉(zhuǎn)換的時候末尾會帶上空格, var(--fong-size)px
會轉(zhuǎn)換成 30 px
我們可以老老實實聲明變量的時候帶上單位
--fong-size: 30px;
或者使用 calc()
計算屬性
font-size: calc(var(--fong-size) * 1px);
js獲取與賦值
我們可以使用js來獲取和賦值css變量,你看,是不是老方便了,老鐵。
:root{ --bg-color: lightblue; } // 獲取 getComputedStyle(document.documentElement).getPropertyValue('--bg-color') // lightblue // 賦值 document.documentElement.style.setProperty('--bg-color', 'yellowgreen')
簡單應(yīng)用
上面我們介紹了css變量的聲明使用以及使用js來進行獲取和賦值的操作,接下來,我們完成個聚光燈的效果(我自己瞎起的,我也不知道應(yīng)該叫什么),諾,它長這樣。GIF圖有點卡頓:angry:,擔(dān)待著看吧
寫代碼之前我們來梳理下思路,怎么來實現(xiàn)這個效果,主要有以下幾步 1、聲明全局css變量 2、設(shè)置body為純黑背景,添加div并設(shè)置背景圖 3、將div的背景圖使用 clip-path
進行裁剪,使用變量設(shè)置圓心位置 4、添加鼠標(biāo)事件,動態(tài)更改css變量也就是圓心位置
接下來開始寫代碼
布局很簡單,就是一個div,我們主要說下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; }
使用 *
通配符簡單粗暴干掉瀏覽器默認樣式,body設(shè)置100%,這里使用了 vw
和 vh
單位,表示將視口的等分成100份, 100vw
就是100份寬就是100%的寬, vh
同理。
重點來了,使用css聲明了 --x
、 --y
兩個變量,然后在 div
樣式里裁剪時使用 clip-path: circle(100px at calc(var(--x) * 1px ) calc(var(--y) * 1px))
,我們使用 clip-path
裁剪了一個圓,它的語法如下
clip-path: circle(半徑 at 圓心X軸坐標(biāo) 圓心Y軸坐標(biāo) )
更多關(guān)于 clip-path
的知識請戳:point_down:這里
此時,頁面上顯示了一個這樣的圓
最后一步,我們添加鼠標(biāo)跟隨事件,并更改 --x
和 --y
的值
document.addEventListener('mouseover', function(e){ document.documentElement.style.setProperty('--x', e.clientX) document.documentElement.style.setProperty('--y', e.clientY) })
此時,我們使用css變量完成了一個簡單的效果,css變量還有更多的使用場景,請盡情的發(fā)揮吧。
詳細代碼,請移駕 github
小結(jié)
1、可以嵌套使用
:root{ --green: green; --bgcolor: var(--green); }
2、變量的不合法
div { --color: 10px; background-color: yellow; background-color: var(--color, green); }
此時div的背景色是什么呢?
A 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)
感謝各位的閱讀!關(guān)于“css中自定義屬性和聚光燈效果的實現(xiàn)方法”這篇文章就分享到這里了,希望以上內(nèi)容可以對大家有一定的幫助,讓大家可以學(xué)到更多知識,如果覺得文章不錯,可以把它分享出去讓更多的人看到吧!
文章名稱:css中自定義屬性和聚光燈效果的實現(xiàn)方法
標(biāo)題路徑:http://muchs.cn/article48/ighshp.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供動態(tài)網(wǎng)站、服務(wù)器托管、定制網(wǎng)站、品牌網(wǎng)站制作、ChatGPT、營銷型網(wǎng)站建設(shè)
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源: 創(chuàng)新互聯(lián)