這個兩部分系列的第一部分詳細(xì)介紹了我們?nèi)绾潍@得兩次跑步的滑塊?，F(xiàn)在，我們將研究一個一般的多階段案例，但採用了一種不同，更好的技術(shù)來在拇指之間創(chuàng)建填充。最後，我們將深入研究造型的造型在現(xiàn)實的3D滑塊和扁平的造型背後。

文章系列：

1. 多腳步滑塊：特定的兩次案件
2. 多腳步滑塊：一般案例（此帖子）

更好，更靈活的方法

假設(shè)，在覆蓋與範(fàn)圍輸入相同區(qū)域的包裝器偽元素上，我們從左到右的線性級別（）層堆疊與每個拇指相對應(yīng)的層。每個梯度層都是完全不透明的（即alpha為1），從軌道最小到拇指的中線，然後完全透明（即alpha為0）。

請注意，RGB值無關(guān)緊要，因為我們關(guān)心的只是alpha值。我個人使用了代碼中的紅色（對於完全不透明的部分）和透明的關(guān)鍵字，因為它們的字符數(shù)量最少。

我們?nèi)绾斡嬎銖耐耆煌该鞯酵耆该鞯奶荻韧Ｖ刮恢?？好吧，這些位置始終位於從左邊緣的拇指半徑之間，從右邊緣的拇指半徑之間，因此它們在等於有用寬度的範(fàn)圍內(nèi)（軌道寬度，減去拇指直徑）。

這意味著我們首先添加一個拇指半徑。然後，我們通過將當(dāng)前拇指位置和最小值之間的差為最大值和最小值之間的差（ - dif）來計算進(jìn)度。該進(jìn)度值是[0，1]間隔中的一個數(shù)字 - 噹噹前的拇指位置處於最小值時，噹噹前的拇指位置處於滑塊最大值時，即0。為了確切地沿著有用的寬度間隔，我們將該進(jìn)度值乘以有用的寬度。

我們所追求的位置是這兩個長度值之間的總和：拇指半徑和我們在有用的寬度間隔內(nèi)走多遠(yuǎn)。

下面的演示使我們能夠看到2D視圖中的所有外觀如何堆疊在一起，以及在父母的偽元素上的範(fàn)圍輸入和梯度如何在3D視圖中分層。它也是交互式的，因此我們可以拖動滑塊拇指，並查看相應(yīng)的填充（由梯度層在其父母的偽元素上創(chuàng)建）如何變化。

請參閱Codepen上的thebabydino（@TheBabydino）的筆。

該演示最好在Chrome和Firefox中觀看。

好吧，但是僅僅堆疊這些梯度層並不能為我們帶來我們追求的結(jié)果。

這裡的解決方案是使這些梯度掩蓋層，然後將其XOR（更確切地說，在CSS掩碼的情況下，這意味著將其Xor alphane Xor）。

如果您需要對XOR的工作方式進(jìn)行複活，這裡有一個：給定的兩個輸入，如果輸入值不同（其中一個是1，另一個是0），則此操作的輸出為1，如果輸入值相同（它們兩個是0或兩個是1），則為1）

XOR操作的真實表看起來如下：

您還可以在以下交互式演示中使用它，在此可以切換輸入值並查看輸出的變化：

請參閱Codepen上的thebabydino（@TheBabydino）的筆。

在我們的情況下，輸入值是沿水平軸的梯度掩模層的alpha。 XOR-ing多層意味著對前兩個從底部進(jìn)行，然後從底部的第三層XOR-ing-thing the先前的XOR操作等等。對於我們的特定情況，即alpha的左右梯度等於1（由相應(yīng)的拇指值決定），然後為0，它看起來如下所示（我們從底部開始並上升）：

如果兩層從底部的alpha為1，則我們在XOR-unging之後獲得的結(jié)果層的alpha為0。它們的alpha值不同，所得層的alpha為1。在它們的alpha中，它們的alpha均為0，結(jié)果層的Alpha為0。

向上移動，我們將第三層與上一步中獲得的結(jié)果層相關(guān)。這兩個層具有相同的alpha，第二個XOR操作產(chǎn)生的層的alpha為0。它們具有不同的alpha，所得的alpha為1。

同樣，我們從底部將第四層分為第四層，而第二階段XOR操作產(chǎn)生的層。

就CSS而言，這意味著使用標(biāo)準(zhǔn)蒙版複合材料的排除值和非標(biāo)準(zhǔn)-Webkit-mask-Composite的XOR值。 （為了更好地了解面具合併，請查看速成課程。）

這項技術(shù)為我們提供了所需的結(jié)果，同時還允許我們?yōu)樗刑畛湮锸褂脝蝹€偽元素。這也是一種適合任何數(shù)量拇指的技術(shù)。讓我們看看如何將其放入代碼中！

為了使事情保持完全靈活，我們首先更改哈停與代碼，以便它可以添加或刪除拇指並通過簡單地添加或從拇指對像中添加或刪除項目，從而相應(yīng)地更新所有內(nèi)容，每個對像都包含一個值和標(biāo)籤（僅適用於屏幕讀取器）：

 - 令最小= -50，max = 50;
 - 讓拇指= [
 -  {val：-15，lbl：'value a'}， 
 -  {val：20，lbl：'value b'}， 
 -  {val：-35，lbl：'value c'}， 
 -  {val：45，lbl：'value d'}
 - ];
 - 令nv = thumbs.length;

。 
      style =`$ {thumbs.map（（（c，i）=>`-v $ {i}：$ {c.val}`）.join（';'）}; 
              - 米：$ {min}; -max：$ {max}`）
  ＃多LBL多拇指滑塊：
     -  for（讓i = 0; i <nv i label.sr-inly .lbl min="min" value="thumbs" .val max="max）"><p>在這些精確四個值的特定情況下，生成的標(biāo)記看起來如下：</p>
<pre rel="HTML"> <div class="'wrap'角色='組'aria-labelledby" v0>
  <div id="'多l(xiāng)bl'">多拇指滑塊：</div>
  <label class="'sr-inly'for">值a </label>
  <input type="'range'id">
   
  <label class="'sr-inly'for">值b </label>
  <input type="'range'id">
   
  <label class="'sr-inly'for">值c </label>
  <input type="'range'id">
   
  <label class="'sr-inly'for">值d </label>
  <input type="'range'id">
   
</div>

我們不需要在CSS或JavaScript中添加任何內(nèi)容，就可以為我們提供一個功能性的滑塊，其中

值在拖放滑塊時會更新。但是，具有四個元素，而包裝器的網(wǎng)格仍然具有兩個列會破壞佈局。因此，目前，我們刪除了為元素引入的行，絕對將這些元素放置，並且僅在相應(yīng)的集中時才能使它們可見。我們還刪除了在包裝器上使用兩個偽元素的先前解決方案的遺跡。

 。裹 {
  / *與以前相同 */
  網(wǎng)格 - 板板行：max-content＃{$ h}; / *現(xiàn)在只有2行 */

  ＆：：後 {
    背景：＃95A;
    // 內(nèi)容： ''; //現(xiàn)在不顯示
    網(wǎng)格列：1/ span 2;
    網(wǎng)格行：3;
  }
}

輸入[type ='range'] {
  / *與以前相同 */
  網(wǎng)格行：2; / *最後一行是第二行 */
}

輸出 {
  顏色：透明；
  位置：絕對；
  右：0;
	
  ＆：：後 {
    內(nèi)容：計數(shù)器（c）;
    計數(shù)器：C var（-c）;
  }
}

我們將採取更多措施以稍後的結(jié)果來效果，但是現(xiàn)在，這就是我們所擁有的：

請參閱Codepen上的thebabydino（@TheBabydino）的筆。

接下來，我們需要將那些拇指放到拇指填充物上。我們通過在哈巴狗中生成蒙版層並將其放入包裝器上的填充自定義屬性中來做到這一點。

 //  - 和以前一樣
 - 令layers = thumbs.map（（c，i）=>`線性級別（90DEG，red calc（var（-r）（var（-v $ {i}） -  var（-min））/var（-min））/var（-vir）*var（-uw）*var（-uw）），透明度0）`）;

。 
  style =`$ {thumbs.map（（（c，i）=>`-v $ {i}：$ {c.val}`）.join（';'）}; 
     - 米：$ {min}; -max：$ {max};
     - 填充：$ {layers.join（'，'）}`）
  //  - 和以前一樣

對於具有這些值的四個拇指的特定情況的生成的HTML可以在下面看到。請注意，如果我們從初始數(shù)組中添加或刪除項目，則會自動更改。

 <div class="'wrap'角色='組'aria-labelledby" v0 dif>
  <div id="'多l(xiāng)bl'">多拇指滑塊：</div>
  <label class="'sr-inly'for">值a </label>
  <input type="'range'id">
   
  <label class="'sr-inly'for">值b </label>
  <input type="'range'id">
   
  <label class="'sr-inly'for">值c </label>
  <input type="'range'id">
   
  <label class="'sr-inly'for">值d </label>
  <input type="'range'id">
   
</div>

請注意，這意味著我們需要將與尺寸相關(guān)的SASS變量轉(zhuǎn)換為CSS變量，並替換使用它們的屬性中的SASS變量：

 。裹 {
  / *與以前相同 */
  -w：20em;
  -H：4EM;
  -d：calc（.5*var（-h））;
  -r：calc（.5*var（-d））;
  -uw：calc（var（-w） -  var（-d））;
  背景：線性級別（0DEG，#CCC var（-h），透明0）;
  網(wǎng)格通信：max-content var（-h）/ var（-w）;
  寬度：var（-w）;
}

我們設(shè)置了包裝器的口罩oo ::偽元素之後：

 。裹 {
  / *與以前相同 */
  
  ＆：：後 {
    內(nèi)容： '';
    背景：＃95A;
    網(wǎng)格列：1/ span 2;
    網(wǎng)格行：2;

    / *非標(biāo)準(zhǔn)WebKit版本 */
    -webkit mask：var（ - 填充）;
    -webkit面具複合材料：XOR;

    / *標(biāo)準(zhǔn)版本，在Firefox中支持 */
    蒙版：var（ - 填充）;
    面具複合材料：排除；
  }
}

現(xiàn)在，我們已經(jīng)擁有了我們想要的東西，而對此技術(shù)的真正酷的事情是，更改拇指的數(shù)量所需要做的就是添加或刪除拇指對象（每個值和標(biāo)籤，每個值）到Pug代碼中的拇指陣列 - 絕對沒有其他需要更改的東西！

請參閱Codepen上的thebabydino（@TheBabydino）的筆。

優(yōu)惠的調(diào)整

到目前為止，我們所擁有的只是一個漂亮的景象。因此，讓我們開始解決這個問題！

選項＃1：逼真的外觀

假設(shè)我們想實現(xiàn)以下結(jié)果：

第一步是使軌道的高度與拇指相同，然後繞軌道末端。到目前為止，我們已經(jīng)在.wrap元素上模仿了曲目。儘管在技術(shù)上可以通過使用分層的線性和徑向梯度來模擬具有圓形末端的軌道，但它確實不是最好的解決方案，尤其是當(dāng)包裝器仍然具有免費的偽元素（前面的::）時。

 。裹 {
  / *與以前相同 */
  -h：2em;
  -d：var（-h）;
  
  ＆::之前，＆:: efter {
    Border-Radius：var（-r）;
    背景：#ccc;
    內(nèi)容： '';
    網(wǎng)格列：1/ span 2;
    網(wǎng)格行：2;
  }
  
  ＆：：後 {
    背景：＃95A;

    / *非標(biāo)準(zhǔn)WebKit版本 */
    -webkit mask：var（ - 填充）;
    -webkit面具複合材料：XOR;

    / *標(biāo)準(zhǔn)版本，在Firefox中支持 */
    蒙版：var（ - 填充）;
    面具複合材料：排除；
  }
} 

請參閱Codepen上的thebabydino（@TheBabydino）的筆。

使用::在模擬軌道之前，它打開了略微3D外觀的可能性：

 <pre rel="“" scss> <code> .wrap {
  / *與以前相同 */
  
  ＆::之前，＆:: efter {
    / *與以前相同 */
    盒子陰影：插圖0 2PX 3PX RGBA（＃000，.3）;
  }
  
  ＆：：後 {
    / *與以前相同 */
    背景： 
      線性畢業(yè)生（RGBA（#FFF，.3），RGBA（＃000，.3））
      ＃95a;
  }
}</code>

我絕不是設(shè)計師，所以這些值可能可以調(diào)整以獲得更好的結(jié)果，但是我們已經(jīng)可以看到一個區(qū)別：

請參閱Codepen上的thebabydino（@TheBabydino）的筆。

這給我們留下了一個非常醜陋的拇指，所以讓我們也要修復(fù)該部分！

我們利用具有不同背景折疊（和背景 - 原始）值的多個背景的技術(shù)。

 @mixin thumb（）{
  邊框：實心calc（.5*var（-r））透明；
  邊界拉迪烏斯：50％； / *製作圓形 */
  盒子大?。哼吙蚩颍?/ * Chrome＆Firefox之間的不同 */
  / *現(xiàn)在我們有一個非零邊框 */需要盒子大小 */
  背景： 
    線性級別（RGBA（＃000，.15），rgba（#fff，.2））content-box， 
    線性級別（RGBA（#FFF，.3），RGBA（＃000，.3））邊框框， 
    CurrentColor;
  指針盛會：自動；
  寬度：var（-d）;高度：var（-d）;
}

我在一篇較舊的文章中對此技術(shù)進(jìn)行了很多詳細(xì)的描述。確保您是否需要復(fù)習(xí)！

但是，如果當(dāng)前的彩色值為黑色（＃000），則上述代碼將幾乎一無所有。讓我們解決這個問題，還將拇指上的光標(biāo)更改為更合適的東西：

輸入[type ='range'] {
  / *與以前相同 */
  顏色：#eee;
  光標(biāo)：抓??；
  
  ＆：Active {光標(biāo)：抓取; }
}

結(jié)果當(dāng)然比以前更令人滿意：

請參閱Codepen上的thebabydino（@TheBabydino）的筆。

真正困擾我的其他事情是標(biāo)籤文本與滑塊的距離有多近。我們可以通過在包裝器上引入網(wǎng)格差距來解決此問題：

 。裹 {
  / *與以前相同 */
  網(wǎng)格間隙：.625EM;
}

但是我們?nèi)匀挥龅降淖钤愀獾膯栴}是右上角絕對位置的輸出。解決此問題的最佳方法是為他們引入第三個網(wǎng)格行，並用大拇指移動它們。

拇指的位置的計算方式與我們用於填充面膜的梯度層的尖銳停止的方式相似。

最初，我們將輸出的左邊緣放在垂直線的左側(cè)邊緣，該線是一個拇指半徑-r遠(yuǎn)離滑塊的左邊緣。為了將輸出與此垂直線對齊，我們將它們翻譯回去（向左，沿x軸的負(fù)方向，因此我們需要減去符號）的寬度的一半（50％，因為translate（）函數(shù)中的百分比值相對於元素的尺寸，將變換應(yīng)用於元素的尺寸）。

為了用拇指移動它們，我們從相應(yīng)的拇指（-c）的當(dāng)前值中減去最小值（ - min），將此差異除以最大值（-max）和最小值（-min）之間的差（ - dif）。這為我們提供了[0，1]間隔的進(jìn)度值。然後，我們將該值乘以有用的寬度（-UW），該值描述了實際運動範(fàn)圍。

 。裹 {
  / *與以前相同 */
  網(wǎng)格 - 板行：最大var（-h）max-content;
}

輸出 {
  背景：CurrentColor；
  邊界拉迪烏斯：5px;
  顏色：透明；
  網(wǎng)格列：1;
  網(wǎng)格行：3;
  左鍵：var（-r）;
  填充：0 .375EM;
  變換：轉(zhuǎn)換（calc（（var（-c） -  var（-min））/var（ -  dif）*var（-uw）-50％））;
  寬度：Max-Content;
  
  ＆：：後 {
    顏色：#fff;
    內(nèi)容：計數(shù)器（c）;
    計數(shù)器：C var（-c）;
  }
} 

請參閱Codepen上的thebabydino（@TheBabydino）的筆。

乍一看，這看起來好多了。但是，仔細(xì)檢查表明我們?nèi)匀挥泻芏鄦栴}。

第一個是溢出：當(dāng)我們到達(dá)軌道末端時，隱藏的元素會切出一點。

為了解決此問題，我們必須了解確切的溢出：隱藏的做法。如下面的交互式演示所示，它削減了元素填充框之外的所有內(nèi)容，您可以單擊代碼以切換CSS聲明。

請參閱Codepen上的thebabydino（@TheBabydino）的筆。

這意味著解決此問題的快速解決方法是在包裝器.wrap上添加足夠大的側(cè)面填充。

填充：0 2em;

我們在這裡孤立地對我們的多次滑塊進(jìn)行了設(shè)計，但實際上，這可能不會是頁面上唯一的東西，因此，如果間距有限，我們可以將其側(cè)向填充，並具有負(fù)側(cè)向邊緣。

如果附近的元素仍然具有默認(rèn)位置：靜態(tài)，那麼我們相對定位包裝器的事實應(yīng)該使輸出在其重疊之上的頂部，否則，對.wrap上的z索引進(jìn)行調(diào)整。

更大的問題是，我們已經(jīng)在拖動拇指時使用了一些非常奇怪的重疊的結(jié)果。

當(dāng)集中在相應(yīng)的上以及解決重疊的特定問題上時，增加z指數(shù)：

輸入[type ='range'] {
  ＆：重點 {
    輪廓：實心0透明；
		
    ＆， ＆ 輸出 {
      顏色：深色態(tài)；
      z索引：2;
    }
  }
}

但是，它對基本問題沒有任何作用，當(dāng)我們更改身體背景時，這變得顯而易見，尤其是如果我們將其更改為圖像，因為這不允許文本不再隱藏在其中：

請參閱Codepen上的thebabydino（@TheBabydino）的筆。

這意味著我們需要重新思考如何將元素隱藏在正常狀態(tài)以及如何以突出顯示狀態(tài)（例如：focus）揭示它們。我們也想在不膨脹我們的CSS的情況下這樣做。

解決方案是使用我一年前在“使用CSS變量的干交換開關(guān)”中描述的技術(shù)：使用突出顯示 - HL自定義屬性，其中值在正常狀態(tài)下為0，在亮點狀態(tài)下為1（：focus）。我們還計算了其否定（-nothl）。

 * {
  -hl：0;
  -nothl：calc（1-var（-hl））;
  保證金：0;
  字體：繼承
}

實際上，這還沒有任何作用。訣竅是使我們想在兩個狀態(tài)之間更改的所有屬性取決於-HL，如有必要，其否定（代碼> –nothl）。

 $ HLC：＃f90;

@mixin thumb（）{
  / *與以前相同 */
  背景色：$ hlc;
}

輸入[type ='range'] {
  / *與以前相同 */
  過濾器：灰度（var（-nothl））;
  z index：calc（1 var（-hl））;
  
  ＆：重點 {
    輪廓：實心0透明；
    
    ＆＆＆output {-hl：1; }
  }
}

輸出 {
  / *相同的網(wǎng)格放置 */
  左鍵：var（-r）;
  最大寬度：最大包含；
  變換：轉(zhuǎn)換（calc（（var（ -  c） -  var（-min））/var（ -  dif）*var（-uw）））;
	
  ＆：：後 {
    / *與以前相同 */
    背景： 
      線性畢業(yè)生（RGBA（#FFF，.3），RGBA（＃000，.3））
      $ HLC;
    邊界拉迪烏斯：5px;
    顯示：塊;
    填充：0 .375EM;
    變換：轉(zhuǎn)換（-50％）比例（var（-hl））;
  }
} 

請參閱Codepen上的thebabydino（@TheBabydino）的筆。

我們快到了！我們還可以添加有關(guān)狀態(tài)變化的過渡：

 $ t：.3s;

輸入[type ='range'] {
  / *與以前相同 */
  過渡：過濾器$ t suble;
}

輸出:: efter {
  / *與以前相同 */
  過渡：變換$ t suble;
} 

請參閱Codepen上的thebabydino（@TheBabydino）的筆。

最終的改進(jìn)將是灰度（）如果沒有一個拇指，則填充是填充。我們可以使用以下方式來做到這一點：焦點對我們的包裝器：

 。裹 {
  ＆：：後 {
    / *與以前相同 */
    過濾器：灰度（var（-nothl））;
    過渡：過濾器$ t suble;
  }
	
  ＆：focus-within {-hl：1; }
}

就是這樣！

請參閱Codepen上的thebabydino（@TheBabydino）的筆。

選項＃2：平坦的外觀

讓我們看看如何獲??得平坦的設(shè)計。例如：

第一步是刪除框的陰影和梯度，使我們以前的演示具有3D外觀，並使軌道背景為重複梯度。

請參閱Codepen上的thebabydino（@TheBabydino）的筆。

拇指的大小變化：焦點可以通過縮放變換來控制，其因子取決於高光開關(guān)變量（-hl）。

 @mixin thumb（）{
  / *與以前相同 */
  變換：比例（calc（1-.5*var（-nothl）））;
  過渡：變換$ t suble;
} 

請參閱Codepen上的thebabydino（@TheBabydino）的筆。

但是，拇指周圍賽道上的孔呢？

蒙版合成技術(shù)在這裡非常有用。這涉及將徑向梯度分層以在每個拇指位置創(chuàng)建圓盤，並且在我們完成後，將其反轉(zhuǎn)（即與完全不透明的層合成），將這些圓盤變成孔的結(jié)果。

這意味著要更改哈巴索代碼，以便我們生成創(chuàng)建與每個拇指相對應(yīng)的光盤的徑向梯度列表。反過來，我們將在CSS中反轉(zhuǎn)：

 //  - 和以前一樣
 - 令tpos = thumbs.map（（c，i）=>`calc（var（-r）（var（-v $ {i}）-var（-min））/var（-min））/var（-dif）*var（-uw））`;
 - 令fill = tpos.map（c =>`線性級別（90DEG，red $ {c}，透明0）`）;
 - 令hole = tpos.map（c =>`徑向級別（$ {c}，紅色var（-r），透明0）`）

。 
  style =`$ {thumbs.map（（（c，i）=>`-v $ {i}：$ {c.val}`）.join（';'）}; 
     - 米：$ {min}; -max：$ {max};
     - 填充：$ {fill.join（'，'）}; 
     - 孔：$ {hole.join（'，'）}`）
  //  - 像以前一樣的包裝器內(nèi)容

這會生成以下標(biāo)記：

 <div class="'wrap'角色='組'aria-labelledby" v0 dif>
  
</div>

在CSS中，我們在兩個偽元素上設(shè)置了一個掩碼，並為每個元素設(shè)置了不同的值。我們還XOR上的面具層。

在::之前的情況下，掩碼是帶有完全不透明層的Xor-eD discs Xor-eD列表（作為逆變器，可以將圓盤變成圓形孔）。對於::之後，這是填充線性級別（）層的列表。

 。裹 {
  / *與以前相同 */
  
  ＆::之前，＆:: efter {
    內(nèi)容： '';
    / *與以前相同 */
    
     - 面具：線性級別（紅色，紅色），var（ - 孔）;

    / *非標(biāo)準(zhǔn)WebKit版本 */
    -webkit面具：var（-mask）;
    -webkit面具複合材料：XOR;

    / *標(biāo)準(zhǔn)版本，在Firefox中支持 */
    蒙版：var（-mask）;
    面具複合材料：排除；
  }
	
  ＆：：後 {
    背景：＃95A;
     - 面具：var（ - 填充）;
  }
} 

請參閱Codepen上的thebabydino（@TheBabydino）的筆。

最後一步是調(diào)整軌道，填充高度和中間，將它們垂直對齊在網(wǎng)格單元中（以及拇指）：

 。裹 {
  / *與以前相同 */
  
  ＆::之前，＆:: efter {
    / *與以前相同 */
    對齊：中心；
    身高：6px;
  }
}

現(xiàn)在，我們擁有所需的平坦多腳步滑塊！

請參閱Codepen上的thebabydino（@TheBabydino）的筆。

以上是多腳步滑塊：一般案例的詳細(xì)內(nèi)容。更多資訊請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！