总结CSS 实现新手引导效果的六种方式

前言

我们在平常做业务中,在功能变更,或者有大的改动时,经常会用到新手引导功能, 虽然有很多库可以使用, 但是有时候很简单的需求,没必要引入库, 本文用最简化代码,实现一下新手引导的遮罩部分, 主要是总结实现思想

主要难点就是, 一般遮罩层级要高于需要页面元素, 但是如何让页面高亮的元素突破遮罩的限制,是主要要解决的问题

以下的代码都将用最简化的方式实现, 写死元素的宽高, 主要重点是实现思想上:

方式一: 遮罩拼接

下面是 Antd Tour 组件的实现方式, 我们通过更改背景色,加以区分

从图中可以看出, 让元素突破遮罩的方式是,不突破, 改而让遮罩分成上下左右四块, 所以,第一种方式就是通过元素拼接遮罩, 实现代码如下:

html 复制代码
  <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,两个点其实是重合起来了, 我把它分开,这样更容易理解执行顺序

明白了执行顺序,与实现原理, 代码实现就比较简单了

代码如下:

html 复制代码
  <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一个新的元素,覆盖原有元素

核心代码如下:

html 复制代码
  <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, 思想就是画一个整屏的元素,然后在擦除元素位置, 核心代码如下

html 复制代码
<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>

总结

本文主要实现新手引导中的遮罩与元素高亮如何处理, 分为六种实现方式, 主要学习其实现思想, 并在业务开发中, 选择最优解决方案

相关推荐
安全系统学习几秒前
系统安全之大模型案例分析
前端·安全·web安全·网络安全·xss
涛哥码咖16 分钟前
chrome安装AXURE插件后无效
前端·chrome·axure
OEC小胖胖27 分钟前
告别 undefined is not a function:TypeScript 前端开发优势与实践指南
前端·javascript·typescript·web
行云&流水1 小时前
Vue3 Lifecycle Hooks
前端·javascript·vue.js
Sally璐璐1 小时前
零基础学HTML和CSS:网页设计入门
前端·css
老虎06271 小时前
JavaWeb(苍穹外卖)--学习笔记04(前端:HTML,CSS,JavaScript)
前端·javascript·css·笔记·学习·html
三水气象台1 小时前
用户中心Vue3网页开发(1.0版)
javascript·css·vue.js·typescript·前端框架·html·anti-design-vue
灿灿121381 小时前
CSS 文字浮雕效果:巧用 text-shadow 实现 3D 立体文字
前端·css
烛阴2 小时前
Babel 完全上手指南:从零开始解锁现代 JavaScript 开发的超能力!
前端·javascript
AntBlack2 小时前
拖了五个月 ,不当韭菜体验版算是正式发布了
前端·后端·python