关于css的两个奇技淫巧

前两天在网上看到两个思路很巧妙的例子，拿来记录一下

一、纯 CSS 实现滚动进度条效果

原文链接
效果是这样的

就是顶部黄色的滚动进度条，随着页面的滚动进度而变化长短。

第一眼看到这个效果，感觉这个跟随滚动动画，仅靠 CSS 是不可能完成的，因为这里涉及了页面滚动距离的计算。而就算用了js，感觉实现起来也是比较麻烦。那如何借助css的奇技淫巧来实现它呢？

不卖关子了，下面我们运用线性渐变来实现这个功能。

假设我们的页面被包裹在 body 中，可以滚动的是整个 body，给它添加这样一个从左下到到右上角的线性渐变：

body {
    background-image: linear-gradient(to right top, #ffcc00 50%, #eee 50%);
    background-repeat: no-repeat;
}

就得到这样的效果

我们运用一个伪元素，把多出来的部分遮住：

body::after {
    content: "";
    position: fixed;
    top: 5px;
    left: 0;
    bottom: 0;
    right: 0;
    background: #fff;
    z-index: -1;
}

为了方便演示，我把上面白色底改成了黑色透明底：

实际效果达成了这样：

但这样之后，滑到底的时候，进度条并没有到底，是因为 body 的线性渐变高度设置了整个 body 的大小，我们调整一下渐变的高度：

body {
    background-image: linear-gradient(to right top, #ffcc00 50%, #eee 50%);
    background-size: 100% calc(100% - 100vh + 5px);
    background-repeat: no-repeat;
}

这里使用了 calc 进行了运算，减去了 100vh，也就是减去一个屏幕的高度，这样渐变刚好在滑动到底部的时候与右上角贴合。

而 + 5px 则是滚动进度条的高度，预留出 5px 的高度。再看看效果：

完整demo：CodePen Demo – 使用线性渐变实现滚动进度条

二、CSS做倒排序

场景：ul有 10000 个li子元素，如何将这 10000 个li颠倒顺序。

一般想法可以两种：

一是直接操作 DOM，但是效率低下
二是遍历一遍，然后用 innerHTML 替换，但是这样原有的事件和属性会丢失

可以用CSS这样解决：

ul {transform: rotate(180deg)} 

li {transform: rotate(180deg)}

简单又好用，nice！