如今，动画是应用程序中吸引更多用户最有力的功能，它增加了用户探索应用程序的兴趣。在 Web 应用程序中，我们可以使用 HTML 和 CSS 创建动画。然而，我们可以使用 JavaScript 创建动画，但这会使网站变慢。
在本教程中，我们将学习使用 HTML 和 CSS 加载文本动画。在从 API 获取数据或加载网页时，用动画显示加载文本非常重要，以使其更具吸引力。
示例 1
在下面的示例中，我们在其中创建了“loader”div 和“loader-inner”div 元素。在 CSS 中，我们为加载器 div 设置固定尺寸，并使用“旋转”关键帧添加动画。我们设置 3 秒的动画时间。
此外，我们还为 loader-inner div 元素和 loader div 元素内的位置设置了内部旋转关键帧。
在“旋转”和“内部旋转”关键帧中，我们将加载器从 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 单词的每个字符添加到单独的 div 元素中。之后，我们使用“动画”关键帧来为所有角色制作动画。在“动画”关键帧中，我们更改角色的垂直位置。
此外，我们还使用了“n-th-child()”方法来一一访问所有 div 元素并设置动画延迟。在输出中，用户可以观察弹跳的加载文本。
<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 元素中，我们添加了具有特定动画延迟量的“模糊文本”动画。
在动画关键帧中，我们对文本应用模糊滤镜，以在加载文本上显示运行模糊效果。
<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>
用户在本教程中学习了 4 种不同类型的加载动画。在第一个示例中，我们创建了带有文本的旋转加载指示器。在第二个示例中，我们创建了加载栏。此外，在第三个示例中，我们创建了弹跳加载文本，在最后一个示例中，我们为文本添加了模糊效果。
以上就是使用 CSS 加载文本动画效果的详细内容，更多请关注双恒网络其它相关文章！
1. 本站所有资源来源于用户上传和网络，如有侵权请邮件联系站长！
2. 分享目的仅供大家学习和交流，您必须在下载后24小时内删除！
3. 不得使用于非法商业用途，不得违反国家法律。否则后果自负！
4. 本站提供的源码、模板、插件等等其他资源，都不包含技术服务请大家谅解！
5. 如有链接无法下载、失效或广告，请联系管理员处理！
6. 本站资源售价只是赞助，收取费用仅维持本站的日常运营所需！
7. 如遇到加密压缩包，请使用WINRAR解压,如遇到无法解压的请联系管理员！
8. 精力有限，不少源码未能详细测试（解密），不能分辨部分源码是病毒还是误报，所以没有进行任何修改，大家使用前请进行甄别
9.本站默认解压密码为:www.sudo1.com
本站提供的一切软件、教程和内容信息仅限用于学习和研究目的。
不得将上述内容用于商业或者非法用途，否则，一切后果请用户自负。
本站信息来自网络收集整理，版权争议与本站无关。您必须在下载后的24个小时之内，从您的电脑或手机中彻底删除上述内容。
如果您喜欢该程序和内容，请支持正版，购买注册，得到更好的正版服务。
我们非常重视版权问题，如有侵权请邮件与我们联系处理。敬请谅解！
云资源网 » 使用 CSS 加载文本动画效果
2. 分享目的仅供大家学习和交流，您必须在下载后24小时内删除！
3. 不得使用于非法商业用途，不得违反国家法律。否则后果自负！
4. 本站提供的源码、模板、插件等等其他资源，都不包含技术服务请大家谅解！
5. 如有链接无法下载、失效或广告，请联系管理员处理！
6. 本站资源售价只是赞助，收取费用仅维持本站的日常运营所需！
7. 如遇到加密压缩包，请使用WINRAR解压,如遇到无法解压的请联系管理员！
8. 精力有限，不少源码未能详细测试（解密），不能分辨部分源码是病毒还是误报，所以没有进行任何修改，大家使用前请进行甄别
9.本站默认解压密码为:www.sudo1.com
本站提供的一切软件、教程和内容信息仅限用于学习和研究目的。
不得将上述内容用于商业或者非法用途，否则，一切后果请用户自负。
本站信息来自网络收集整理，版权争议与本站无关。您必须在下载后的24个小时之内，从您的电脑或手机中彻底删除上述内容。
如果您喜欢该程序和内容，请支持正版，购买注册，得到更好的正版服务。
我们非常重视版权问题，如有侵权请邮件与我们联系处理。敬请谅解！
云资源网 » 使用 CSS 加载文本动画效果
常见问题FAQ
- 免费下载或者VIP会员专享资源能否直接商用？
- 本站所有资源版权均属于原作者所有，这里所提供资源均只能用于参考学习用，请勿直接商用。若由于商用引起版权纠纷，一切责任均由使用者承担。更多说明请参考 VIP介绍。
- 提示下载完但解压或打开不了？
- 你们有qq群吗怎么加入？
