30 Seconds of CSS代码块解读(互动篇与其他)

这是最后一篇解读，主要还是集中在优化交互方面，比如禁止选中、弹出框、通过伪元素排除元素进行淡出等。

虽然该开源项目总结的代码块不多，但大部分都是很实用的，相信CSS还有很多很多优秀的代码块没有收集，如果各位有什么好的idea，不妨进行去该项目pr，让全世界的前端童鞋共同欣赏。

Disable selection(禁止选中)

.unselectable {  user-select: none;
}

说明：

user-select: none表明无法选择文本。

Mouse cursor gradient tracking(光标渐变跟踪)

跟随鼠标光标渐变的悬停效果。该代码块需要借助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')
}

说明：

1. 主要使用了径向渐变radial-gradient。渐变形状为圆形，由粉色到透明色渐变。closest-side指定径向渐变的半径长度为从圆心到离圆心最近的边。

2. 当未悬浮元素时，渐变的大小为0，悬浮时变为200px。

3. 通过js计算出鼠标在元素上的偏移量。

效果如下：

image

Popout menu(弹出菜单)

展示悬停时互动式弹出菜单。

<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;
}

说明：

1. 弹出菜单相对于父元素绝对定位，left: 100%意味着弹出菜单从左侧移动父元素宽度的100%。也就是紧靠在父元素右侧。

2. visibility: hidden隐藏最初弹出菜单并允许转换。与display:none是不同的。前者还占据着空间，后者不占据。

3. 当hover时，改变visibility: visible来展示弹出菜单。当然加上动画的话，体验会更好。

Sibling fade(兄弟元素淡出)

hover当前元素时，淡出其他兄弟元素，用来凸显当前元素。

<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;
}

说明：

1. 默认是所有span元素都显式显示。只有hover父元素并且排除当前hover的span元素时，其他兄弟元素才会淡出(opacity: 0.5)。

2. :not(:hover)用来排除当前正在hover的元素。

3. 如果不加.sibling-fade:hover选择器，那么就是默认全部span都淡出。

Counter(计数器)

实际上，计数器是由CSS维护的变量，其值可以通过CSS规则递增以跟踪它们被使用的次数。这个属性目前还没用过，也是头一次见。说明也是按照原本的英文说明进行照搬，如果还不懂，可以查看MDN的解释。具体的解释也可以参考张鑫旭大神的书《CSS世界》P.65 6.深入理解 content 计数器。

<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, '.') ' ';
}

说明：

1. 您可以使用任何类型的HTML创建有序列表。

2. counter-reset初始化计数器，该值是计数器的名称。默认情况下，计数器从0开始。此属性还可用于将其值更改为任何特定数字。

3. counter-increment用于可计数的元素。一旦计数器重置初始化，计数器的值可以增加或减少。

4. counter(name，style)显示节计数器的值。通常用于内容属性。此函数可以接收两个参数，第一个作为计数器的名称，第二个可以是十进制或大写罗马数字（默认为十进制）。

5. counters(counter，string，style)显示节计数器的值。通常用于内容属性。此函数可以接收三个参数，第一个作为计数器的名称，第二个可以包含一个字符串，它位于计数器后面，第三个可以是十进制或上罗马（默认为十进制）。

6. CSS计数器对于制作轮廓列表特别有用，因为计数器的新实例是在子元素中自动创建的。使用counters()函数，可以在不同级别的嵌套计数器之间插入分隔文本。

Custom variables(自定义变量)

CSS变量是包含在整个文档中可重用的变量。SCSS或LESS中也可以定义全局变量进行重用，但是现在原生CSS已经支持定义变量了，积极拥抱新变化吧！

<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);
}

说明：

1. 这些变量在:root内定义，该伪类与表示文档树的根元素相匹配。 如果在块内定义，变量也可以作用于选择器。

2. 使用--variable-name:声明变量。

3. 使用var(--variable-name)函数在整个文档中重用变量。

4. 注意变量的写法，前面两条中划线，中间用一条中划线连接。

作者：坤少卡卡
链接：https://www.jianshu.com/p/e7c1ade41612