這篇文章主要介紹了CSS變量帶來的質(zhì)變有哪些，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

成都創(chuàng)新互聯(lián)服務(wù)項目包括霍州網(wǎng)站建設(shè)、霍州網(wǎng)站制作、霍州網(wǎng)頁制作以及霍州網(wǎng)絡(luò)營銷策劃等。多年來，我們專注于互聯(lián)網(wǎng)行業(yè)，利用自身積累的技術(shù)優(yōu)勢、行業(yè)經(jīng)驗、深度合作伙伴關(guān)系等，向廣大中小型企業(yè)、政府機構(gòu)等提供互聯(lián)網(wǎng)行業(yè)的解決方案，霍州網(wǎng)站推廣取得了明顯的社會效益與經(jīng)濟效益。目前，我們服務(wù)的客戶以成都為中心已經(jīng)輻射到霍州省份的部分城市，未來相信會繼續(xù)擴大服務(wù)區(qū)域并繼續(xù)獲得客戶的支持與信任！

一、CSS變量帶來的質(zhì)變

CSS變量帶來的提升絕不僅僅是節(jié)約點CSS代碼，以及降低CSS開發(fā)和維護成本。

更重要的是，把組件中眾多的交互開發(fā)從原來的JS轉(zhuǎn)移到了CSS代碼中，讓組件代碼更簡潔，同時讓視覺表現(xiàn)實現(xiàn)更加靈活了。

我們通過幾個案例來說明這一變化。

二、簡化了JS對DOM設(shè)置的介入

案例1：loading進度效果

例如實現(xiàn)下圖所示的變量效果：

外面有一層背景層，然后里面有進度條，還有進度值。

在過去，會使用兩層div元素，然后JS去改變里面有顏色條條的寬度，同時設(shè)置進度值。

也就是，loading的進度效果和進度值全部都是JS直接設(shè)置的，JS同時對應(yīng)多個HTML信息。

現(xiàn)在，有了CSS變量，JS所做的工作就非常簡單，僅僅在容器元素上設(shè)置loading進度值即可，其他什么都不需要做，至于樣式表現(xiàn)，或者進度值如何顯示，全部都是CSS的事情。

相關(guān)代碼如下：

<label>圖片1：</label>
<div class="bar" style="--percent: 60;"></div>
<label>圖片2：</label>
<div class="bar" style="--percent: 40;"></div>
<label>圖片3：</label>
<div class="bar" style="--percent: 20;"></div>

.bar {
    height: 20px; width: 300px;
    background-color: #f5f5f5;
}
.bar::before {
    display: block;
    counter-reset: progress var(--percent);
    content: counter(progress) '%\2002';
    width: calc(1% * var(--percent));
    color: #fff;
    background-color: #2486ff;
    text-align: right;
    white-space: nowrap;
    overflow: hidden;
}

可以看到，我們只需要一層div標簽，DOM層級簡單了，然后，需要修改的HTML變化項僅僅是一個 --percent 自定義屬性而已。

眼見為實，您可以狠狠地點擊這里： CSS百分比變量與進度條demo

三、CSS變量成為了CSS API接口

過去點擊出現(xiàn)提示，切換等效果都需要JS針對特定的元素進行樣式設(shè)置，現(xiàn)在有了CSS變量，我們只需要一段通用的非常簡單的全局JS就可以了，JS就可以自己玩耍去了，其他效果，全部交給JS處理。

這段JS如下：

/**
 * @author zhangxinxu(.com)
 * @description 點擊頁面任意位置，標記坐標位置
 */
document.addEventListener('mousedown', function (event) {
    var target = event.target;
    var body = document.body;
    var html = document.documentElement;

    // 設(shè)置自定義屬性值
    body.style.setProperty('--pagex', event.pageX);
    body.style.setProperty('--pagey', event.pageY);

    html.style.setProperty('--clientx', event.clientX);
    html.style.setProperty('--clienty', event.clientY);
    html.style.setProperty('--scrolly', window.pageYOffset);

    target.style.setProperty('--offsetx', event.offsetX);
    target.style.setProperty('--offsety', event.offsetY);
    target.parentElement.style.setProperty('--target-width', target.clientWidth);
    target.parentElement.style.setProperty('--target-height', target.clientHeight);
    target.parentElement.style.setProperty('--target-left', target.offsetLeft);
    target.parentElement.style.setProperty('--target-top', target.offsetTop);
});

可以看到，JavaScript代碼再也不負責任何與交互行為相關(guān)的邏輯，直接變成了工具人，一個單純地傳遞點擊坐標位置，以及點擊元素偏移和尺寸信息的工具人。

CSS得到了什么呢？

得到了一個巨大的寶藏，一個隨時可以拿來使用的寶藏。

我想要點擊按鈕的時候有什么花哨的反饋，或者點擊頁面空白也來個創(chuàng)意的交互提示，完全不成問題，隨用隨取，無比方便，無比自由。

可以說，上面這段JS，或者類似的JS代碼是未來web開發(fā)的標配。

我們來看看上面的代碼可以實現(xiàn)怎樣的效果。

案例2：按鈕點擊圈圈效果

點擊按鈕的時候有個圈圈放大的效果，圈圈放大的中心點就是點擊的位置。

效果如下GIF所示：

核心CSS代碼如下：

.btn:not([disabled]):active::after {
    transform: translate(-50%,-50%) scale(0);
    opacity: .3;
    transition: 0s;
}
.btn::after {
    content: "";
    display: block;
    position: absolute;
    width: 100%; height: 100%;
    left: var(--x, 0); top: var(--y, 0);
    pointer-events: none;
    background: radial-gradient(circle, currentColor 10%, transparent 10.01%) no-repeat 50%;
    transform: translate(-50%,-50%) scale(10);
    opacity: 0;
    transition: transform .3s, opacity .8s;
}

:active 時候隱藏，同時設(shè)置過渡時間為0。于是，點擊釋放的時候，就會有過渡效果。

大家可以訪問這個地址進行體驗： https://xy-ui.codelabo.cn/docs/#/xy-button

案例3：點擊頁面出現(xiàn)文字效果

又例如，點擊本文頁面任意位置都會出現(xiàn)下圖所示的提示信息。

就是下面上面那段萬能工具人JS加下面這段CSS實現(xiàn)的：

body:active::after {
    transform: translate(-50%, -100%);
    opacity: 0.5;
    transition: 0s;
    left: -999px;
}
body::after {
    content: 'zhangxinxu.com';
    position:fixed;
    z-index: 999;
    left: calc(var(--clientx, -999) * 1px);
    top: calc(var(--clienty, -999) * 1px);
    transform: translate(-50%, calc(-100% - 20px));
    opacity: 0;
    transition: transform .3s, opacity .5s;
}

案例3：兩個按鈕下劃線滑來滑去效果

以前，下圖這種點擊選項卡按鈕，然后下劃線滑來滑去，尺寸還變化效果，使用純CSS實現(xiàn)很考驗功力，幾乎99.99%的開發(fā)都是借助JS去查詢對應(yīng)DOM元素，然后設(shè)置寬高和位置實現(xiàn)的交互效果。

現(xiàn)在，有了工具人JS，只需要一段CSS就可以搞定了，甚至文字的高亮切換都可以純CSS搞定，就是這么神奇。

下面這里的效果就是實現(xiàn)的實時效果（若沒有效果，請訪問原文 張鑫旭 https://www.zhangxinxu.com/wordpress/?p=9477 ）：

點擊任意的選項卡元素，就可以看到下劃線滑到對應(yīng)位置，同時為高亮的效果。

相關(guān)代碼如下：

<div class="yw-tab-tab"> 
  <a href="javascript:" class="yw-tab-a">QQ閱讀</a>
  <a href="javascript:" class="yw-tab-a">起點讀書</a>
  <a href="javascript:" class="yw-tab-a">紅袖讀書</a>
  <a href="javascript:" class="yw-tab-a">飛讀免費小說</a>
</div>

.yw-tab-tab {
    position: relative;
    display: flex;
    max-width: 414px;
    justify-content: space-between;
    border-bottom: 1px solid #717678;
    background-color: #fff;
    margin: 30px auto;
}
.yw-tab-tab::before,
.yw-tab-tab::after {
    position: absolute;
    width: calc(var(--target-width, 0) * 1px);
    left: calc(var(--target-left, -299) * 1px);
    color: #2a80eb;
}
.yw-tab-tab[style]::before,
.yw-tab-tab[style]::after  {
    content: '';
}
.yw-tab-tab::before {
    background-color: currentColor;
    height: calc(var(--target-height) * 1px);
    mix-blend-mode: overlay;
}
.yw-tab-tab::after {
    border-bottom: solid;    
    bottom: -2px;
    transition: left .2s, width .2s;
}
.yw-tab-a {
    color: #717678;
    padding: 10px 0;
}

如果是移動端訪問，需要 mousedown 事件修改成 touchstart ，我就懶得調(diào)整了。

四、web組件的很多API接口可以拜拜了

以前web組件有一個什么功能，就新增一個API接口，看上去很厲害，實際上，加著加著，API越來越多，組件也越來越重，學習成本也越來越高，最后走向了死胡同，變得笨重，迎來了滅亡。

現(xiàn)在，可以改變思路了。

那些與交互表現(xiàn)密切相關(guān)的功能，事實上僅僅在組件容器元素上傳遞CSS自定義屬性就可以了，無需負責具體的定位，顯隱，或者樣式變化，全部交給CSS。

因為設(shè)計表現(xiàn)的東西是上層的，靈活的，個性的，應(yīng)該在CSS層面進行駕馭才是合理的，匹配的。

例如上面提到的loading組件，無論是條狀的還是餅狀的都是這樣的處理邏輯，只負責傳遞進度值，樣式無需關(guān)心。

又例如滑條框（如下圖Ant Design中的滑條的位置和提示效果）、popup提示框等都可以通過一個CSS自定義屬性完成，JS僅傳參不負責UI樣式。

實在太晚了，已經(jīng)0:56了，我就不出demo演示了，大家領(lǐng)會去精神即可。

感謝你能夠認真閱讀完這篇文章，希望小編分享的“CSS變量帶來的質(zhì)變有哪些”這篇文章對大家有幫助，同時也希望大家多多支持創(chuàng)新互聯(lián)，關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，更多相關(guān)知識等著你來學習!

網(wǎng)頁標題：CSS變量帶來的質(zhì)變有哪些
地址分享：http://sd-ha.com/article38/popdpp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站排名、商城網(wǎng)站、小程序開發(fā)、響應(yīng)式網(wǎng)站、網(wǎng)站改版、域名注冊

廣告

聲明：本網(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)