基于h5使用蒙层实现新手指引功能

清华小菜

于 2023-03-15 11:47:22 发布

阅读量706

点赞数

分类专栏：笔记文章标签： html5 css 蒙层新手指引

本文链接：https://blog.csdn.net/C90283/article/details/129550208

版权

本文介绍如何利用HTML5和CSS技术实现网页新手指引功能，通过创建蒙层来引导用户熟悉页面操作。

摘要由CSDN通过智能技术生成

页面效果：
在这里插入图片描述

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
      <style>
            .contentItem {
     
                  text-align: center;
                  border: solid 1px #eee;
            }

            .content{
     
                  display: none;
            }

            .mask {
     
                  position: fixed;
                  width: 100%;
                  height: 100%;
                  background-color: rgba(0, 0, 0, .5);
                  z-index: 100;
                  display: none;
            }

            .tip {