CSS制作提示框 ‘正在加载请。。。。。’

下面是关于CSS制作提示框“正在加载请。。。。。”的完整攻略：

1. HTML结构

首先需要在HTML中创建一个包含正在加载提示信息的容器：

<div class="loading-box">
  <div class="loading-icon"></div>
  <div class="loading-text">正在加载，请稍候...</div>
</div>

其中，loading-box是包裹整个提示框的容器，loading-icon是用于显示加载动画的元素，loading-text是用于显示提示文字的元素。

2. CSS样式

接下来需要对上述HTML结构进行样式的设置，实现提示框的显示和动画效果。以下是一个示例代码：

/* 加载容器 */
.loading-box {
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
  background-color: rgba(0, 0, 0, 0.3);
}

/* 加载动画 */
.loading-icon {
  width: 30px;
  height: 30px;
  margin-right: 10px;
  border-radius: 50%;
  background-color: #0070f3;
  animation: rotate 1s linear infinite;
}

/* 加载文字 */
.loading-text {
  font-size: 18px;
  color: #ffffff;
  text-align: center;
}

/* 加载动画旋转效果 */
@keyframes rotate {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}

在这个示例代码中，首先对.loading-box进行样式设置，将其设置为成为一个宽高为100%的固定定位容器，位于最上层，同时设置其半透明背景色。接着，对.loading-icon进行样式设置，将其中的元素设置为一个宽高相等的圆，设置其背景色以及旋转动画，使其呈现出加载动画的效果。最后，对.loading-text进行样式设置，设置其字体大小、颜色以及居中显示。

3. 实例说明

示例1：基本样式提示框

此示例是一个最基础的正在加载提示框，只包含一个加载图标和一个文字提示。

<div class="loading-box">
  <div class="loading-icon"></div>
  <div class="loading-text">正在加载，请稍候...</div>
</div>

.loading-box {
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
  background-color: rgba(0, 0, 0, 0.3);
}

.loading-icon {
  width: 30px;
  height: 30px;
  margin-right: 10px;
  border-radius: 50%;
  background-color: #0070f3;
  animation: rotate 1s linear infinite;
}

.loading-text {
  font-size: 18px;
  color: #ffffff;
  text-align: center;
}

@keyframes rotate {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}

示例2：自定义提示框样式

此示例所示为一个自定义的提示框样式，包含一个圆形及文字，虽然样式比较简单，但相对实用。

<div class="loading-box">
  <div class="loading-icon"></div>
  <div class="loading-text">数据正在加载，请稍候...</div>
</div>

.loading-box {
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
  background-color: rgba(0, 0, 0, 0.3);
}

.loading-icon {
  width: 50px;
  height: 50px;
  background: white;
  border-radius: 50%;
  box-shadow: 0 0 0 1px #0070f3;
  position: relative;
  transform-origin: center;
  animation: animate-circle 1.5s infinite ease-in-out;
}

.loading-text {
  font-size: 24px;
  color: #ffffff;
  text-align: center;
}

@keyframes animate-circle {
  from {
    transform: scale(0);
    opacity: 1;
  }
  to {
    transform: scale(1);
    opacity: 0;
  }
}

通过上述自定义样式的设置可以看出，用户可以根据需求，可以自行设计出适合自己网站的提示框。需要注意的是，样式设计需要考虑用户体验，过于炫酷的样式，可能会对用户造成干扰。