如何使用 CSS 设计淡入淡出加载动画?
淡入淡出加载动画是一种流行且极具吸引力的视觉效果，用于吸引网站用户。它是一种简单的动画，通过淡入淡出球体来创建引人注目的加载效果。
什么是 CSS 中的淡入淡出加载动画?
淡入淡出加载动画是一种加载动画，其中一系列圆圈或球体循环淡入淡出。它表示网页内容正在加载。这种动画类型通常用于网页设计中，让用户在等待内容加载时保持参与并了解内容。
该动画主要使用 CSS 关键帧动画和伪元素来创建圆圈或球体。这些球被设置为以不同的间隔淡入淡出，以创建视觉上有趣的动画效果。
使用 CSS 设计淡入淡出球加载动画的步骤
使用 CSS 设计淡入淡出球加载动画非常简单;它包括创建 HTML 结构，然后使用 CSS 关键帧动画和伪元素来创建动画效果。在这里，我们将学习使用 CSS 设计淡入淡出球加载动画的以下步骤。
步骤 1:创建 HTML 标记
要设计淡入淡出球加载动画，首先，我们需要创建一个 HTML 结构。这可以通过使用一个简单的 div 容器来实现，该容器带有一个用于在 CSS 中设置动画样式的类名。例如 -
<div class="my-loader"></div>
步骤 2:定义 CSS 样式
在此步骤中，我们将定义淡入淡出球加载动画的 CSS 样式。您可以使用关键帧定义动画，然后使用 animation 属性将动画应用于 div 容器。例如 -
.my-loader {
position: relative;
width: 40px;
height: 40px;
margin: 0 auto;
}
@keyframes fade {
0% {
opacity: 0;
transform: scale(0.3);
}
50% {
opacity: 1;
}
100% {
opacity: 0;
transform: scale(1.5);
}
}
步骤 3:添加球
要创建淡入淡出球加载动画，我们需要添加球。这可以通过使用伪元素来实现。我们将使用 before 和 after 伪元素创建球，并应用所需的样式来创建淡入淡出效果。例如 -
.fade-balls-loader:before,
.fade-balls-loader:after {
content: "";
position: absolute;
top: 0;
left: 0;
margin: auto;
width: 40px;
height: 40px;
border-radius: 50%;
background-color: red;
}
步骤 4:微调动画
添加球后，我们通过调整时间、持续时间和缓动来微调动画。这可以通过调整 animation-timing 函数、animation-duration 和 animation-delay 属性来实现。例如 -
.fade-balls-loader:before,
.fade-balls-loader:after{
animation: fade 1.5s ease-in-out infinite;
}
.fade-balls-loader:before {
animation-delay: 0.6s;
}
示例 1
使用单个球的淡入淡出球加载器动画。
<!DOCTYPE html>
<html>
<head>
<style>
body{
text-align:center;
}
.my-loader {
position: relative;
margin:auto;
width: 40px;
height: 40px;
}
.my-loader:before,
.my-loader:after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 40px;
height: 40px;
border-radius: 50%;
background-color: red;
animation: fade 1.5s ease-in-out infinite;
}
.my-loader:before {
animation-delay: 0.6s;
}
@keyframes fade {
0% {
opacity: 0;
transform: scale(0.3);
}
50% {
opacity: 1;
}
100% {
opacity: 0;
transform: scale(1.5);
}
}
</style>
</head>
<body>
<h3>Fade Ball Loader Animation with Single Ball</h3>
<div class="my-loader"></div>
</body>
</html>
在上面的示例中，我们创建了一个简单的 HTML 标记，其中包含一个带有 my-loader 类的 div 元素。然后，我们定义了容器元素的 CSS 样式，以及 :before 和 :after 伪元素。之后，我们使用 animation 属性将淡入淡出动画应用于小球，并使用 animation-delay 属性设置第一个小球的延迟时间。最后，我们使用 @keyframes 规则定义了淡入淡出动画。
示例 2
三个小球的淡入淡出加载动画。
<!DOCTYPE html>
<html>
<head>
<style>
body{
text-align:center;
}
.my-loader {
display: flex;
justify-content: center;
align-items: center;
height: 100px;
}
.ball {
width: 36px;
height: 36px;
margin: 0 4px;
border-radius: 50%;
opacity: 0;
animation: fade 1.5s ease-in-out infinite;
}
.ball-1 {
background-color: #00bfff;
animation-delay: 0.3s;
}
.ball-2 {
background-color: #ff7f50;
animation-delay: 0.6s;
}
.ball-3 {
background-color: #7fff00;
animation-delay: 0.9s;
}
@keyframes fade {
0% {
opacity: 0;
transform: scale(0.1);
}
50% {
opacity: 1;
}
100% {
opacity: 0;
transform: scale(1.2);
}
}
</style>
</head>
<body>
<h3>Fade Ball Loader Animation with Three Balls</h3>
<div class="my-loader">
<div class="ball ball-1"></div>
<div class="ball ball-2"></div>
<div class="ball ball-3"></div>
</div>
</body>
</html>
在上面的例子中，我们创建了一个简单的 HTML 标记，其中包含四个 div 元素，每个 div 元素的类名为 ball、ball-1、ball-2 和 ball-3。我们使用 display 属性将容器元素设置为弹性框，并将球居中对齐。我们还设置了 height 和 background-color 属性来为加载动画创建背景。
结论
使用 CSS 设计淡入淡出的小球加载动画是一种简单有效的方法，可以增加网站的视觉趣味和吸引力。通过简单的步骤，我们可以创建一个独特且引人入胜的加载动画，让网站用户保持愉悦的心情并保持参与度。
相关文章
有用资源
css 参考教程 - 该教程包含有关 css 的更多信息:https://www.cainiaomax.com/css/
