HTML5+CSS3小实例：花瓣样式Loading加载动画效果

目录

 一、运行效果

图片效果

二、项目概述

三、开发环境

四、实现步骤及代码

1.创建空文件夹

2.完成页面内容

3.完成css样式       

五、项目总结   

六、源码获取

---

 一、运行效果

图片效果

二、项目概述

        这个项目是一个加载动画效果，用于展示一个花瓣样式的loading效果。整个页面的背景颜色为深蓝色（#161B29），并且居中显示。加载动画的容器使用了一个类名为"container"的div元素，设置了宽度为40vw，高度为40vw，并且居中显示在页面中央。

        加载动画效果由8个类名为"common"的div元素组成，每个div元素都有一个不同的类名，分别是"one"、"two"、"three"、"four"、"five"、"six"、"seven"、"eight"。这些div元素通过设置不同的位置和旋转角度来形成花瓣的样式。每个div元素都有一个动画效果，通过设置animation属性来实现。

        除了花瓣效果，加载动画还包括一个进度条效果。进度条由一个类名为"bar"的div元素和一个类名为"progress"的div元素组成。进度条的背景颜色为粉红色（#E645D0），进度条的颜色为青色（#17E1E6），通过设置左边距的值来实现进度条的动画效果。

        整个页面还包括了淡入和淡出的动画效果。通过设置类名为"fade-in"和"out"的div元素的动画属性，实现了页面在加载时的淡入效果和在加载完毕后的淡出效果。

三、开发环境

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

四、实现步骤及代码

1.创建空文件夹

2.完成页面内容

3.完成css样式       

        用于设置页面的样式。其中包括了背景颜色、容器大小、元素的位置和动画效果等。

        首先是设置了页面的背景颜色为深蓝色（#161B29）。

        接下来是容器的样式设置，设置了容器的宽度和高度为40vw（视口宽度的40%），并将其居中显示。

        然后是各个元素的样式设置，这些元素被称为“common”，共有8个，每个元素都有一个不同的类名（one、two、three...），这些类名用于设置元素的位置和动画效果。每个元素都使用了绝对定位，通过设置left、right、top和bottom属性来控制元素的位置。并设置了元素的旋转角度和阴影效果。

        接下来是进度条的样式设置，包括了进度条的宽度、高度、位置和背景色等。

        最后是动画效果的设置，通过使用@keyframes关键字定义了不同的动画效果，然后通过animation属性将这些动画效果应用到不同的元素上。

五、项目总结   

      这个项目通过使用CSS样式表代码实现了一个花瓣样式的loading加载动画效果，包括背景颜色、容器大小、元素位置和动画等。通过设置不同的动画属性和关键帧，实现了花瓣的旋转效果、进度条的动画效果以及页面的淡入和淡出效果。

六、源码获取

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