likes
comments
collection

CSS 实现视频控件 icons

作者站长头像
站长
· 阅读数 9

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

CSS 实现视频控件 icons

顺势打开 素材版权说明

CSS 实现视频控件 icons

我默默地关闭了站点。

然后陷入了沉思:

社会因为懒惰而飞速发展

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

功能介绍

我们实现下面的功能:

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

icon 实现

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

CSS 实现视频控件 icons

嗯,既然我们要用 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 元素就能实现的了。建议找设计小姐姐或者小哥哥解决。

嗯~截图上的相关代码,感兴趣的可以看看下面:

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

往期精彩推荐

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