【css3动画】分享几组手写Loading...加载中...样式

托尼比卡丘

已于 2024-07-29 10:35:25 修改

阅读量699

点赞数 8

分类专栏：前端三剑客网页构造文章标签： css3 前端 css

于 2024-07-24 10:22:02 首次发布

本文链接：https://blog.csdn.net/weixin_44070058/article/details/140654990

版权

前端三剑客网页构造专栏收录该内容

13 篇文章 2 订阅

订阅专栏

在这里插入图片描述

手写Loading…加载中…样式

在网页开发中，加载动画是提升用户体验的重要元素之一。本文将分享三种不同的Loading…加载中…样式，每种样式都具有独特的视觉效果和动画表现。你可以根据自己的项目需求选择合适的样式，或者将它们作为灵感来创建自己的加载动画。

#1

第一组样式使用了简单的文字动画，通过改变文字的透明度来实现加载效果。

.loader {
   font-weight: bold;
   font-family: sans-serif;
   font-size: 30px;
   animation: l1 1s linear infinite alternate;
}
.loader:before {
   content: "Loading...";
}
@keyframes l1 {
   to {
     opacity: 0;
   }
}

HTML结构：

<div class="loader"></div>

#2

第二组样式通过背景渐变动画来实现加载效果，背景渐变从左到右逐渐展开。

.loader {
   width: fit-content;
   font-weight: bold;
   font-family: sans-serif;
   font-size: 30px;
   padding-bottom: 8px;
   background: linear-gradient(currentColor 0 0) 0 100%/0% 3px no-repeat;
   animation: l2 2s linear infinite;
}
.loader:before {
   content: "Loading...";
}
@keyframes l2 {
   to {
     background-size: 100% 3px;
   }
}

HTML结构：

<div class="loader"></div>

#3

第三组样式使用了重复的线性渐变背景，通过改变背景位置来实现加载效果。

.loader {
   width: fit-content;
   font-weight: bold;
   font-family: sans-serif;
   font-size: 30px;
   padding: 0 5px 8px 0;
   background: repeating-linear-gradient(90deg, currentColor 0 8%, #0000 0 10%) 200% 100%/200% 3px no-repeat;
   animation: l3 2s steps(6) infinite;
}
.loader:before {
   content: "Loading...";
}
@keyframes l3 {
   to {
     background-position: 80% 100%;
   }
}

HTML结构：

<div class="loader"></div>

当然，以下是第四和第五组样式，直接添加到你的博文内容中：

#4

第四组样式利用了CSS的clip-path属性来实现文字的逐字显示效果。通过clip-path属性，我们可以控制文字的可见部分，从而创建出逐字显示的动画效果。


.loader {
   width: fit-content;
   font-weight: bold;
   font-family: monospace;
   font-size: 30px;
   clip-path: inset(0 3ch 0 0);
   animation: l4 1s steps(4) infinite;
}
.loader:before {
   content: "Loading...";
}
@keyframes l4 {
   to {
     clip-path: inset(0 -1ch 0 0);
   }
}

HTML结构：

<div class="loader"></div>

#5

第五组样式同样使用了clip-path属性，但这次我们通过改变clip-path的值来实现文字的逐字显示效果。这个动画通过steps函数控制动画的步进，使得文字逐个显示。

.loader {
   width: fit-content;
   font-weight: bold;
   font-family: monospace;
   font-size: 30px;
   clip-path: inset(0 100% 0 0);
   animation: l5 2s steps(11) infinite;
}
.loader:before {
   content: "Loading...";
}
@keyframes l5 {
   to {
     clip-path: inset(0 -1ch 0 0);
   }
}