HTML5+CSS3小实例：花瓣样式Loading加载动画效果
2023-12-20 00:44:12
目录
?一、运行效果
图片效果
二、项目概述
????????这个项目是一个加载动画效果，用于展示一个花瓣样式的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加载动画效果，包括背景颜色、容器大小、元素位置和动画等。通过设置不同的动画属性和关键帧，实现了花瓣的旋转效果、进度条的动画效果以及页面的淡入和淡出效果。
六、源码获取
?????????还可以关注宫纵号《编程乐学》，菜单栏有很多优质的开源项目以及更多的编程资料等你来学习。
文章来源:https://blog.csdn.net/qq_29823791/article/details/135091624
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。 如若内容造成侵权/违法违规/事实不符，请联系我的编程经验分享网邮箱：veading@qq.com进行投诉反馈，一经查实，立即删除！
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。 如若内容造成侵权/违法违规/事实不符，请联系我的编程经验分享网邮箱：veading@qq.com进行投诉反馈，一经查实，立即删除！