短视频直播源码开发，如何实现图标点击态的蒙层效果

在短视频直播源码的开发中，经常需要加入点击二态，即用户点击页面某个部分时，该部分的样式进行相应的变化来响应用户的点击操作，这样能带给用户更好的使用体验。今天我们要讨论的是如何实现图标点击态的蒙层效果。

先来看下需求吧~

在短视频直播源码如果判断用户的点击操作？

这个应该不用多说，使用css的伪类选择:active即可，这需要注意的是不要使用:hover,有些新手往往会直接使用:hover，一方面兼容性比较差，另一方面短视频直播源码响应用户操作表现时会有些怪异。

在短视频直播源码中如果添加蒙层？

我们先用最容易想到的方法来实现这个需求。
我们可以添加一个和图标同样尺寸的dom蒙层元素，当图标被点击时我们利用JavaScript来显示这个蒙层

html

<div class="wrapper">
    <i class="icon"></i>
    <i class="mask"></i>
</div>

虽然能够实现，但是有一些问题

1、使用了额外的JavaScript来进行行为控制
2、需要添加额外的DOM结构
3、mask的尺寸样式定义需要依赖于icon的尺寸

相信大家也想到了，我们可以使用css3中的::after来规避上面提到的一些问题

html

<i class="icon"></i>

css

.icon {
    ...
    position: relative
    border-raidus: 50%;
}
.icon::after {
    ...
    content: '';
     100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    border-radius: 50%;
    display: none;
    background: rgba(0, 0, 0, .5);
}
.icon:active::after {
    display: block;
}

现在好多了，HTML已经非常简洁了，不需要定义额外的结构，而且不需要依赖JavaScript，但是css还是有一些问题：
1、需要改变.icon的position为relative
2、蒙层还是与icon的结构有依赖（比如border-radius:50%）
3、css代码偏多，不够简洁

好了，让我们快速结束吧，下面给出一种简洁的方案

.icon:active {
    box-shadow: inset 0 0 1000px rgba(0, 0, 0, .5);
}

以上就是“短视频直播源码开发，如何实现图标点击态的蒙层效果”的全部内容了，希望对大家有帮助。

本文转载自网络，转载仅为分享干货知识，如有侵权欢迎联系云豹科技进行删除处理
原文链接：https://segmentfault.com/a/1190000006214519