CSS 实现视频控件 icons

在实现视频自定义控件的时候，需要一系列的 icons，这让我想到了某里的 iconfont 库。但是当我打开了站点，准备下载我需要的 icons 的时候，一行文字引起了我的注意：

顺势打开 素材版权说明 ：

我默默地关闭了站点。

然后陷入了沉思：

社会因为懒惰而飞速发展

这简单的 icon，咱们也可以自己实现，适当偷下懒？

功能介绍

我们实现下面的功能：

• 视屏倍速快退
• 视频倍速快进
• 跳转到视频的开头
• 视频开始播放
• 视频暂停播放
• 跳转到视频的结尾
• 视频尺寸缩小
• 视频尺寸放大
• 视频尺寸还原
• 视频关闭
• 视频全屏
• 视频画面截图
• 视频指定时间跳转

icon 实现

上面我们说到的这些功能，我们按照自己的提示来实现，效果如下图：

嗯，既然我们要用 css 来实现，那么我们秉承着越少用 html 元素，那就越棒了。所以，上面实现的 icon 都是使用一个元素完成，比如减速的图标：

<i class="jimmy-custom-icons icon-speed-down"></i>

剩下的内容，我们都用伪元素进行完成，也就是 ::before 和 ::after。还是以减速的图标为例：

.jimmy-custom-icons {
  width: 36px;
  height: 36px;
  position: relative;
  display: block;
  border: 2px solid #666;
  border-radius: 50%;
}

/* 减速 */
.icon-speed-down::before, .icon-speed-down::after {
  display: block;
  content: '';
  width: 0;
  height: 0;
  border: 10px solid #666;
  border-left-color: transparent;
  border-top-color: transparent;
  border-bottom-color: transparent;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
}
.icon-speed-down::before {
  left: calc(50% - 10px);
}
.icon-speed-down::after {
  left: 50%;
}

咦，还不错哦，能够满足我们在简单的 icons 上的需求。

PS：复杂的内容，可以就不仅靠一个 html 元素就能实现的了。建议找设计小姐姐或者小哥哥解决。

嗯～截图上的相关代码，感兴趣的可以看看下面：

也许展示不是很友好，可点线上编辑器的右上角查看详情 👀

往期精彩推荐

• Flutter 仿写新闻客户端
• Dart 知识点 - 数据类型
• Flutter 开发出现的那些 Bugs 和解决方案「持续更新... 」

如果读者觉得文章还可以，不防一键三连：关注➕点赞➕收藏