30 Seconds of CSS代碼塊解讀(互動(dòng)篇與其他)

這是最后一篇解讀，主要還是集中在優(yōu)化交互方面，比如禁止選中、彈出框、通過(guò)偽元素排除元素進(jìn)行淡出等。

雖然該開(kāi)源項(xiàng)目總結(jié)的代碼塊不多，但大部分都是很實(shí)用的，相信CSS還有很多很多優(yōu)秀的代碼塊沒(méi)有收集，如果各位有什么好的idea，不妨進(jìn)行去該項(xiàng)目pr，讓全世界的前端童鞋共同欣賞。

Disable selection(禁止選中)

.unselectable {
  user-select: none;
}

說(shuō)明：

user-select: none表明無(wú)法選擇文本。

Mouse cursor gradient tracking(光標(biāo)漸變跟蹤)

跟隨鼠標(biāo)光標(biāo)漸變的懸停效果。該代碼塊需要借助JS。

<button class="mouse-cursor-gradient-tracking">
  <span>Hover me</span>
</button>

.mouse-cursor-gradient-tracking {
  position: relative;
  background: #7983ff;
  padding: 0.5rem 1rem;
  font-size: 1.2rem;
  border: none;
  color: white;
  cursor: pointer;
  outline: none;
  overflow: hidden;
}
.mouse-cursor-gradient-tracking span {
  position: relative;
}
.mouse-cursor-gradient-tracking::before {
  --size: 0;
  content: '';
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--size);
  height: var(--size);
  background: radial-gradient(circle closest-side, pink, transparent);
  transform: translate(-50%, -50%);
  transition: width 0.2s ease, height 0.2s ease;
}
.mouse-cursor-gradient-tracking:hover::before {
  --size: 200px;
}

var btn = document.querySelector('.mouse-cursor-gradient-tracking')
btn.onmousemove = function(e) {
  var x = e.pageX - btn.offsetLeft
  var y = e.pageY - btn.offsetTop
  btn.style.setProperty('--x', x + 'px')
  btn.style.setProperty('--y', y + 'px')
}

說(shuō)明：

1. 主要使用了徑向漸變radial-gradient。漸變形狀為圓形，由粉色到透明色漸變。closest-side指定徑向漸變的半徑長(zhǎng)度為從圓心到離圓心最近的邊。
2. 當(dāng)未懸浮元素時(shí)，漸變的大小為0，懸浮時(shí)變?yōu)?00px。
3. 通過(guò)js計(jì)算出鼠標(biāo)在元素上的偏移量。

效果如下：

image

Popout menu(彈出菜單)

展示懸停時(shí)互動(dòng)式彈出菜單。

<div class="reference">
  <div class="popout-menu">
    Popout menu
  </div>
</div>

.reference {
  position: relative;
}
.popout-menu {
  position: absolute;
  visibility: hidden;
  left: 100%;
}
.reference:hover > .popout-menu {
  visibility: visible;
}

說(shuō)明：

1. 彈出菜單相對(duì)于父元素絕對(duì)定位，left: 100%意味著彈出菜單從左側(cè)移動(dòng)父元素寬度的100%。也就是緊靠在父元素右側(cè)。
2. visibility: hidden隱藏最初彈出菜單并允許轉(zhuǎn)換。與display:none是不同的。前者還占據(jù)著空間，后者不占據(jù)。
3. 當(dāng)hover時(shí)，改變visibility: visible來(lái)展示彈出菜單。當(dāng)然加上動(dòng)畫(huà)的話，體驗(yàn)會(huì)更好。

Sibling fade(兄弟元素淡出)

hover當(dāng)前元素時(shí)，淡出其他兄弟元素，用來(lái)凸顯當(dāng)前元素。

<div class="sibling-fade">
  <span>Item 1</span>
  <span>Item 2</span>
  <span>Item 3</span>
  <span>Item 4</span>
  <span>Item 5</span>
  <span>Item 6</span>
</div>

span {
  padding: 0 1rem;
  transition: opacity 0.2s;
}
.sibling-fade:hover span:not(:hover) {
  opacity: 0.5;
}

說(shuō)明：

1. 默認(rèn)是所有span元素都顯式顯示。只有hover父元素并且排除當(dāng)前hover的span元素時(shí)，其他兄弟元素才會(huì)淡出(opacity: 0.5)。
2. :not(:hover)用來(lái)排除當(dāng)前正在hover的元素。
3. 如果不加.sibling-fade:hover選擇器，那么就是默認(rèn)全部span都淡出。

Counter(計(jì)數(shù)器)

實(shí)際上，計(jì)數(shù)器是由CSS維護(hù)的變量，其值可以通過(guò)CSS規(guī)則遞增以跟蹤它們被使用的次數(shù)。這個(gè)屬性目前還沒(méi)用過(guò)，也是頭一次見(jiàn)。說(shuō)明也是按照原本的英文說(shuō)明進(jìn)行照搬，如果還不懂，可以查看MDN的解釋。具體的解釋也可以參考張?chǎng)涡翊笊竦臅?shū)《CSS世界》P.65 6.深入理解 content 計(jì)數(shù)器。

<ul>
  <li>List item</li>
  <li>List item</li>
  <li>List item</li>
</ul>

ul {
  counter-reset: counter;
}
li::before {
  counter-increment: counter;
  content: counters(counter, '.') ' ';
}

說(shuō)明：

1. 您可以使用任何類(lèi)型的HTML創(chuàng)建有序列表。
2. counter-reset初始化計(jì)數(shù)器，該值是計(jì)數(shù)器的名稱(chēng)。默認(rèn)情況下，計(jì)數(shù)器從0開(kāi)始。此屬性還可用于將其值更改為任何特定數(shù)字。
3. counter-increment用于可計(jì)數(shù)的元素。一旦計(jì)數(shù)器重置初始化，計(jì)數(shù)器的值可以增加或減少。
4. counter(name，style)顯示節(jié)計(jì)數(shù)器的值。通常用于內(nèi)容屬性。此函數(shù)可以接收兩個(gè)參數(shù)，第一個(gè)作為計(jì)數(shù)器的名稱(chēng)，第二個(gè)可以是十進(jìn)制或大寫(xiě)羅馬數(shù)字（默認(rèn)為十進(jìn)制）。
5. counters(counter，string，style)顯示節(jié)計(jì)數(shù)器的值。通常用于內(nèi)容屬性。此函數(shù)可以接收三個(gè)參數(shù)，第一個(gè)作為計(jì)數(shù)器的名稱(chēng)，第二個(gè)可以包含一個(gè)字符串，它位于計(jì)數(shù)器后面，第三個(gè)可以是十進(jìn)制或上羅馬（默認(rèn)為十進(jìn)制）。
6. CSS計(jì)數(shù)器對(duì)于制作輪廓列表特別有用，因?yàn)橛?jì)數(shù)器的新實(shí)例是在子元素中自動(dòng)創(chuàng)建的。使用counters()函數(shù)，可以在不同級(jí)別的嵌套計(jì)數(shù)器之間插入分隔文本。

Custom variables(自定義變量)

CSS變量是包含在整個(gè)文檔中可重用的變量。SCSS或LESS中也可以定義全局變量進(jìn)行重用，但是現(xiàn)在原生CSS已經(jīng)支持定義變量了，積極擁抱新變化吧！

<p class="custom-variables">CSS is awesome!</p>

:root {
  --some-color: #da7800;
  --some-keyword: italic;
  --some-size: 1.25em;
  --some-complex-value: 1px 1px 2px whitesmoke, 0 0 1em slategray, 0 0 0.2em slategray;
}
.custom-variables {
  color: var(--some-color);
  font-size: var(--some-size);
  font-style: var(--some-keyword);
  text-shadow: var(--some-complex-value);
}

說(shuō)明：

1. 這些變量在:root內(nèi)定義，該偽類(lèi)與表示文檔樹(shù)的根元素相匹配。 如果在塊內(nèi)定義，變量也可以作用于選擇器。

2. 使用--variable-name:聲明變量。

3. 使用var(--variable-name)函數(shù)在整個(gè)文檔中重用變量。

4. 注意變量的寫(xiě)法，前面兩條中劃線，中間用一條中劃線連接。