🚀第一步我们创建html页面添加相应的标签和元素

<div id="loading" style="display: none;">
        <div class="loader"></div>
      </div>
      <div id = "div_One" style="visibility: hidden;width: 300px;height: 300px;border:1px solid red;">
          <h1>半杯可可</h1>
      </div>
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.

👉这里div内联样式了一个关键的Css属性：visibility

CSS的visibility属性用于控制元素的可见性。它有两个常用的取值：

  • visible：元素可见。这是默认值。
  • hidden：元素隐藏，但仍会占据布局空间。

和Css属性display属性的区别

与display属性不同，当元素的visibility设置为hidden时，该元素仍然存在于文档流中，并且会占据页面的布局空间。只是在渲染时不会显示出来。

需要注意的是，通过修改visibility属性来隐藏元素并不能阻止JavaScript等脚本对其进行操作或事件对其产生影响。如果需要完全隐藏元素，可以结合使用visibility和display属性，将display设置为none，这样元素就既不可见，也不占据布局空间了。

第二步我们要使用CSS样式创建了一个加载旋转动画

#loading {
          position: fixed;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          z-index: 9999;
        }
        .loader {
          border: 8px solid #f3f3f3; /* 白色边框 */
          border-top: 8px solid #3498db; /* 蓝色顶部边框 */
          border-radius: 50%;
          width: 60px;
          height: 60px;
          animation: spin 2s linear infinite; /* 使用旋转动画 */
        }
        @keyframes spin {
          0% { transform: rotate(0deg); } /* 初始角度为0度 */
          100% { transform: rotate(360deg); } /* 最终角度为360度 */
        }
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.

👉这里用到了关键字：@keyframes 关键贴 和animation 动画

CSS中的关键帧(Keyframe)是用于创建CSS动画的重要概念。关键帧允许您指定在动画过程中元素应该具有的样式。

通过使用@keyframes规则，可以定义一个或多个关键帧，并在其中指定元素应该在不同时间点上的样式。每个关键帧都表示动画过程中的一个特定时间点。

CSS动画(CSS animation)是一种通过在指定的时间内逐渐改变元素的样式来创建动画效果的技术。它可以为网页和应用程序添加生动、吸引人的交互效果，提升用户体验。

注意

@keyframes定义了名为spin的关键帧动画。然后，通过将animation设置为spin，并设置为2s，将动画应用于类名为loader的元素。

🚀第三步我们要使用Jquery库做相应的功能实现

$(document).ready(function() {
      // 在页面加载完成后显示加载动画
      $("#loading").show();
      // 模拟延迟操作(这里使用setTimeout函数)
      setTimeout(function() {
        // 完成加载后隐藏加载动画
        $("#loading").hide();
        //显示内容
        $("#div_One").css('visibility','visible') ;
        // 这里可以添加其他内容或执行其他操作
      }, 3000);
    });
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.

👉在上述代码中，在页面加载完成后使用jQuery的 $(document).ready(function()函数来显示加载动画。之后，可以通过setTimeout函数模拟延迟操作，并在操作完成后隐藏加载动画。你可以根据需要调整延迟时间和添加其他内容或操作。