极客笔记CSS 加载文本动画效果
如今，动画是吸引更多用户使用应用程序最强大的功能，并且它增加了用户探索应用的兴趣。在Web应用中，我们可以使用HTML和CSS创建动画。然而，我们也可以使用JavaScript创建动画，但这会使网站变慢。
在本教程中，我们将学习使用HTML和CSS加载文本动画。在从API获取数据或加载网页时，展示带有动画的加载文本是非常重要的，以使其更加吸引人。
示例1
在下面的示例中，我们创建了“loader”div和其中的“loader-inner”div元素。在CSS中，我们为loader div设置了固定的尺寸，并使用“rotation”关键帧添加了动画。我们设置了3秒的动画时间。
此外，我们为loader-inner div元素设置了rotation-inner关键帧和位置，位于loader div元素内部。
在“rotation”和“rotation-inner”关键帧中，我们将loader从0度旋转到360度。用户可以在输出中观察到带有加载文本的旋转加载器。
<html>
<head>
<style>
.loader {
width: 100px;
height: 100px;
border-radius: 50%;
border: 6px dotted green;
position: relative;
animation: rotation 3s linear infinite;
}
.loader-inner {
position: absolute;
width: 70px;
height: 70px;
border-radius: 50%;
border-block: 6px solid yellow;
top: 10px;
left: 10px;
animation: rotation-inner 3s linear infinite;
}
.loader-text {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
@keyframes rotation {
from { transform: rotate(0deg);}
to { transform: rotate(360deg);}
}
@keyframes rotation-inner {
from { transform: rotate(0deg);}
to {transform: rotate(360deg);}
}
</style>
</head>
<body>
<h2>Creating the <i> Loading text animation using the CSS </i></h2>
<div class = "loader">
<div class = "loader-inner"> </div>
<div class = "loader-text"> Loading </div>
</div>
</body>
</html>
示例2
在下面的示例中，我们创建了一个加载条。在这里，我们创建了一个loader div元素和一个bar div元素。我们在CSS中为loader div元素设置了尺寸，并为bar元素设置了动画。
我们使用’bar-animation’关键帧来进行动画。在’bar-animation’中，我们改变了div元素的宽度，使其看起来像一个加载条。
<html>
<head>
<style>
.container { width: 200px; }
.loader {
width: 200px;
height: 15px;
position: relative;
overflow: hidden;
border: 2px solid blue;
border-radius: 5px;
}
.bar {
width: 0%;
height: 100%;
background-color: green;
animation: bar-animation 5s ease-in-out infinite;
}
span {
font-size: 1.3rem;
display: flex;
justify-content: center;
color: green;
}
@keyframes bar-animation {
0% {width: 0%;}
50% {width: 100%;}
100% {width: 0%;}
}
</style>
</head>
<body>
<h2>Creating the <i> Loading text animation using the CSS. </i> </h2>
<div class = "container">
<div class = "loader">
<div class = "bar"> </div>
</div>
<span> Loading </span>
</div>
</body>
</html>
示例3
在下面的示例中，我们创建了弹跳式的加载文本。在这里，我们将Loading单词的每个字符添加到一个单独的
元素中。然后，我们使用animate关键帧来使所有字符动起来。在animate关键帧中，我们改变字符的垂直位置。
此外，我们使用n-th-child()方法逐个访问所有
元素，并设置动画延迟。在输出中，用户可以观察到弹跳式加载文本。
<html>
<head>
<style>
.char {
font-size: 44px;
color: blue;
display: inline-block;
transition: all 0.9s;
animation: animate 1.5s infinite;
}
.char:nth-child(1) {animation-delay: 0.1s;}
.char:nth-child(2) {animation-delay: 0.3s;}
.char:nth-child(3) {animation-delay: 0.4s;}
.char:nth-child(4) {animation-delay: 0.5s;}
.char:nth-child(5) {animation-delay: 0.6s;}
.char:nth-child(6) {animation-delay: 0.8s;}
.char:nth-child(7) {animation-delay: 0.9s;}
.char:nth-child(8) {animation-delay: 1s;}
.char:nth-child(9) {animation-delay: 1.2s;}
.char:nth-child(10) {animation-delay: 1.4s;}
@keyframes animate {
0% {transform: translateY(0);}
40% {transform: translateY(-20px);}
100% {transform: translateY(0);}
}
</style>
</head>
<body>
<h2>Creating the <i> Loading text animation using the CSS. </i> </h2>
<div class="allLetters">
<div class = "char"> L </div>
<div class = "char"> o </div>
<div class = "char"> a </div>
<div class = "char"> d </div>
<div class = "char"> i </div>
<div class = "char"> n </div>
<div class = "char"> g </div>
<div class = "char"> . </div>
<div class = "char"> . </div>
<div class = "char"> . </div>
</div>
</body>
</html>
示例4
在下面的示例中，我们为加载文本添加了模糊效果。在这里，我们将加载单词中的每个字符都添加在单独的’span’元素中。然后，我们使用’n-th-child()’ CSS方法逐个访问每个span元素来添加动画。在span元素中，我们使用特定的动画延迟添加了’blur-text’动画。
在动画的关键帧中，我们对文本应用了模糊滤镜，以显示加载文本上的运行模糊效果。
<html>
<head>
<style>
span {font-size: 2rem; color: green;}
/* adding blur animation effect on each character of loading text one by one */
span:nth-child(1){animation: blur-text 4s ease-in-out infinite;}
span:nth-child(2){animation: blur-text 4s ease-in-out infinite 0.3s;}
span:nth-child(3){animation: blur-text 4s ease-in-out infinite 0.5s;}
span:nth-child(4){animation: blur-text 4s ease-in-out infinite 0.9s;}
span:nth-child(5){animation: blur-text 4s ease-in-out infinite 1.3s;}
span:nth-child(6){animation: blur-text 4s ease-in-out infinite 1.6s;}
span:nth-child(7){animation: blur-text 4s ease-in-out infinite 2s;}
@keyframes blur-text {
0% {filter: blur(0px);}
50% {filter: blur(4px);}
100% {filter: blur(0px);}
}
</style>
</head>
<body>
<h2>Creating the <i> Loading text animation using the CSS. </i> </h2>
<div class = "allLetters">
<span> L </span>
<span> O </span>
<span> A </span>
<span> D </span>
<span> I </span>
<span> N </span>
<span> G </span>
</div>
</body>
</html>
Users(用户们) learned(在这个教程中学到了) 4(四个) different types of loading animations(不同类型的加载动画). In the first example(在第一个示例中), we created(我们创建了) the rotating(旋转的) loading indicator(加载指示器) with text(带有文字). In the second example(在第二个示例中), we created(我们创建了) the loading bar(加载进度条). Furthermore(此外), in the third example(在第三个示例中), we created(我们创建了) bouncing(弹跳的) loading text(加载文字), and in the final example(在最后一个示例中), we added(我们添加了) a blur effect(模糊效果) to the text(文字).