这段代码是一个使用纯CSS3实现的花瓣样式的Loading加载动画。它包括八个旋转的花瓣和一个进度条，整体效果流畅且美观。
整体结构如下：
- HTML部分:
- 使用一个
<div>元素作为整个加载动画的容器，类名为out。 - 在
out内部有一个fade-in类的<div>用于淡入效果。 fade-in内部有两个主要部分：一个是包含八个花瓣的container，另一个是进度条bar。
- CSS部分:
- 设置了全局样式，背景颜色为深色（#161B29），并且去掉了默认的边距和设置了全屏显示。
- 定义了
.common类，这是所有花瓣的基本样式，包括尺寸、位置、圆角和阴影效果。 - 每个花瓣都有一个独特的旋转角度，并通过不同的
left,right,top,bottom值来定位。 - 为每个花瓣定义了动画，使用
@keyframes规则控制花瓣的颜色变化和阴影效果，形成动态视觉效果。 container本身也有一个旋转动画，使整个花瓣组不断旋转。- 进度条由两个部分组成：外层
bar和内层progress。bar固定在中间，而progress则从左侧移动到右侧，模拟加载过程。 - 使用
@keyframes progress来定义进度条的移动动画，使其从屏幕外逐渐移入并覆盖整个bar。 fade-in和out分别控制加载动画的淡入和淡出效果，使得加载动画更加平滑。
这个加载动画通过纯CSS实现了复杂的视觉效果，不需要JavaScript的支持，适用于前端项目。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>纯CSS3花瓣样式的Loading加载动画</title>
<style>
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;
position: relative;
}
.common {
height: 5vw;
max-height: 100%;
overflow: auto;
width: 2vw;
margin: auto;
max-width: 100%;
position: absolute;
background-color: transparent;
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;
position: absolute;
}
.progress {
width: 12vw;
height: .5vw;
left: -24vw;
top: 0;
bottom: 0;
margin: auto;
overflow: hidden;
background: #17E1E6;
position: absolute;
}
.one {
animation: one 1s ease infinite;
}
@keyframes one {
0%, 100% {}
50% {
background: transparent;
box-shadow: inset 0vw 0vw 0vw .1vw #17E1E6, 0vw 0vw 1.5vw 0vw #17E1E6;
}
}
.two {
animation: two 1s .125s ease infinite;
}
@keyframes two {
0%, 100% {}
50% {
background: transparent;
box-shadow: inset 0vw 0vw 0vw .1vw #17E1E6, 0vw 0vw 1.5vw 0vw #17E1E6;
}
}
.three {
animation: three 1s .25s ease infinite;
}
@keyframes three {
0%, 100% {}
50% {
background: transparent;
box-shadow: inset 0vw 0vw 0vw .1vw #17E1E6, 0vw 0vw 1.5vw 0vw #17E1E6;
}
}
.four {
animation: four 1s .375s ease infinite;
}
@keyframes four {
0%, 100% {}
50% {
background: transparent;
box-shadow: inset 0vw 0vw 0vw .1vw #17E1E6, 0vw 0vw 1.5vw 0vw #17E1E6;
}
}
.five {
animation: five 1s .5s ease infinite;
}
@keyframes five {
0%, 100% {}
50% {
background: transparent;
box-shadow: inset 0vw 0vw 0vw .1vw #17E1E6, 0vw 0vw 1.5vw 0vw #17E1E6;
}
}
.six {
animation: six 1s .625s ease infinite;
}
@keyframes six {
0%, 100% {}
50% {
background: transparent;
box-shadow: inset 0vw 0vw 0vw .1vw #17E1E6, 0vw 0vw 1.5vw 0vw #17E1E6;
}
}
.seven {
animation: seven 1s .750s ease infinite;
}
@keyframes seven {
0%, 100% {}
50% {
background: transparent;
box-shadow: inset 0vw 0vw 0vw .1vw #17E1E6, 0vw 0vw 1.5vw 0vw #17E1E6;
}
}
.eight {
animation: eight 1s .875s ease infinite;
}
@keyframes eight {
0%, 100% {}
50% {
background: transparent;
box-shadow: inset 0vw 0vw 0vw .1vw #17E1E6, 0vw 0vw 1.5vw 0vw #17E1E6;
}
}
.container {
animation: container 5s linear infinite;
}
@keyframes container {
from {
transform: rotate(0deg);
}
to {
transform: rotate(-360deg);
}
}
.progress {
animation: progress 15s ease forwards;
}
@keyframes progress {
0% {
left: -24vw;
}
10% {
left: -20vw;
}
30% {
left: -16vw;
}
50% {
left: -12vw;
}
65% {
left: -10vw;
}
80% {
left: -4vw;
}
100% {
left: 0;
}
}
.fade-in {
animation: fade-in 2s ease;
}
@keyframes fade-in {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.out {
animation: out 2s 15s ease forwards;
}
@keyframes out {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
</style>
</head>
<body>
<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>
</body>
</html>
No responses yet