jQuery网页能点击的新功能步骤引导提示

准备好需要用到的图标。

新建html文档。

书写hmtl代码。

初始化css代码。

书写css代码。#maskBg { width: 0; height: 0; position: absolute; left: 0; top: 0; right: 0; bottom: 0; z-index: 10000 !important; }#mask { width: 0; height: 0; position: absolute; z-index: 1; border: 0 solid #000; opacity: 0.6; transition: all .3s; }#mask::before { content: ''; width: 100%; height: 100%; border-radius: 50%; border: 100px solid #000; position: absolute; left: -100px; top: -100px; }#maskTitle { width: 400px; height: 400px; position: absolute; z-index: 2; }#pointer { width: 400px; height: 100px; background-repeat: no-repeat; background-position: center center; }#mianWarn { width: 400px; height: 280px; padding-top: 20px; position: relative; }#nextStep { display: block; width: 80px; height: 30px; margin: 0 auto; line-height: 28px; font-size: 16px; text-align: center; border-radius: 2px; border: 1px solid #4de6cf; color: #4de6cf; }#warnData { height: 210px; text-align: center; line-height: 210px; color: #4de6cf; background-repeat: no-repeat; background-position: center; }#closeMaskWarn { font-size: 18px; position: absolute; right: 0; top: 0; width: 20px; height: 20px; text-align: center; line-height: 20px; font-weight: 600; color: #FFF; }#outPointer { position: absolute; right: 0; bottom: 0; width: 80px; text-align: center; line-height: 20px; height: 20px; font-size: 14px; color: #FFF; }

书写并添加js代码。

代码整体结构。

查看效果。