滚动矩阵

这里有一个货真价实的 CSS-Trick 小技巧，献给你们。

我知道我可以制作一个带滚动效果的正方形“矩阵”。 然后我想知道是否可以在屏幕上的其他位置复制该滚动矩阵。 我认为我可以使用与 远程链接 相同的技术来实现。 然后我想，我可以通过使用不同的滚动样式来使复制矩阵中的滚动效果不同。

该技术很简单。 单元格的 HTML 代码如下

<a class="singlecell"><em>.</em></a>

em 元素用于踢出并构建第二个矩阵。

CSS 代码稍微复杂一些，但并不难。 em 元素获得相对定位和 200 的 right 值，因此它会被踢到右侧 200 像素。 普通的锚元素在悬停时变为红色，而 em 元素则移动背景位置。 每个单元格都具有 display block 属性，宽度和高度为 10 像素，并向左浮动以创建矩阵。

.singlecell {
  width: 10px;
  height: 10px;
  display: block;
  color: white;
  background-color: white;
  float: left;
}

.singlecell em {
  position: relative;
  width: 10px;
  height: 10px;
  right: 200px;
  display: block;
  background: yellow;
  text-indent: -9999px;
}

.singlecell:hover {
  background: red;
}

.singlecell:hover em {
  background: blue;
}

这并不是特别有用，但它是一个很酷的小技巧，我可以想象它会被改造成更有趣的东西。

查看 CodePen 上 Chris Coyier (@chriscoyier) 的 滚动矩阵 演示。