HTML5+CSS3小实例：滚动的方块loading动画

目录

 一、运行效果

图片效果

二、项目概述

三、开发环境

四、实现步骤及代码

1.创建空文件夹

2.完成页面内容

3.完成css样式        

五、项目总结  

六、源码获取

---

 一、运行效果

图片效果

二、项目概述

       本项目是一个滚动的方块loading动画，使用HTML和CSS代码实现。通过使用CSS的动画和转换属性，实现了方块的旋转和文字的移动效果，给用户展示一个正在加载中的提示。

三、开发环境

开发环境：VsCode
编程语言：HTML5+CSS3
操作系统：Windows

四、实现步骤及代码

1.创建空文件夹

2.完成页面内容

 

        

        

            
拼命加载中...
        
    

3.完成css样式        

        这段代码是一个用于创建加载动画的HTML和CSS代码。它使用了一些CSS属性和动画效果来实现一个旋转的方形加载器。

        在CSS部分，代码首先对所有元素进行了初始化，然后将body元素设置为100%窗口高度，并使用弹性布局将其水平和垂直居中。背景颜色设置为黑色。

接下来，定义了一个名为"loader"的类，用于包含加载器的所有元素。该类具有相对定位。

        其中，名为"square"的子元素表示方形，宽度和高度均为200px。它使用了自定义属性--c来设置背景颜色，并通过box-shadow属性添加了外发光效果。transform-origin属性用于设置旋转元素的基点位置。最后，通过animation属性应用名为"roll"的动画，使方形元素以线性方式无限次播放旋转动画。

        为了创建遮罩效果，使用了名为"square::before"的伪元素，它具有绝对定位，居中于方形元素内部。设置了背景色为黑色，并通过box-shadow属性添加了内发光效果。

        最后，使用名为"text"的子元素来显示加载文本。它具有绝对定位，宽度和高度为300px和40px，并使用overflow属性隐藏溢出的内容。

五、项目总结  

        在本项目中，我使用了HTML和CSS来创建一个滚动的方块loading动画。通过设置方块的宽度、高度和颜色，以及添加阴影效果，实现了一个具有立体感的方块。通过设置方块的动画属性，使其在1秒内沿着X轴向左移动并顺时针旋转90度，实现了方块的滚动效果。同时，我还使用了伪元素和内发光效果，创建了一个黑色遮罩，并在遮罩上添加了与方块相同的阴影效果，增加了整体的立体感。

        另外，我还使用了文字的动画效果，通过设置文字的位置和动画属性，使其在3.5秒内从右侧移动到左侧，实现了文字的滚动效果。为了增加文字的可读性和吸引用户的注意力，我还对文字添加了发光效果。

六、源码获取

        ✨还可以关注宫纵号《编程乐学》，菜单栏有很多优质的开源项目以及更多的编程资料等你来学习。