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.创建空文件夹

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>公众号《编程乐学》- 花瓣样式Loading加载动画</title></head><body></body></html>

2.完成页面内容

  <div class="out"><div class="fade-in"><div class="container"><div class="one common"></div><div class="two common"></div><div class="three common"></div><div class="four common"></div><div class="five common"></div><div class="six common"></div><div class="seven common"></div><div class="eight common"></div></div><div class="bar"><div class="progress"></div></div></div></div>

3.完成css样式

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

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

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

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

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

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

 <style>@charset "utf-8";body {background: #161B29;margin: 0 auto;height: 100%;width: 100%;}.container {width: 40vw;height: 40vw;left: 0;right: 0;top: 0;bottom: 0;margin: auto;}.common {height: 5vw;max-height: 100%;overflow: auto;width: 2vw;margin: auto;max-width: 100%;position: absolute;border-radius: 0vw 10vw 0vw 10vw;box-shadow: inset 0vw 0vw 0vw .1vw #E645D0, 0vw 0vw 1.5vw 0vw #E645D0;}.one {transform: rotate(45deg);left: 0;right: 0;top: 0;bottom: 7.5vw;}.two {transform: rotate(90deg);left: 5.5vw;right: 0;top: 0;bottom: 5.5vw;}.three {transform: rotate(135deg);left: 7.5vw;right: 0;top: 0;bottom: 0;}.four {transform: rotate(180deg);left: 5.5vw;right: 0;top: 5.5vw;bottom: 0;}.five {transform: rotate(225deg);left: 0;right: 0;top: 7.5vw;bottom: 0;}.six {transform: rotate(270deg);left: 0;right: 5.5vw;top: 5.5vw;bottom: 0;}.seven {transform: rotate(315deg);left: 0;right: 7.5vw;top: 0;bottom: 0;}.eight {transform: rotate(360deg);left: 0;right: 5.5vw;top: 0;bottom: 5.5vw;}.bar {width: 12vw;height: .25vw;left: 0;right: 0;top: 16vw;bottom: 0;margin: auto;overflow: hidden;background: #E645D0;}.progress {width: 12vw;height: .5vw;left: 0;right: 0;top: 0;bottom: 0;margin: auto;overflow: hidden;background: #17E1E6;}.one {animation: one 1s ease infinite;-moz-animation: one 1s ease infinite;/* Firefox */-webkit-animation: one 1s ease infinite;/* Safari and Chrome */-o-animation: one 1s ease infinite;/* Opera */}@keyframes one {0%,100% {}50% {box-shadow: inset 0vw 0vw 0vw .1vw #17E1E6, 0vw 0vw 1.5vw 0vw #17E1E6;}}.two {animation: two 1s .125s ease infinite;-moz-animation: two 1s .125s ease infinite;/* Firefox */-webkit-animation: two 1s .125s ease infinite;/* Safari and Chrome */-o-animation: two 1s .125s ease infinite;/* Opera */}@keyframes two {0%,100% {}50% {box-shadow: inset 0vw 0vw 0vw .1vw #17E1E6, 0vw 0vw 1.5vw 0vw #17E1E6;}}.three {animation: three 1s .25s ease infinite;-moz-animation: three 1s .25s ease infinite;/* Firefox */-webkit-animation: three 1s .25s ease infinite;/* Safari and Chrome */-o-animation: three 1s .25s ease infinite;/* Opera */}@keyframes three {0%,100% {}50% {box-shadow: inset 0vw 0vw 0vw .1vw #17E1E6, 0vw 0vw 1.5vw 0vw #17E1E6;}}.four {animation: four 1s .375s ease infinite;-moz-animation: four 1s .375s ease infinite;/* Firefox */-webkit-animation: four 1s .375s ease infinite;/* Safari and Chrome */-o-animation: four 1s .375s ease infinite;/* Opera */}.five {animation: five 1s .5s ease infinite;-moz-animation: five 1s .5s ease infinite;/* Firefox */-webkit-animation: five 1s .5s ease infinite;/* Safari and Chrome */-o-animation: five 1s .5s ease infinite;/* Opera */}@keyframes five {0%,100% {}50% {box-shadow: inset 0vw 0vw 0vw .1vw #17E1E6, 0vw 0vw 1.5vw 0vw #17E1E6;}}.six {animation: six 1s .625s ease infinite;-moz-animation: six 1s .625s ease infinite;/* Firefox */-webkit-animation: six 1s .625s ease infinite;/* Safari and Chrome */-o-animation: six 1s .625s ease infinite;/* Opera */}@keyframes six {0%,100% {}50% {box-shadow: inset 0vw 0vw 0vw .1vw #17E1E6, 0vw 0vw 1.5vw 0vw #17E1E6;}}.seven {animation: seven 1s .750s ease infinite;-moz-animation: seven 1s .750s ease infinite;/* Firefox */-webkit-animation: seven 1s .750s ease infinite;/* Safari and Chrome */-o-animation: seven 1s .750s ease infinite;/* Opera */}.eight {animation: eight 1s .875s ease infinite;-moz-animation: eight 1s .875s ease infinite;/* Firefox */-webkit-animation: eight 1s .875s ease infinite;/* Safari and Chrome */-o-animation: eight 1s .875s ease infinite;/* Opera */}@keyframes eight {0%,100% {}50% {box-shadow: inset 0vw 0vw 0vw .1vw #17E1E6, 0vw 0vw 1.5vw 0vw #17E1E6;}}.progress {animation: progress 15s ease;-moz-animation: progress 15s ease;/* Firefox */-webkit-animation: progress 15s ease;/* Safari and Chrome */-o-animation: progress 15s ease;/* Opera */}.fade-in {animation: fade-in 2s ease;-moz-animation: fade-in 2s ease;/* Firefox */-webkit-animation: fade-in 2s ease;/* Safari and Chrome */-o-animation: fade-in 2s ease;/* Opera */}@keyframes fade-in {from {opacity: 0;}to {opacity: 1;}}</style>