总结CSS 实现新手引导效果的六种方式
前言
我们在平常做业务中，在功能变更，或者有大的改动时，经常会用到新手引导功能， 虽然有很多库可以使用， 但是有时候很简单的需求，没必要引入库， 本文用最简化代码，实现一下新手引导的遮罩部分， 主要是总结实现思想
主要难点就是， 一般遮罩层级要高于需要页面元素， 但是如何让页面高亮的元素突破遮罩的限制，是主要要解决的问题
以下的代码都将用最简化的方式实现， 写死元素的宽高， 主要重点是实现思想上：
方式一： 遮罩拼接
下面是 Antd Tour 组件的实现方式， 我们通过更改背景色，加以区分
从图中可以看出， 让元素突破遮罩的方式是，不突破， 改而让遮罩分成上下左右四块， 所以，第一种方式就是通过元素拼接遮罩， 实现代码如下：
<style>
* {
margin: 0;
padding: 0;
}
.box {
width: 100vw;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
.button {
position: relative;
z-index: 1;
width: 400px;
height: 100px;
}
.mask {
width: 100vw;
height: 100vh;
position: absolute;
inset: 0;
}
.mask .horizon {
display: flex;
justify-content: space-between;
}
.mask .horizon div {
height: 100vh;
width: calc(50vw - 200px);
background-color: rgba(255, 0, 255, 0.3);
}
.mask .vertival {
display: flex;
flex-direction: column;
justify-content: space-between;
position: absolute;
top: 0;
height: 100vh;
}
.mask .vertival div {
width: 100vw;
height: calc(50vh - 50px);
background-color: rgba(255, 0, 0, 0.3);
}
</style>
<body>
<div class="box">
<button class="button">新手指导</button>
</div>
<!-- 拼接实现遮罩 -->
<div class="mask">
<div class="horizon">
<div></div>
<div></div>
</div>
<div class="vertival">
<div></div>
<div></div>
</div>
</div>
</body>
效果如下
方式二： 通过 border 的方式实现
上面代码太多了， 下面这种方式就简单太多了， 只要对当前元素通过伪元素的方式添加很宽很高的变宽即可
方式三： 通过给元素增加阴影
增加边框可以， 同理增加阴影肯定也可以了 ， 代码与效果如下
方式四： 使用 css 的 clip-path
这种方式是通过裁剪的方式，将元素漏出来， 需要计算的点比较多， 大致就是计算一个回字
关于clip-path如果不熟，不知道怎么设置点的位置，可以在这个网站找思路，立马有很多预设的图型，我们只需要找到接近的那个。改一下数据即可 bennettfeely.com/clippy/
如图，我们发现这个形状，跟我们要设置遮罩的区域很像， 然后分析一下他的实现，顶点的顺序如下
位置3和位置8，两个点其实是重合起来了， 我把它分开，这样更容易理解执行顺序
明白了执行顺序，与实现原理， 代码实现就比较简单了
代码如下：
<style>
.mask {
position: absolute;
inset: 0;
background-color: rgb(210, 196, 196);
clip-path: polygon(
0% 0%,
0% 100%,
calc(50vw - 200px) 100%,
calc(50vw - 200px) calc(50vh - 50px),
calc(50vw + 200px) calc(50vh - 50px),
calc(50vw + 200px) calc(50vh + 50px),
calc(50vw - 200px) calc(50vh + 50px),
calc(50vw - 200px) 100%,
100% 100%,
100% 0%
);
}
</style>
<body>
<div class="box">
<button class="button">新手指导</button>
</div>
<div class="mask"></div>
</body>
方式五： 复制新元素放在遮罩位置
这种方式的实现就是不考虑元素与遮罩的关系， 直接copy一个新的元素，覆盖原有元素
核心代码如下：
<style>
.mask {
position: absolute;
inset: 0;
background-color: rgba(191, 223, 183, 0.5);
}
.mask .button {
position: absolute;
left: 50%;
top: 50%;
width: 400px;
height: 100px;
transform: translate(-50%, -50%);
display: flex;
justify-content: center;
align-items: center;
}
</style>
<body>
<div class="box">
<button class="button">新手指导</button>
</div>
<div class="mask">
<button class="button">新手指导 copy</button>
</div>
</body>
实现方式六 canvas
这种其实不是纯css 实现了， 需要用到js， 思想就是画一个整屏的元素，然后在擦除元素位置， 核心代码如下
<style>
* {
margin: 0;
padding: 0;
}
.box {
width: 100vw;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
.button {
position: relative;
z-index: 1;
width: 400px;
height: 100px;
}
canvas {
position: absolute;
top: 0;
}
</style>
<body>
<div class="box">
<button class="button">新手指导</button>
</div>
<canvas id="canvas"></canvas>
</body>
<script>
const button = document.querySelector(".button");
const rect = button.getBoundingClientRect();
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
canvas.setAttribute("width", window.innerWidth + "px");
canvas.setAttribute("height", window.innerHeight + "px");
ctx.fillStyle = "green";
ctx.fillRect(0, 0, window.innerWidth, window.innerHeight);
ctx.clearRect(rect.left, rect.top, rect.width, rect.height);
</script>
总结
本文主要实现新手引导中的遮罩与元素高亮如何处理， 分为六种实现方式， 主要学习其实现思想， 并在业务开发中， 选择最优解决方案
转载自:https://juejin.cn/post/7260767425729134652