前言

继上篇文章滚动条还能这么玩之后，我发现简单的元素只要深入理解他们设计的初衷，往往能发现他们不一样的妙用，这篇文章就来发掘一下进度条的妙用。

这篇文章实现了用进度条控制页面明暗变化，并将变化体现到了页面元素中，加强了交互的趣味性。先来看看成品吧。

进度条

进度条也叫滑块，常常被用来来显示内容缓冲位置与播放位置。用于指示用户是否可以“向前跳跃”。滑块由两部分组成，进度条和滑块。进度条指示进度，滑块用于交互。

h5 原生就支持进度条，只需要把 input 标签，加上 type='range' 属性即可：

      <input
        class="gradient"
        type="range"
        min="1"
        max="100"
        step="1"
        value="20"
        onchange="rangeChange(this.value)"
        oninput="rangeChange(this.value)"
      />

各个属性的作用：

• min 进度条的最小值
• max 进度条的最大值
• step 每次拖动滑动的长度
• value 默认值
• onchange 滚动条的值发上变化时触发
• oninput 滚动条发生变化时触发

注意：onchange 是只有值发生变化时才会触发事件，这也就导致，在滑动过程中值是不发生变化的，如果你要显示实时拖动的值，你需要把 oninput 事件也加上。

美化进度条

原生的进度条很丑，下面将进行一系列的步骤来美化进度条。

美化进度条主要通过以下步骤：

1. 去除系统默认的样式
2. 给滑动轨道(track)添加样式
3. 给滑块(thumb)添加样式

去除系统默认的样式

这是美化滑动控件的第一步，这步操作是为了不使用原有的样式，使之后的自定义样式有效。代码很简单如下所示，不过要注意的是对基于 webkit 的浏览器，如Chrome, Safari, Opera等，滑块也要移除默认样式。

      input[type='range'] {
        -webkit-appearance: none;
        width: 300px;
        border-radius: 10px; /*这个属性设置使填充进度条时的图形为圆角*/
      }
      input[type='range']::-webkit-slider-thumb {
        -webkit-appearance: none;
      }

给滑动轨道(track)添加样式

自定义滑动控件的轨道，代码很简单, 注意去掉控件的边框outline: none;

      input[type='range']::-webkit-slider-runnable-track {
        height: 8px;
        border-radius: 10px; /*将轨道设为圆角的*/
        background-color: #d6a63c;
      }
      input[type='range']:focus {
        outline: none;
      }

给滑块(thumb)添加样式

thumb 的样式设置稍微多一点，因为由激活时状态，悬停时状态等。甚至可以为其设置一个背景图；

      input[type='range']::-webkit-slider-thumb {
        -webkit-appearance: none;
        height: 24px;
        width: 24px;
        margin-top: -8px; /*使滑块超出轨道部分的偏移量相等*/
        background: #ffffff;
        border-radius: 50%;
        cursor: pointer;
      }

      input[type='range']:focus::-webkit-slider-thumb {
        background: #d6a63c;
        /* background-image: url('https://p3-passport.byteacctimg.com/img/user-avatar/fc8114566fc29a28d2d49e1964872775~300x300.image'),
          -webkit-gradient(linear, left top, left bottom, color-stop(0, #fefefe), color-stop(0.49, #dddddd), color-stop(0.51, #d1d1d1), color-stop(1, #a1a1a1));
        background-size: 20px;
        background-repeat: no-repeat;
        background-position: 50%; */
        box-shadow: 0 0 0 3px #fff, 0 0 0 6px #d6a63c;
      }

      input[type='range']::-webkit-slider-thumb:hover {
        background: #d6a63c;
      }
      input[type='range']:active::-webkit-slider-thumb {
        background: #d6a63c;
      }

猫眼

总所周知，猫咪的瞳孔会随着光线的强弱而变化，那么页面明暗的变化正好可以体现在猫咪眼睛瞳孔的大小上面。而滚动条正好用来控制页面明暗的变化。

猫咪眼的组成主要是可以变化的椭圆，追开始，我用整个椭圆来重当猫咪的瞳孔，核心代码如下：

/* 椭圆 */
.ellipse {
    width: 150px;
    height: 150px;
    margin: 50px;
    background: #333;
    border-radius: 50% 50%;
    transform: rotate(-45deg);
}
      
      
// html
<div class="ellipse"></div>
      
// js
ellipse.style.borderRadius = `${100 - count}% ${
  count > 10 ? count : 10
}%`

但是这样在控制椭圆变化的时候不尽如意，效果不是很好。

之后我又去看了一遍 border-radius 的文档，发现我可以使用半椭圆，半椭圆可以随意控制水平半径的大小，将其水平半径设置为100%，用个父级div包裹它，那么我只需要控制父级div的宽度就可以随意切换椭圆的半径了。

之后利用伪元素将半椭圆复制一份出来就ok了：

      /* 椭圆 */
      .ellipse {
        position: relative;
        width: 100%;
        height: 80px;
        background: #333;
        border-radius: 50% / 100% 100% 0 0;
      }

      .ellipse::after {
        content: '';
        display: block;
        position: absolute;
        top: 80px;
        left: 0;
        width: 100%;
        height: 80px;
        background: #333;
        border-radius: 50% / 100% 100% 0 0;
        transform: rotate(180deg);
      }
      
      
      //js
        const count = value > 20 ? value : 20

        ellipse.style.width = 1.6 * count + 'px' 

1.6 是由于进度条的长度设置是100，而椭圆的垂直半径是160, 100y=160x100y = 160x100y=160x 求y。

背景的变化

// 背景透明
body.style.backgroundColor = 'rgba(26 25 25 / ' + value + '%)'

总结