You found Nikaple!

刺er的作品集

2018-03-12T04:08:07.000Z

由于众所周知的原因，strikingly服务在国内并不可用，取而代之的是的本地化版上线了。这里暂时搬运了一个静态版的网页过来（无法留言/分享，只能看hhh，等有时间了再把请求转发写了吧）

源地址：http://sprspikeup.strikingly.com
托管地址：https://nikaple.com/sprspikeup

大家快去下载刺er的游戏好好享受（被虐）吧！

原生JS实现一个Chrome DevTools取色板（下）

2017-10-07T12:24:17.000Z

拖拽功能

上回我们已经构建了基本界面：

终于到JavaScript出场的时候了！首先观察一下我们的组件，滑块的交互方式其实可以看为仅在x轴方向上运动的色盘交互方式。于是我们首先建立一个可拖动对象的类DragContext：

class DragContext {
  constructor({
    $context, // 可以拖动的范围，即色盘以及滑块槽
    $dragger, // 可拖动对象，色盘游标以及滑块
    name, // 用来区分两个滑块
    direction // 用来区分仅x轴还是x,y轴均可拖动
  }) {
   this.$context = $context;
    this.$dragger = $dragger;
    this.name = name;
    this.direction = direction;
  }
}

考虑我们需要实现的效果，可以被拆分为两部分：

单击父元素，子元素可以瞬间移动到单击的位置；
单击子元素，可以拖动子元素。

很自然地，我们需要为父元素添加mousedown, mousemove, mouseup三个事件。在这里由于我们想当用户鼠标在区域外时，只要不松开左键还能继续拖动滑块，便可以将mousemove, mouseup这两个事件绑定在全局的document对象上。当按下鼠标时，将内部变量_isDragging设置为true；松开鼠标时，设置为false。这样便可通过_isDragging来确定元素是否被拖动。当对象正在被拖动时，则执行_setStyles函数为$dragger与$context设置样式。（utils.addHandler(context, event, handler)为target添加回调函数handler的event事件，关于utils对象，可看本文附录）。

class DragContext {
  constructor(...){
    ...;
    this._isDragging = false;
    this.init();
  }
  init() {
    this._addMousedown();
    this._addMousemove();
    this._addMouseup();
  }
  getName() {
    return this.name;
  }
  _addMousedown() {
    utils.addHandler(this.$context, 'mousedown', (e) => {
      // 初始化样式
      this._setStyles(e);
      this._isDragging = true;
    });
  }
  _addMousemove() {
    utils.addHandler(document, 'mousemove', (e) => {
      if (this._isDragging) {
        this._setStyles(e);
      }
    });
  }
  _addMouseup() {
    utils.addHandler(document, 'mouseup', (e) => {
      this._isDragging = false;
    });
  }

  _setStyles(e) {
    this._setDraggerStyles(e);
    this._setContextStyles(e);
  }
  _setDraggerStyles(e) {
    // 设置dragger样式
  }
  _setContextStyles(e) {
    // 设置context样式
  }
}

于是，如何确定当前可拖动元素的偏移量便成了一个很关键的问题，在这里我选择了获取基于当前视图的坐标，也就是e.clientX, e.clientY以及element.getBoundingClientRect()。为此我们需要新的“私有”变量：this._x, this._y, this._rect。为了将可拖动元素限制在一定的范围里，我们可以使用一个工具函数：utils.clamp，将小于最小值时设置为最小值，大于最大值时设置为最大值。

class DragContext {
  constructor({
  ...,
    initX, // 可选，初始化x坐标
    initY // 可选，初始化y坐标
  }){
    ...;
    this._x = initX || 0;
    this._y = initY || 0;
    this._rect = this.$context.getBoundingClientRect();
  }
  _setDraggerStyles(e) {
    this._x = utils.clamp(e.clientX - this._rect.left, 0, this._rect.width);
    this._y = utils.clamp(e.clientY - this._rect.top, 0, this._rect.height);
    switch (this.direction) {
      case 'horizontal':
        this.$dragger.style.transform = `translate(${this._x}px, 0)`;
        break;
      case 'vertical':
        this.$dragger.style.transform = `translate(0, ${this._y}px)`;
        break;
      case 'both':
        this.$dragger.style.transform = `translate(${this._x}px, ${this._y}px)`;
    }
  }
}

至此我们可以对目前的组件进行简单的测试了，直接上代码（jsFiddle自动在domready时加载，不用自己套壳了）：

const $palletes = Array.prototype.slice.call(document.querySelectorAll('.palette'));
const $sliders = Array.prototype.slice.call(document.querySelectorAll('.slider'));
const $picker = document.querySelector('.color-picker');
const $indicator = document.querySelector('.color-indicator');
const contexts = $palletes.map(($context) => {
    const name = $context.getAttribute('name');
    const $dragger = $sliders.filter(element => element.getAttribute('name') === name)[0];
    return new DragContext({
      $context,
      $dragger,
      name,
      direction: 'horizontal',
      initX: 120
    });
  });

const name = $picker.getAttribute('name');
const context = new DragContext({
  $context: $picker,
  $dragger: $indicator,
  name,
  direction: 'both'
});

实现颜色预览

接下来我们需要通过当前游标的位置，确定当前各个变量的值。为此，我们重写valueOf()函数，为每一项都生成一个[0, 1]区间的值：

class DragContext {
  ...
  valueOf() {
    switch (this.direction) {
      case 'horizontal':
        return this.name === 'alpha' ?
          this._x / this._rect.width :
          1 - this._x / this._rect.width;
      case 'vertical':
        return this._y / this._rect.height;
      case 'both':
        return [this._x / this._rect.width, 1 - this._y / this._rect.height];
    }
  }
}

由于hue的渐变是向左的，所以为了计算实际的hue值比例，应该使用1 - this._x / this._rect.width计算。

为了更方便地渲染context部分的样式，我们新建一个渲染类来完成这部分的工作：

class DragContext {
  _setContextStyles() {
    StyleRenderer.getInstance().evaluate();
  }
}

class StyleRenderer {
  constructor(doms, contexts) {
    this.doms = doms;
    this.doms.preview = document.querySelector('.preview');
    this.doms.result = {
      hex: document.querySelector('.hex'),
      rgb: document.querySelector('.rgb'),
      hsl: document.querySelector('.hsl'),
    }
    this.contexts = contexts;
    this.evaluate();
  }

  evaluate() {
    // calculate color values
    console.log(this.doms, this.contexts);
    this.setStyles();
  }

  setStyles() {
    // set context styles
  }

  static getInstance(doms, contexts) {
    if (!this.instance) {
      this.instance = new StyleRenderer(doms, contexts);
    }
    return this.instance;
  }
}

当我们用querySelector获取节点，创建DragContext对象时，就可以将获取到的节点与对象缓存，然后在创建渲染器时传入。StyleRenderer类以单例模式创建，并在构造函数中获取其他未缓存的节点。接着调用evaluate函数确认颜色的值，最后使用setStyles为界面着色。为了缓存dom与DragContext对象，我们需要重写调用代码：

const doms = {};
const dragContexts = [];
kickPicker();
kickSliders();
StyleRenderer.getInstance(doms, dragContexts);

function kickPicker() {
  // 获取色盘有关节点并缓存
  const $picker = document.querySelector('.color-picker');
  const $indicator = document.querySelector('.color-indicator');
  doms.$picker = $picker;
  doms.$indicator = $indicator;

  // 获取色盘有关对象并缓存
  const name = $picker.getAttribute('name');
  const context = new DragContext({
    $context: $picker,
    $dragger: $indicator,
    name,
    direction: 'both'
  });
  dragContexts.push(context);
}

function kickSliders() {
  // 获取滑轮有关节点并缓存
  const $palletes = Array.prototype.slice.call(document.querySelectorAll('.palette'));
  const $sliders = Array.prototype.slice.call(document.querySelectorAll('.slider'));
  doms.$palletes = $palletes;
  doms.$sliders = $sliders;

  // 获取滑轮有关对象并缓存
  const contexts = $palletes.map(($context) => {
    const name = $context.getAttribute('name');
    const $dragger = $sliders.filter(element => element.getAttribute('name') === name)[0];
    return new DragContext({
      $context,
      $dragger,
      name,
      direction: 'horizontal',
      initX: 120
    });
  });
  dragContexts.push(...contexts);
}

这时，从刚刚的console.log中可以看出，我们获取的节点与创建的DragContext都被缓存并传入StyleRenderer的实例中了。接下来可以着手实现evaluate函数了：

class StyleRenderer {
  ...
  evaluate() {
    // 色相滑块获取色相
    this.hue = 360 * this.contexts
      .filter(context => context.getName() === 'hue')[0]
      .valueOf();
    // 色盘横纵坐标获取饱和度与明度，注意的颜色是基于hsb而不是hsl的
    [this.saturation, this.brightness] = this.contexts
      .filter(context => context.getName() === 'color')[0]
      .valueOf();
    // 透明度滑块获取透明度
    this.alpha = this.contexts
      .filter(context => context.getName() === 'alpha')[0]
      .valueOf();
    // 用三个工具函数分别计算出hsl, rgb, hex的值
    this.hsl = utils.color.hsb2hsl(this.hue, this.saturation, this.brightness);
    this.rgb = utils.color.hsl2rgb(this.hsl.h, this.hsl.s, this.hsl.l);
    this.hex = utils.color.rgb2hex(this.rgb.r, this.rgb.g, this.rgb.b);
    // 当hex值可以简化时，将#66ccff简化为#6cf
    const simplifyHex = /^#(?:([da-f])1){3}$/.exec(this.hex);
    if (simplifyHex !== null) {
      this.hex = `#${this.hex[1]}${this.hex[3]}${this.hex[5]}`;
    }
    this.setStyles();
  }
}

当我们的DragContext类拥有了valueOf函数之后，获取颜色各个分量的值就是一个函数调用的事，接着就轮到setStyles了，有了它，我们就能完成90%了！

class StyleRenderer {
  ...
  setStyles() {
    // set context styles
    const round = Math.round;
    const rgbValues = `${round(this.rgb.r * 255)}, ${round(this.rgb.g * 255)}, ${round(this.rgb.b * 255)}`;
    const alphaValue = utils.trimZero(this.alpha.toFixed(2));
    const hslaColor = `hsla(${round(this.hsl.h % 360)}, ${round(this.hsl.s * 100)}%, ${round(this.hsl.l * 100)}%, ${alphaValue})`;
    const rgbColor = `rgb(${rgbValues})`;
    const rgbaColor = `rgba(${rgbValues}, ${alphaValue})`
    // 如果用图片或者再加一个div来代替棋盘背景的话，这里的代码会好很多
    this.doms.preview.style.background =
      `linear-gradient(${hslaColor}, ${hslaColor}) 0 0 / cover,
      linear-gradient(45deg, rgba(0,0,0,0.25) 25%, transparent 0, transparent 75%, rgba(0,0,0,0.25) 0) 0 0 / 12px 12px,
      linear-gradient(45deg, rgba(0,0,0,0.25) 25%, transparent 0, transparent 75%, rgba(0,0,0,0.25) 0) 6px 6px / 12px 12px`;
    this.doms.$palletes
      .filter(element => element.getAttribute('name') === 'alpha')[0]
      .style.background =
        `linear-gradient(to right, rgba(0,0,0,0), ${rgbColor}) 0 0 / cover,
        linear-gradient(45deg, rgba(0,0,0,0.25) 25%, transparent 0, transparent 75%, rgba(0,0,0,0.25) 0) 0 0 / 12px 12px,
        linear-gradient(45deg, rgba(0,0,0,0.25) 25%, transparent 0, transparent 75%, rgba(0,0,0,0.25) 0) 6px 6px / 12px 12px`;
    this.doms.$picker.style.backgroundColor = `hsl(${this.hue}, 100%, 50%)`;

    // results
    this.doms.result.hex.innerHTML = this.hex;
    this.doms.result.rgb.innerHTML = `rgba(${round(this.rgb.r * 255)}, ${round(this.rgb.g * 255)}, ${round(this.rgb.b * 255)}, ${utils.trimZero(this.alpha.toFixed(2))})`;
    this.doms.result.hsl.innerHTML = hslaColor;
  }
}

为了让我们的取色板更像取色板，当然要让它派上用场啦！不如就把那个白了一整个教程的Change my color pls的颜色改掉吧！为此，我们需要把div.target的节点也加入到我们StyleRenderer的实例中；更进一步，调色板一般是默认隐藏的，为此，我们可以修改div.wrapper的样式，并在鼠标点击时toggle它的active类：

.wrapper {
  user-select: none;
  transition: all ease-in-out 0.2s;
  transform-origin: 50% 100%;
  transform: scale(0.8) rotate3d(0, 1, 0, 90deg);
}

.wrapper.active {
  transform: scale(1) rotate3d(0, 1, 0, 0);
}

const doms = {};
const dragContexts = [];
kickTarget();
function kickTarget() {
  const $target = document.querySelector('.target');
  doms.$target = $target;
  const $colorPickerComponent = document.querySelector('.wrapper');
  utils.addHandler($target, 'click', (e) => {
    $colorPickerComponent.classList.toggle('active');
  });
  // 在第一次点开取色板时再初始化
  utils.addHandler($colorPickerComponent, 'transitionend', function handler(){
    kickPicker();
    kickSliders();
    StyleRenderer.getInstance(doms, dragContexts);
    utils.removeHandler($colorPickerComponent, 'transitionend', handler);
  });
}
function kickPicker() {
  ...
}
function kickSliders() {
  ...
}

接着，在StyleRenderer中渲染文字颜色：

class StyleRenderer {
  setStyles() {
    ...
    // target
    this.doms.$target.style.color = hslaColor;
  }
}

由于我们默认为字体颜色为白色，并且有StyleRenderer为我们设置背景，现在可以将div.preview中与div.alpha中的背景颜色改回来了：

.preview {
  background: white;
}

.alpha {
   background:
     linear-gradient(to right, rgba(0,0,0,0), rgba(255,255,255,1)) 0 0 / cover,
     linear-gradient(45deg, rgba(0,0,0,.25) 25%, transparent 0, transparent 75%, rgba(0,0,0,.25) 0) 0 0 / 12px 12px,
     linear-gradient(45deg, rgba(0,0,0,.25) 25%, transparent 0, transparent 75%, rgba(0,0,0,.25) 0) 6px 6px / 12px 12px;
}

后记

在Firefox里测试的时候才发现，max-content这个值的兼容性有点令人捉急… 于是还是加个fallback吧…

1
2
3

.target {
  width: 240px;
}

（完）

附录

Utils对象

const utils = {
  // 事件绑定
  addHandler(target, event, handler) {
    if (target.addEventListener) {
      target.addEventListener(event, handler, false);
    } else if (target.attachEvent) {
      target.attachEvent('on' + event, handler);
    } else {
      target['on' + event] = handler;
    }
  },
  // 事件解绑
  removeHandler(target, event, handler) {
    if (target.removeEventListener) {
      target.removeEventListener(event, handler, false);
    } else if (target.detachEvent) {
      target.detachEvent('on' + event, handler);
    } else {
      target['on' + event] = null;
    }
  },
  // 坐标锁定
  clamp(val, min, max) {
    return val < min ? min : (val > max ? max : val);
  },
  // 判断是否为数组
  isArray(arrayLike) {
    return Object.prototype.toString.call(arrayLike) === '[object Array]';
  },
  // 数字末尾除0
  trimZero(str) {
    return str.replace(/.?0*$/, '');
  },
  color: {
    // https://gist.github.com/NV/522734
    // hsb颜色转为hsl颜色
    hsb2hsl(h, s, b) {
      var hsl = {
        h: h
      };
      hsl.l = (2 - s) * b;
      hsl.s = s * b;
      if (hsl.l <= 1 && hsl.l > 0) {
        hsl.s /= hsl.l;
      } else {
        hsl.s = hsl.s / (2 - hsl.l) || 0;
      }
      hsl.l /= 2;
      if (hsl.s > 1) {
        hsl.s = 1;
      }
      return hsl;
    },
    /**
     * Converts an HSL color value to RGB. Conversion formula
     * adapted from http://en.wikipedia.org/wiki/HSL_color_space.
     * Assumes s and l are contained in the set [0, 1] and h is
     * contained in the set [0, 360], returns r, g, and b in the
     * set [0, 255].
     *
     * @param   {number}  h       The hue
     * @param   {number}  s       The saturation
     * @param   {number}  l       The lightness
     * @return  {Array}           The RGB representation
     */
    // hsl颜色转为rgb颜色
    hsl2rgb(h, s, l) {
      h = h / 360;
      var r, g, b;
      if (s == 0) {
        r = g = b = l; // achromatic
      } else {
        var hue2rgb = function hue2rgb(p, q, t) {
          if (t < 0) t += 1;
          if (t > 1) t -= 1;
          if (t < 1 / 6) return p + (q - p) * 6 * t;
          if (t < 1 / 2) return q;
          if (t < 2 / 3) return p + (q - p) * (2 / 3 - t) * 6;
          return p;
        }
        var q = l < 0.5 ? l * (1 + s) : l + s - l * s;
        var p = 2 * l - q;
        r = hue2rgb(p, q, h + 1 / 3);
        g = hue2rgb(p, q, h);
        b = hue2rgb(p, q, h - 1 / 3);
      }
      return {r, g, b};
    },
    // rgb颜色转为hex颜色
    rgb2hex(r, g, b) {
      return "#" + (16777216 | (b * 255) | ((g * 255) << 8) | ((r * 255) << 16)).toString(16).slice(1);
    }
  }
}

原生JS实现一个Chrome DevTools取色板（上）

2017-10-03T13:33:41.000Z

使用 Chrome DevTools 做开发的同学应该都知道，Chrome 开发工具中的取色板简直是网页设计时神一般的存在，不仅可以实时预览页面样式，配合插件还可以直接保存到本地，可谓 debug 一把手。今天就来试试用原生 JS 还原一个取色板吧！DevTools 取色板预览：

图中不仅包含了取色、调节色相、调节透明度、颜色预览等基本功能外，还可以使用三种方式：HEX, RGBA, HSLA输出颜色代码。此外，取色板还包括了一个屏幕取色器（JS 无法实现），以及一个下方的自定义色板的功能（暂未实现）。本文将会实现的效果如图：

静态页面搭建

原型实现

这次我们采用基本的浮动布局，首先搭建基本的HTML骨架，这部分较为简单：

<div class="wrapper">
    <div class="color-picker" name="color">
        <div class="color-indicator" name="color">div>
    div>
    <div class="preview">div>
    <div class="hue palette" name="hue">
        <div class="slider" name="hue">div>
    div>
    <div class="alpha palette" name="alpha">
        <div class="slider" name="alpha">div>
    div>
    <h5 class="hex result">#fffh5>
    <h5 class="rgb result">rgba(255, 255, 255, 1)h5>
    <h5 class="hsl result">hsla(0, 0%, 100%, 1)h5>
div>
<div class="target">Change my color pls!div>

其中，div.color-indicator为色盘上的游标，两个div.slider为色相、透明度控件上的滑块。为了布局方便，这里不考虑响应性全部采用px为单位布局，代码如下：

@import url(https://fonts.googleapis.com/css?family=Quicksand);

html,
body {
    margin: 0;
    box-sizing: border-box;
}
body {
    background-color: #333;
    font-family: "Quicksand", sans-serif;
    padding-top: 100px;
}

.wrapper {
    background: white;
    margin: 0 auto;
    width: 200px;
    height: 265px;
    border-radius: 3px;
    border: 1px solid #666;
    cursor: default;
}

.color-picker {
    width: 200px;
    height: 120px;
    margin-bottom: 15px;
    border-radius: inherit;
    background: darkred;
    overflow: hidden;
}

.preview {
    background: darkgreen;
    float: left;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    margin-left: 12px;
    border: 1px solid #eee;
}

.palette {
    background: darkblue;
    width: 120px;
    height: 12px;
    margin-left: 60px;
    position: relative;
    border-radius: 1px;
    margin-bottom: 10px;
}

.result {
    color: #aaa;
    margin: 0;
    line-height: 2;
    text-align: center;
    cursor: text;
}

.target {
    width: max-content;
    margin: 0 auto;
    padding-top: 10px;
    color: white;
    font-size: 24px;
    cursor: pointer;
}

由于等会要给div.target绑定点击事件触发取色板，这里将该元素的宽度设置为~~max-content~~（← 兼容性不好，使用时一定要加fallback），可以将宽度由100%缩减为文字部分的实际宽度。到这一步之后效果如下：

样式加工

接下来便是将取色板上的 CSS 样式由易到难逐个击破的时间。

色板底部小三角

使用伪元素完成。为了使小三角能与父元素有相同的背景颜色与边框，这里并没有采用border-radius模拟三角形，而是使用background: linear-gradient()。另外，使用绝对定位时应该为父元素设置position: relative属性。

.wrapper {
    position: relative;
}
.wrapper::after {
    content: "";
    position: absolute;
    width: 10px;
    height: 10px;
    top: 260px;
    left: 94px;
    background: linear-gradient(135deg, transparent 50%, white 50%);
    border-width: 1px 1px 0 0 inherit solid;
    transform: rotate(45deg);
}

色相滑块

也是使用linear-gradient，为了颜色的连贯性必须多加几个色标。

.hue {
    background: linear-gradient(
        to left,
        hsl(0, 100%, 50%) 0%,
        hsl(30, 100%, 50%) 8.33%,
        hsl(60, 100%, 50%) 16.67%,
        hsl(90, 100%, 50%) 25%,
        hsl(120, 100%, 50%) 33.33%,
        hsl(150, 100%, 50%) 41.67%,
        hsl(180, 100%, 50%) 50%,
        hsl(210, 100%, 50%) 58.33%,
        hsl(240, 100%, 50%) 66.67%,
        hsl(270, 100%, 50%) 75%,
        hsl(300, 100%, 50%) 83.33%,
        hsl(330, 100%, 50%) 91.67%,
        hsl(0, 100%, 50%) 100%
    );
}

取色板渐变

取色板渐变由三个部分组成：

明度渐变： linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1))
饱和度渐变：linear-gradient(to left, rgba(0, 0, 0, 0), rgba(255, 255, 255, 1))

底色：background-color

将这三个背景叠加在一起，便形成了我们的取色盘。当我们需要改变色盘的颜色时，只需改变background-color的色相即可。

.color-picker {
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1)), linear-gradient(to
                left, rgba(0, 0, 0, 0), rgba(255, 255, 255, 1));
    background-color: red;
}

透明度滑块及预览颜色

棋盘图现在已经成为了公认的表示透明区域的方法了。它也可以通过渐变来实现，只不过需要利用斜向 45° 的（0, 25, 75, 100）四个色标的渐变将矩形切割成两个三角形加上中间的六边形。棋盘图的画法在《CSS 揭秘》一书中有较为详细的解读，这里不做赘述：

.alpha {
    background: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 255, 1)) 0 0 / cover, linear-gradient(
                45deg,
                rgba(0, 0, 0, 0.25) 25%,
                transparent 0,
                transparent 75%,
                rgba(0, 0, 0, 0.25) 0
            ) 0 0 / 12px 12px,
        linear-gradient(
                45deg,
                rgba(0, 0, 0, 0.25) 25%,
                transparent 0,
                transparent 75%,
                rgba(0, 0, 0, 0.25) 0
            ) 6px 6px / 12px 12px;
}

.preview {
    background: linear-gradient(
                45deg,
                rgba(0, 0, 0, 0.25) 25%,
                transparent 0,
                transparent 75%,
                rgba(0, 0, 0, 0.25) 0
            ) 0 0 / 12px 12px, linear-gradient(
                45deg,
                rgba(0, 0, 0, 0.25) 25%,
                transparent 0,
                transparent 75%,
                rgba(0, 0, 0, 0.25) 0
            ) 6px 6px / 12px 12px;
    background-color: rgba(255, 0, 0, 0.5);
}

透明度滑块与预览颜色不同的地方在于，透明度滑块的棋盘图上面还需要加一层当前颜色的渐变，而预览颜色区域只需要加上一个背景即可。预览：

交互设计

由于省略了HEX, RGB, HSL的切换按钮，这里的交互一共只有 3 个：色盘、色相滑块、透明度滑块。

首先我们为色盘游标增加一点基本样式：

.color-indicator {
    position: relative;
    left: -6px;
    top: -6px;
    width: 12px;
    height: 12px;
    transform: translate(-6px, -6px);
    border-radius: 50%;
    border: 1px solid white;
}

这里为了让色盘游标移动的中心位于圆心，加上了relative以及left、top属性，接着再用translate将它移至屏幕外；接着，定义滑块的公共样式：

.slider {
    position: relative;
    left: -8px;
    top: -2px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    transform: translateX(120px);
    background: rgb(248, 248, 248);
    filter: drop-shadow(2px 2px 3px rgba(0, 0, 0, 0.2));
}

由于初始滑块位置在右侧，这里直接使用translateX(120px)将两个滑块均移动120px靠近右侧，并且也用left与top对槽内相对位置进行定位。这里利用border-radius将滑块变换为圆形之后，就不能使用box-shadow对其进行描边了（box-shadow产生的阴影只能为矩形）。这里使用了filter中的drop-shadow滤镜属性，目前仅IE不支持。

到这里界面部分就结束啦，交互逻辑请看下期！

纯CSS实现Youtube视频播放按钮动画

2017-06-18T11:28:02.000Z

前两天在 Youtube 上看视频时，无意间发现视频播放器的播放暂停切换按钮动画十分流畅，于是就想试着用 CSS 仿制一下，先上效果图：

等等，暂停按钮可以用border-left与border-right实现，播放的三角形也可以用边框实现，这岂不是骗小孩子的把戏？于是乎没几分钟，我们就可以写出这么一个实现：

可是致命的缺陷是，由于暂停按钮中间缝隙的关系，我们必须对width元素进行动画处理，这直接导致border-width的动画无法按照我们设想的方式工作。于是乎，换个方向考虑，只能使用伪元素或者再添加一个div元素将两个边框分别实现了。

在这里为了布局方便，能够使用flex布局，使用两个div来实现，实际也可以只用一个div配合伪元素以及普通定位方式来获得更好的兼容性。

首先用两个div的边框模拟出暂停按钮的两个大长棍：

<head>
    <style>
        body {
            background-color: #333;
        }
        .wrapper {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin: 32px;
            width: 32px;
            height: 32px;
        }
        .box {
            width: 0;
            height: 24px;
            border-left: 8px solid white;
        }
        .left {
            margin-left: 6px;
        }

        .right {
            margin-right: 6px;
        }
    style>
head>
<body>
    <div class="wrapper">
        <div class="box left">div>
        <div class="box right">div>
    div>
body>

然后为外层div添加一个click事件，在click事件触发时toggle两个子div元素的active类：

$div = document.querySelector(".wrapper");
$div.addEventListener("click", () => {
    [...$div.children].forEach((element) => {
        element.classList.toggle("active");
    });
});

接下来我们就得定义这两根大棒在active状态下的属性了：左边的大棒在active状态下变换为梯形，右边的大棒在active状态下变换为三角形，且梯形的腰与三角形的两条边要在同一条直线上。这就要求border-left-width与border-top-width的比值一定，即可以使用公共的border-width系列属性。在这里为了让上下边框也能受到transition属性的影响，在.box中也要定义初始值。

.box {
    width: 0;
    height: 24px;
    transition: all 0.2s;
    border-left: 8px solid white;
    border-top: 0 solid transparent;
    border-bottom: 0 solid transparent;
}
.box.active {
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
    border-left: 10px solid white;
}

为了使右边的大棒在active状态下缩小为三角形，需要将其高度设置为0；为了使左边的大棒缩小为梯形，需要将其高度设置为短边的长度，即24px/2 = 12px：

.right.active {
    height: 0;
}
.left.active {
    height: 12px;
}

到这里这个简单的 CSS 动画就完成啦，完成效果：

当然，如果要完全不使用JavaScript，则可以使用input复选框与label标签的:active伪类以及::before、::after伪元素来实现，只不过语义性会有一定的缺失。并且，由于没有flexbox黑科技的支持，居中定位会变得麻烦一点。