目录
一、运行效果
图片效果
二、项目概述
三、开发环境
四、实现步骤及代码
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>五、项目总结
这个项目通过使用CSS样式表代码实现了一个花瓣样式的loading加载动画效果，包括背景颜色、容器大小、元素位置和动画等。通过设置不同的动画属性和关键帧，实现了花瓣的旋转效果、进度条的动画效果以及页面的淡入和淡出效果。
六、源码获取
✨还可以关注宫纵号《编程乐学》，菜单栏有很多优质的开源项目以及更多的编程资料等你来学习。
