|
導讀網頁的本質就是超級文本標記語言,通過結合使用其他的Web技術(如:腳本語言、公共網關接口、組件等),可以創造出功能強大的網頁。因而,超級文本標記語言是萬維網(Web)編程的基礎,也就是說萬維網是建立... 網頁的本質就是超級文本標記語言,通過結合使用其他的Web技術(如:腳本語言、公共網關接口、組件等),可以創造出功能強大的網頁。因而,超級文本標記語言是萬維網(Web)編程的基礎,也就是說萬維網是建立在超文本基礎之上的。超級文本標記語言之所以稱為超文本標記語言,是因為文本中包含了所謂“超級鏈接”點。 本篇文章給大家帶來的內容是關于css自定義屬性和聚光燈效果的實現(代碼),有一定的參考價值,有需要的朋友可以參考一下,希望對你有所幫助。簡介CSS Variables,一個并不是那么新的東西,但對css來說絕對是一場革命。 之前使用變量的時候,需要借助sass、less等預處理工具來實現,現在我們可以直接使用css來聲明變量。 兼容性老規矩,先來看下兼容性
兼容性一片綠,紅的那不是還有兩個嗎?做大事怎么能拘小節呢,讓它咕嚕(gun)一邊去吧。 語法語法有點難看但很簡單, 聲明和使用必須放在{}代碼塊里 body{
--bg-color: lightblue;
background-color: var(--bg-color);
}
代碼是不是很簡單,可以直接看效果,就不贅述了。 全局變量與變量覆蓋在 :root{
--bg-color: red;
}
body{
--bg-color: lightblue;
background-color: var(--bg-color);
}最后生效的是 變量的缺省值完整的變量使用語法 body{
--1: red;
color:var(--2, blue);
}上面代碼會在 可以看到,上面我們的變量名直接使用了數字,css變量很叼的,不只是數字,漢字都是可以的。 參與計算:root{
--bg-color: lightblue;
--文字顏色: white;
--fong-size: 30;
}
body{
background-color: var(--bg-color);
}
div{
color: var(--文字顏色);
font-size: var(--fong-size)px;
}此時p里面的文字的大小是多少呢?是瀏覽器默認的大小,為什么不是咱們想象的30px呢,這是因為變量轉換的時候末尾會帶上空格, 我們可以老老實實聲明變量的時候帶上單位 --fong-size: 30px; 或者使用 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')簡單應用上面我們介紹了css變量的聲明使用以及使用js來進行獲取和賦值的操作,接下來,我們完成個聚光燈的效果(我自己瞎起的,我也不知道應該叫什么),諾,它長這樣。GIF圖有點卡頓,擔待著看吧
寫代碼之前我們來梳理下思路,怎么來實現這個效果,主要有以下幾步 接下來開始寫代碼 布局很簡單,就是一個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;
}使用 重點來了,使用css聲明了 clip-path: circle(半徑 at 圓心X軸坐標 圓心Y軸坐標 ) 此時,頁面上顯示了一個這樣的圓
最后一步,我們添加鼠標跟隨事件,并更改 document.addEventListener('mouseover', function(e){
document.documentElement.style.setProperty('--x', e.clientX)
document.documentElement.style.setProperty('--y', e.clientY)
})此時,我們使用css變量完成了一個簡單的效果,css變量還有更多的使用場景,請盡情的發揮吧。 詳細代碼,請移駕github 小結1、可以嵌套使用 :root{
--green: green;
--bgcolor: var(--green);
}2、變量的不合法 div {
--color: 10px;
background-color: yellow;
background-color: var(--color, green);
}此時p的背景色是什么呢? A rgba(0,0,0,0) B 10px C yellow D green 答案是 A 簡單來說是變量聲明的時候不是合法的,背景色顯然不能是 相關推薦: 以上就是css自定義屬性和聚光燈效果的實現(代碼)的詳細內容,更多請關注php中文網其它相關文章! 網站建設是一個廣義的術語,涵蓋了許多不同的技能和學科中所使用的生產和維護的網站。 |
溫馨提示:喜歡本站的話,請收藏一下本站!