av激情亚洲男人的天堂国语,日韩欧美精品一中文字幕,无码av一区二区三区无码,国产又色又爽又刺激的a片,国产又色又爽又刺激的a片

妙用CSS變量，讓你的CSS變得更心動(dòng)

 前言

十多年的安居網(wǎng)站建設(shè)經(jīng)驗(yàn)，針對設(shè)計(jì)、前端、開發(fā)、售后、文案、推廣等六對一服務(wù)，響應(yīng)快，48小時(shí)及時(shí)工作處理。全網(wǎng)整合營銷推廣的優(yōu)勢是能夠根據(jù)用戶設(shè)備顯示端的尺寸不同，自動(dòng)調(diào)整安居建站的顯示方式，使網(wǎng)站能夠適用不同顯示終端，在瀏覽器中調(diào)整網(wǎng)站的寬度，無論在任何一種瀏覽器上瀏覽網(wǎng)站，都能展現(xiàn)優(yōu)雅布局與設(shè)計(jì)，從而大程度地提升瀏覽體驗(yàn)。成都創(chuàng)新互聯(lián)公司從事“安居網(wǎng)站設(shè)計(jì)”,“安居網(wǎng)站推廣”以來，每個(gè)客戶項(xiàng)目都認(rèn)真落實(shí)執(zhí)行。

「CSS變量」又叫「CSS自定義屬性」，為什么會突然提起這個(gè)很少人用到的東西呢？因?yàn)樽罱谥貥?gòu)個(gè)人官網(wǎng)，不知道為什么突然喜歡用上「CSS變量」，可能其自身隱藏的魅力，讓筆者對它刮目相看。

談到為什么會在CSS中使用變量，下面舉個(gè)栗子，估計(jì)大家一看就會明白。

 
 
 
 
    
  
  
  
  
  1. /* 不使用CSS變量 */  
    2.   
  
  
  
  2. .title {  
    3.   
  
  
  
  3.     background-color: red;  
    4.   
  
  
  
  4. }  
    5.   
  
  
  
  5. .desc {  
    6.   
  
  
  
  6.     background-color: red;  
    7.   
  
  
  
  7. }  
    8.   
  
  
  
  8. /* 使用CSS變量 */  
    9.   
  
  
  
  9. :root {  
    10.   
  
  
  
  10.     --bg-color: red;  
    11.   
  
  
  
  11. }  
    12.   
  
  
  
  12. .title {  
    13.   
  
  
  
  13.     background-color: var(--bg-color);  
    14.   
  
  
  
  14. }  
    15.   
  
  
  
  15. .desc { 
    16.   
  
  
  
  16.  
    17.   
  
  
  
  17.     background-color: var(--bg-color);  
    18.   
  
  
  
  18. } 
    19.

看完可能會覺得使用「CSS變量」的代碼量多了一點(diǎn)，但是有沒有想到突然某天萬惡的策劃小哥哥和設(shè)計(jì)小姐姐說要做一個(gè)換膚功能。按照平常的思路，估計(jì)有些同學(xué)就會按照默認(rèn)顏色主題增加一份對照的新顏色主題CSS文件。這樣每次新增需求都同時(shí)維護(hù)幾套主題顏色多麻煩啊。

此時(shí)「CSS變量」就派上用場了，提前跟設(shè)計(jì)小姐姐規(guī)范好各種需要變換的顏色并通過「CSS變量」進(jìn)行定義，通過JS批量操作這些定義好的「CSS變量」即可。這也是「變換主題顏色」的一種解決方案之一，好處在于只需寫一套CSS代碼。

 
 
 
 
    
  
  
  
  
  1. ["red", "blue", "green"].forEach(v => {  
    2.   
  
  
  
  2.     const btn = document.getElementById(`${v}-theme-btn`);  
    3.   
  
  
  
  3.     btn.addEventListener("click", () => document.body.style.setProperty("--bg-color", v));  
    4.   
  
  
  
  4. }); 
    5.

在此總結(jié)下CSS使用變量的好處：

  •  減少樣式代碼的重復(fù)性
  •  增加樣式代碼的擴(kuò)展性
  •  提高樣式代碼的靈活性
  •  增多一種CSS與JS的通訊方式
  •  不用深層遍歷DOM改變某個(gè)樣式

可能有些同學(xué)會問，Sass和Less早就實(shí)現(xiàn)了變量這個(gè)特性，何必再多此一舉呢?？墒羌?xì)想一下，「CSS變量」對比Sass和Less的變量，又有它的過人之處。

  •  瀏覽器原生特性，無需經(jīng)過任何轉(zhuǎn)譯就可直接運(yùn)行
  •  DOM對象一員，極大便利了CSS與JS之間的聯(lián)系

認(rèn)識

本來打算用一半篇幅講述「CSS變量」的規(guī)范和用法，但是網(wǎng)上一搜一大把就感覺沒必要了，貼上阮一峰老師寫的教程《CSS變量教程》。同時(shí)筆者也對「CSS變量」的細(xì)節(jié)地方進(jìn)行一個(gè)整理，方便大家記憶。

  •  聲明：--變量名
  •  讀取：var(--變量名, 默認(rèn)值)
  •  類型
    •   普通：只能用作屬性值不能用作屬性名
    •   字符：與字符串拼接 "Hello, "var(--name)
    •   數(shù)值：使用calc()與數(shù)值單位連用 var(--width) * 10px
  •  作用域
    •   范圍：在當(dāng)前元素塊作用域及其子元素塊作用域下有效
    •   優(yōu)先級別：內(nèi)聯(lián)樣式 > ID選擇器 > 類選擇器 = 屬性選擇器 = 偽類選擇器 > 標(biāo)簽選擇器 = 偽元素選擇器

接下來使用幾個(gè)特別的場景展示「CSS變量」的魅力。還是那句話，「一樣?xùn)|西有使用的場景，那自然就會有它的價(jià)值」，那么用的人也會越來越多。

使用場景

其實(shí)「CSS變量」有一個(gè)特別好用的場景，那就是結(jié)合List元素集合使用。如果不明白這是什么，請繼續(xù)往下看。

 
 
 
 
    
  
  
  
  
  1. 以下所有演示代碼基于Vue文件，但HTML、CSS和JS分開書寫，為了簡化CSS的書寫而使用Sass進(jìn)行預(yù)處理，方便代碼演示 
    2.

條形加載條

一個(gè)條形加載條通常由幾條線條組成，并且每條線條對應(yīng)一個(gè)存在不同時(shí)延的相同動(dòng)畫，通過時(shí)間差運(yùn)行相同的動(dòng)畫，從而產(chǎn)生加載效果。估計(jì)大部分的同學(xué)可能會把CSS代碼寫成以下這樣。

 
 
 
 
    
  
  
  
  
  1.   
    2.   
  
  
  
  2.     
    3.    
  
  
  
  3.   
    4.  
 
 
 
 
 
 
 
    
  
  
  
  
  1. .loading {  
    2.   
  
  
  
  2.     width: 200px;  
    3.   
  
  
  
  3.     height: 200px;  
    4.   
  
  
  
  4.     li {  
    5.   
  
  
  
  5.         border-radius: 3px;  
    6.   
  
  
  
  6.         width: 6px;  
    7.   
  
  
  
  7.         height: 30px;  
    8.   
  
  
  
  8.         background-color: #f66;  
    9.   
  
  
  
  9.         animation: beat 1s ease-in-out infinite;  
    10.   
  
  
  
  10.         & + li {  
    11.   
  
  
  
  11.             margin-left: 5px;  
    12.   
  
  
  
  12.         }  
    13.   
  
  
  
  13.         &:nth-child(2) {  
    14.   
  
  
  
  14.             animation-delay: 200ms;  
    15.   
  
  
  
  15.         }  
    16.   
  
  
  
  16.         &:nth-child(3) {  
    17.   
  
  
  
  17.             animation-delay: 400ms;  
    18.   
  
  
  
  18.         }  
    19.   
  
  
  
  19.         &:nth-child(4) {  
    20.   
  
  
  
  20.             animation-delay: 600ms;  
    21.   
  
  
  
  21.         }  
    22.   
  
  
  
  22.         &:nth-child(5) {  
    23.   
  
  
  
  23.             animation-delay: 800ms;  
    24.   
  
  
  
  24.         }  
    25.   
  
  
  
  25.         &:nth-child(6) {  
    26.   
  
  
  
  26.             animation-delay: 1s;  
    27.   
  
  
  
  27.         }  
    28.   
  
  
  
  28.     }  
    29.   
  
  
  
  29. } 
    30.

分析代碼發(fā)現(xiàn)，每個(gè)

  • 只是存在animation-delay不同，而其余代碼則完全相同，換成其他類似的List元素集合場景，那豈不是有10個(gè)
  • 就寫10個(gè):nth-child。

    顯然這種方法不靈活也不容易封裝成組件，如果能像JS那樣封裝成一個(gè)函數(shù)，并根據(jù)參數(shù)輸出不同的樣式效果，那就更棒了。說到這里，很明顯就是為了鋪墊「CSS變量」的開發(fā)技巧了。

    對于HTML部分的修改，讓每個(gè)

  • 擁有一個(gè)自己作用域下的「CSS變量」。對于CSS部分的修改，就需要分析哪些屬性是隨著index遞增而發(fā)生規(guī)律變化的，對規(guī)律變化的部分使用「CSS變量」表達(dá)式代替即可。

     
 
 
 
      
  
  
  
  
    1.   
      2.   
  
  
  
    2.     
      3.     
  
  
  
    3.   
      4.  
 
 
 
     
 
 
 
      
  
  
  
  
    1. .strip-loading {  
      2.   
  
  
  
    2.     width: 200px;  
      3.   
  
  
  
    3.     height: 200px;  
      4.   
  
  
  
    4.     li {  
      5.   
  
  
  
    5.         --time: calc((var(--line-index) - 1) * 200ms);  
      6.   
  
  
  
    6.         border-radius: 3px;  
      7.   
  
  
  
    7.         width: 6px;  
      8.   
  
  
  
    8.         height: 30px;  
      9.   
  
  
  
    9.         background-color: #f66;  
      10.   
  
  
  
    10.         animation: beat 1.5s ease-in-out var(--time) infinite;  
      11.   
  
  
  
    11.         & + li {  
      12.   
  
  
  
    12.             margin-left: 5px;  
      13.   
  
  
  
    13.         }  
      14.   
  
  
  
    14.     }  
      15.   
  
  
  
    15. }  
      16.  
 
 
 
     
 
 
 
      
  
  
  
  
    1. 源碼鏈接可在文章結(jié)尾處獲取 
      2.

    代碼中的變量--line-index和--time使每個(gè)

  • 擁有一個(gè)屬于自己的作用域。例如第2個(gè)
  • ，--line-index的值為2，--time的計(jì)算值為200ms，換成第3個(gè)
  • 后這兩個(gè)值又會不同了。

    這就是「CSS變量」的作用范圍所致(在當(dāng)前元素塊作用域及其子元素塊作用域下有效)，因此在.strip-loading的塊作用域下調(diào)用--line-index是無效的。

     
 
 
 
      
  
  
  
  
    1. /* flex屬性無效 */  
      2.   
  
  
  
    2. .loading {  
      3.   
  
  
  
    3.     display: flex;  
      4.   
  
  
  
    4.     align-items: center;  
      5.   
  
  
  
    5.     flex: var(--line-index);  
      6.   
  
  
  
    6. } 
      7.

    通過妙用「CSS變量」，也把CSS代碼從29行縮減到15行，對于那些含有List元素集合越多的場景，效果就更明顯。而且這樣寫也更加美觀更加容易維護(hù)，某天說加載效果的時(shí)間差不明顯，直接將calc((var(--line-index) - 1) * 200ms)里的200ms調(diào)整成400ms即可。就無需對每個(gè):nth-child(n)進(jìn)行修改了。

    心形加載條

    前段時(shí)間刷掘金看到陳大魚頭兄的心形加載條，覺得挺漂亮的，很帶感覺。

    通過動(dòng)圖分析，發(fā)現(xiàn)每條線條的背景色和動(dòng)畫時(shí)延不一致，另外動(dòng)畫運(yùn)行時(shí)的高度也不一致。細(xì)心的你可能還會發(fā)現(xiàn)，第1條和第9條的高度一致，第2條和第8條的高度一致，依次類推，得到高度變換相同類的公式：對稱index = 總數(shù) + 1 - index。

    背景色使用了濾鏡的色相旋轉(zhuǎn)hue-rotate函數(shù)，目的是為了使顏色過渡得更加自然；動(dòng)畫時(shí)延的設(shè)置和上面條形加載條的設(shè)置一致。下面就用「CSS變量」根據(jù)看到的動(dòng)圖實(shí)現(xiàn)一番。

     
 
 
 
      
  
  
  
  
    1.   
      2.   
  
  
  
    2.       
      3.   
  
  
  
    3.         
      4.     
  
  
  
    4.       
      5.
    •    
     
 
 
 
      
  
  
  
  
    1. .heart-loading {  
      2.   
  
  
  
    2.     width: 200px;  
      3.   
  
  
  
    3.     height: 200px;  
      4.   
  
  
  
    4.     ul {  
      5.   
  
  
  
    5.         display: flex;  
      6.   
  
  
  
    6.         justify-content: space-between;  
      7.   
  
  
  
    7.         width: 150px;  
      8.   
  
  
  
    8.         height: 10px;  
      9.   
  
  
  
    9.     }  
      10.   
  
  
  
    10.     li {  
      11.   
  
  
  
    11.         --Θ: calc(var(--line-index) / var(--line-count) * .5turn);  
      12.   
  
  
  
    12.         --time: calc((var(--line-index) - 1) * 40ms);  
      13.   
  
  
  
    13.         border-radius: 5px;  
      14.   
  
  
  
    14.         width: 10px;  
      15.   
  
  
  
    15.         height: 10px;  
      16.   
  
  
  
    16.         background-color: #3c9;  
      17.   
  
  
  
    17.         filter: hue-rotate(var(--Θ));  
      18.   
  
  
  
    18.         animation-duration: 1s;  
      19.   
  
  
  
    19.         animation-delay: var(--time);  
      20.   
  
  
  
    20.         animation-iteration-count: infinite;  
      21.   
  
  
  
    21.     }  
      22.   
  
  
  
    22.     .line-1,  
      23.   
  
  
  
    23.     .line-9 {  
      24.   
  
  
  
    24.         animation-name: line-move-1;  
      25.   
  
  
  
    25.     }  
      26.   
  
  
  
    26.     .line-2,  
      27.   
  
  
  
    27.     .line-8 {  
      28.   
  
  
  
    28.         animation-name: line-move-2;  
      29.   
  
  
  
    29.     }  
      30.   
  
  
  
    30.     .line-3,  
      31.   
  
  
  
    31.     .line-7 {  
      32.   
  
  
  
    32.         animation-name: line-move-3;  
      33.   
  
  
  
    33.     }  
      34.   
  
  
  
    34.     .line-4,  
      35.   
  
  
  
    35.     .line-6 {  
      36.   
  
  
  
    36.         animation-name: line-move-4;  
      37.   
  
  
  
    37.     }  
      38.   
  
  
  
    38.     .line-5 {  
      39.   
  
  
  
    39.         animation-name: line-move-5;  
      40.   
  
  
  
    40.     }  
      41.   
  
  
  
    41. }  
      42.  
 
 
 
     
 
 
 
      
  
  
  
  
    1. 源碼鏈接可在文章結(jié)尾處獲取 
      2.

    一波操作后就有了下面的效果。和陳大魚頭兄的心形加載條對比一下，顏色、波動(dòng)曲線和跳動(dòng)頻率有點(diǎn)不一樣，在暖色調(diào)的蔓延和腎上腺素的飆升下，這是一種心動(dòng)的感覺。想起自己曾經(jīng)寫的一首詩：我見猶憐，愛不釋手，雅俗共賞，君子好逑。

    標(biāo)簽導(dǎo)航欄

    上面通過兩個(gè)加載條演示了「CSS變量」在CSS中的運(yùn)用以及一些妙用技巧，現(xiàn)在通過標(biāo)簽導(dǎo)航欄演示「CSS變量」在JS中的運(yùn)用。

    JS中主要有3個(gè)操作「CSS變量」的API，看上去簡單易記，分別如下：

    •  讀取變量：elem.style.getPropertyValue()
    •  設(shè)置變量：elem.style.setProperty()
    •  刪除變量：elem.style.removeProperty()

    先上效果圖，效果中主要是使用「CSS變量」標(biāo)記每個(gè)Tab的背景色和切換Tab的顯示狀態(tài)。

     
 
 
 
      
  
  
  
  
    1.   
      2.   
  
  
  
    2.     
      3.   
  
  
  
    3.         標(biāo)題{{i + 1}}  
      4.   
  
  
  
    4.       
      5.   
  
  
  
    5.     
        
      6.   
  
  
  
    6.           
      7.   
  
  
  
    7.             內(nèi)容{{i + 1}}
      8.     
  
  
  
    8.           
      9.   
  
  
  
    9.     
      
  •    
     
 
 
 
      
  
  
  
  
    1. .tab-navbar {  
      2.   
  
  
  
    2.     display: flex;  
      3.   
  
  
  
    3.     overflow: hidden;  
      4.   
  
  
  
    4.     flex-direction: column-reverse;  
      5.   
  
  
  
    5.     border-radius: 10px;  
      6.   
  
  
  
    6.     width: 300px;  
      7.   
  
  
  
    7.     height: 400px;  
      8.   
  
  
  
    8.     nav {  
      9.   
  
  
  
    9.         display: flex;  
      10.   
  
  
  
    10.         height: 40px;  
      11.   
  
  
  
    11.         background-color: #f0f0f0;  
      12.   
  
  
  
    12.         line-height: 40px;  
      13.   
  
  
  
    13.         text-align: center;  
      14.   
  
  
  
    14.         a {  
      15.   
  
  
  
    15.             flex: 1;  
      16.   
  
  
  
    16.             cursor: pointer;  
      17.   
  
  
  
    17.             transition: all 300ms;  
      18.   
  
  
  
    18.             &.active {  
      19.   
  
  
  
    19.                 background-color: #66f;  
      20.   
  
  
  
    20.                 font-weight: bold;  
      21.   
  
  
  
    21.                 color: #fff;  
      22.   
  
  
  
    22.             }  
      23.   
  
  
  
    23.         }  
      24.   
  
  
  
    24.     }  
      25.   
  
  
  
    25.     div {  
      26.   
  
  
  
    26.         flex: 1;  
      27.   
  
  
  
    27.         ul {  
      28.   
  
  
  
    28.             --tab-index: 0; 
      29.   
  
  
  
    29.              --tab-width: calc(var(--tab-count) * 100%);  
      30.   
  
  
  
    30.             --tab-move: calc(var(--tab-index) / var(--tab-count) * -100%);  
      31.   
  
  
  
    31.             display: flex;  
      32.   
  
  
  
    32.             flex-wrap: nowrap;  
      33.   
  
  
  
    33.             width: var(--tab-width);  
      34.   
  
  
  
    34.             height: 100%;  
      35.   
  
  
  
    35.             transform: translate3d(var(--tab-move), 0, 0);  
      36.   
  
  
  
    36.             transition: all 300ms;  
      37.   
  
  
  
    37.         }  
      38.   
  
  
  
    38.         li {  
      39.   
  
  
  
    39.             display: flex;  
      40.   
  
  
  
    40.             justify-content: center;  
      41.   
  
  
  
    41.             align-items: center;  
      42.   
  
  
  
    42.             flex: 1;  
      43.   
  
  
  
    43.             background-color: var(--bg-color);  
      44.   
  
  
  
    44.             font-weight: bold;  
      45.   
  
  
  
    45.             font-size: 20px;  
      46.   
  
  
  
    46.             color: #fff;  
      47.   
  
  
  
    47.         }  
      48.   
  
  
  
    48.     }  
      49.   
  
  
  
    49. }  
      50.  
 
 
 
     
 
 
 
      
  
  
  
  
    1. exportdefault {  
      2.   
  
  
  
    2.     data() {  
      3.   
  
  
  
    3.         return {  
      4.   
  
  
  
    4.             index: 0,  
      5.   
  
  
  
    5.             list: ["#f66", "#09f", "#3c9"]  
      6.   
  
  
  
    6.         };  
      7.   
  
  
  
    7.     },  
      8.   
  
  
  
    8.     methods: {  
      9.   
  
  
  
    9.         select(i) {  
      10.   
  
  
  
    10.             this.index = i;  
      11.   
  
  
  
    11.             this.$refs.tabs.style.setProperty("--tab-index", i);  
      12.   
  
  
  
    12.         }  
      13.   
  
  
  
    13.     }  
      14.   
  
  
  
    14. };  
      15.  
 
 
 
     
 
 
 
      
  
  
  
  
    1. 源碼鏈接可在文章結(jié)尾處獲取 
      2.

    在

    掃二維碼與項(xiàng)目經(jīng)理溝通

    我們在微信上24小時(shí)期待你的聲音

    解答本文疑問/技術(shù)咨詢/運(yùn)營咨詢/技術(shù)建議/互聯(lián)網(wǎng)交流

    其他資訊