【css3动画】分享几组手写Loading...加载中...样式
托尼比卡丘 2024-09-01 12:03:01 阅读 79
手写Loading…加载中…样式
在网页开发中，加载动画是提升用户体验的重要元素之一。本文将分享三种不同的Loading…加载中…样式，每种样式都具有独特的视觉效果和动画表现。你可以根据自己的项目需求选择合适的样式，或者将它们作为灵感来创建自己的加载动画。
#1
第一组样式使用了简单的文字动画，通过改变文字的透明度来实现加载效果。
<code>.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>code>
#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>code>
#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>code>
当然，以下是第四和第五组样式，直接添加到你的博文内容中：
#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>code>
#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);
}
}
HTML结构：
<div class="loader"></div>code>
以上就是几种不同的Loading…加载中…样式。每种样式都有其独特的动画效果和实现方式，你可以根据自己的喜好和项目需求进行选择和调整。希望这些样式能够帮助你提升网页的用户体验。如果你有任何问题或建议，欢迎在评论区留言讨论。
24/7/29
链接分享：
https://loading.io/
https://css-loaders.com/
声明
本文内容仅代表作者观点，或转载于其他网站，本站不以此文作为商业用途
如有涉及侵权，请联系本站进行删除
转载本站原创文章，请注明来源及作者。