AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

请务必收下这10+个加载特效，保证让你的项目大放异彩⭐（五）

2022-04-25 193
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 请务必收下这10+个加载特效，保证让你的项目大放异彩⭐（五）

☀️ 前言

相信大家经常会使用到加载动画，但是大部分组件库的加载样式都太简洁了👻。

这次给前端工友们收集了10+个高逼格加载动画效果！！复制就能直接用！！😎

⛷️ 来吧展示


1、一个"胶粘"加载

每个圆进行粘合拆分形成了一个胶粘效果

<!-- loading.html -->
<div class="loading">
</div>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <defs>
    <filter id="goo">
      <feGaussianBlur in="SourceGraphic" stdDeviation="6.3" result="blur" />
      <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 14 -4" result="goo" />
      <feBlend in="SourceGraphic" in2="goo" />
    </filter>
  </defs>
</svg>
复制代码
/* loading.css */
.loading {
  width: 166px;
  height: 166px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  -webkit-filter: url("#goo");
  filter: url("#goo");
}
.loading span {
  width: 100%;
  text-align: center;
  color: #e04960;
  font-weight: bold;
  text-transform: uppercase;
  font-size: 15px;
  letter-spacing: 1px;
  position: absolute;
  left: 1px;
  top: 46%;
}
.loading:before, .loading:after {
  content: '';
  border-radius: 50%;
  background-color: #e04960;
  width: 26px;
  height: 26px;
  position: absolute;
  left: 72px;
  top: 8px;
  animation: rotate 6s linear;
  animation-iteration-count: infinite;
  transform-origin: 12px 76px;
}
.loading:before {
  box-shadow: 45px 19px 0px 0px #e04960, 62px 63px 0px 0px #e04960, 45px 107px 0px 0px #e04960, 0px 126px 0px 0px #e04960, -46px 107px 0px 0px #e04960, -63px 63px 0px 0px #e04960, -46px 19px 0px 0px #e04960;
}
.loading:after {
  animation-direction: reverse;
}
@keyframes rotate {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(-360deg); }
}

Author：Dicson


2、一个"方块对对碰"加载

巧妙的运用位移也能做出碰撞挤出的效果

<!-- loading.html -->
<div class="loading">
  <div class="loading-square"></div>
  <div class="loading-square"></div>
  <div class="loading-square"></div>
  <div class="loading-square"></div>
</div>
/* loading.css */
.loader {
  display: block;
  position: relative;
  height: 20px;
  width: 86px;
}
.loading-square {
  position: absolute;
  height: 20px;
  width: 20px;
  top: 0;
}
.loading-square:nth-child(1) {
  left: 0;
  animation: square1 1.5s linear forwards infinite;
}
.loading-square:nth-child(2) {
  left: 22px;
  animation: square2 1.5s linear forwards infinite;
}
.loading-square:nth-child(3) {
  left: 44px;
  animation: square3 1.5s linear forwards infinite;
}
.loading-square:nth-child(4) {
  left: 66px;
  animation: square4 1.5s linear forwards infinite;
}
@keyframes square1 {
  0% {
    background-color: #97c900;
    transform: translate(0, 0);
  }
  9.09091% {
    transform: translate(0, calc(-100% - 2px));
    background-color: #97c900;
  }
  18.18182% {
    transform: translate(calc(100% + 2px), calc(-100% - 2px));
    background-color: #15668a;
  }
  27.27273% {
    transform: translate(calc(100% + 2px), 0);
  }
  100% {
    background-color: #15668a;
    transform: translate(calc(100% + 2px), 0);
  }
}
@keyframes square2 {
  0% {
    background-color: #15668a;
    transform: translate(0, 0);
  }
  18.18182% {
    transform: translate(0, 0);
  }
  27.27273% {
    transform: translate(0, calc(100% + 2px));
    background-color: #15668a;
  }
  36.36364% {
    transform: translate(calc(100% + 2px), calc(100% + 2px));
    background-color: #D53A33;
  }
  45.45455% {
    transform: translate(calc(100% + 2px), 0);
  }
  100% {
    background-color: #D53A33;
    transform: translate(calc(100% + 2px), 0);
  }
}
@keyframes square3 {
  0% {
    background-color: #D53A33;
    transform: translate(0, 0);
  }
  36.36364% {
    transform: translate(0, 0);
  }
  45.45455% {
    transform: translate(0, calc(-100% - 2px));
    background-color: #D53A33;
  }
  54.54545% {
    transform: translate(calc(100% + 2px), calc(-100% - 2px));
    background-color: #E79C10;
  }
  63.63636% {
    transform: translate(calc(100% + 2px), 0);
  }
  100% {
    background-color: #E79C10;
    transform: translate(calc(100% + 2px), 0);
  }
}
@keyframes square4 {
  0% {
    transform: translate(0, 0);
    background-color: #E79C10;
  }
  54.54545% {
    transform: translate(0, 0);
  }
  63.63636% {
    transform: translate(0, calc(100% + 2px));
    background-color: #E79C10;
  }
  72.72727% {
    background-color: #D53A33;
  }
  81.81818% {
    background-color: #15668a;
  }
  90.90909% {
    transform: translate(calc(-300% - 6px), calc(100% + 2px));
    background-color: #97c900;
  }
  100% {
    transform: translate(calc(-300% - 6px), 0);
    background-color: #97c900;
  }
}

Author：Paul Grant


3、一个"Switch"加载

有Switch的同学应该很熟悉了，这就是eshop里面的加载

<!-- loading.html -->
<div class="load">
  <div class="loading">
    <div class="loader__bar"></div>
    <div class="loader__bar loader__bar--delay-1"></div>
    <div class="loader__bar loader__bar--delay-2"></div>
    <div class="loader__bar loader__bar--delay-3"></div>
    <div class="loader__bar loader__bar--delay-4"></div>
    <div class="loader__bar loader__bar--delay-5"></div>
    <div>
  </div>
</div>
/* loading.css */
.load{
  width: 400px;
  height: 170px;
}
@keyframes loader {
  0%{
    background: #FF8919;
    width:0%;
  }20%{
    width:100%;
  }39%{
    background: #FF8919;
  }40%{
    background: #FFA54F;
    width: 0%
  }60%{
    width: 100%;
  }80%{
    width:0%;
  }100%{
    background: #FFA54F;
    width: 0%;
  }
}
@keyframes loaderAlt {
  0%{
    background: #FF7C00;
    width:100%;
  }19%{
    background: #FF7C00;
  }20%{
    background: #FF9834;
    width: 0%;
  }40%{
    width: 100%;
  }59%{
    background: #FF9834;
  }60%{
    background: #FF7C00;
    width: 0;
  }80%{
    width: 100%;
  }100%{
    background: #FF7C00;
    width: 100%
  }
}
.loading{
  display: flex;
  flex-direction: column;
  height: 100%;
  position: relative;
  width: 100%;
}
.loader__bar{
  display: flex;
  flex: 1;
  position: relative;
  width: 100%;
}
.loader__bar:before{
  animation: loader ease 8s infinite;
  animation-delay: 100ms;
  background: #FF7C00;
  background-size: 200% 200%;
  content: "";
  height:100%;
  width: 0%;
}
.loader__bar:after{
  animation: loaderAlt ease 8s infinite;
  animation-delay: 100ms;
  background: #FF7C00;
  background-size: 200% 200%;
  content: "";
  height: 100%;
  width: 100%;
}
.loader__bar--delay-1:before,
.loader__bar--delay-1:after{
  animation-delay: 200ms;
}
.loader__bar--delay-2:before,
.loader__bar--delay-2:after{
  animation-delay: 300ms;
}
.loader__bar--delay-3:before,
.loader__bar--delay-3:after{
  animation-delay: 400ms;
}
.loader__bar--delay-4:before,
.loader__bar--delay-4:after{
  animation-delay: 500ms;
}
.loader__bar--delay-5:before,
.loader__bar--delay-5:after{
  animation-delay: 600ms;
}

Author：Steve Meredith


👋 写在最后

  • 首先还是很感谢大家看到这里，这次的文章就分享到这里，如果有需要可以直接复制使用哟~
  • 如果您觉得这篇文章有帮助到您的的话不妨🍉关注+点赞+收藏+评论+转发🍉支持一下哟~~😛您的支持就是我更新的最大动力。


文章标签：
前端开发
快跑啊小卢_
目录
相关文章
开发V_I357O98O7I8
|
存储 前端开发 JavaScript
潮玩宇宙大逃杀无聊猿卷轴模式系统开发详细规则丨步骤需求丨方案项目丨技术架构丨源码功能
确定游戏类型和规则：明确无聊猿卷轴模式游戏类型和游戏规则，包括敌人类型、地图设计、任务类型、战斗机制等。
开发V_I357O98O7I8
215 0
土木林森
|
3月前
|
JSON JavaScript 前端开发
震惊！JS如何悄无声息追踪你的每一步？揭秘页面访问与关闭的超级上报大法，让数据说话，优化体验不再难！
【8月更文挑战第4天】在Web开发中，跟踪用户行为对提升体验与留存至关重要。本文以在线学习平台为例，介绍如何用JavaScript监听页面访问及关闭，并上报数据。通过`window.onload`监测页面加载，记录用户访问；利用`navigator.sendBeacon`在用户离开时发送少量数据至服务器，无需担心请求失败。需注意隐私合规、性能影响及浏览器兼容性。此技术有助于深入理解用户行为，为产品迭代提供依据。
土木林森
131 8
jjczqyjxgdegi
|
5月前
|
移动开发 前端开发 安全
技术心得记录：怎么更快地合成大西瓜？搞懂游戏的源码，闭着眼睛都能成功！
技术心得记录：怎么更快地合成大西瓜？搞懂游戏的源码，闭着眼睛都能成功！
jjczqyjxgdegi
78 0
风水道人
|
6月前
|
监控 Linux Windows
装备神器edex-ui别人以为我很屌其实我只会if和else搬运代码
装备神器edex-ui别人以为我很屌其实我只会if和else搬运代码
风水道人
69 1
豆约翰
|
Java 计算机视觉
手把手一步一步教你使用Java开发一个大型街机动作闯关类游戏04图像资源的透明处理
手把手一步一步教你使用Java开发一个大型街机动作闯关类游戏04图像资源的透明处理
豆约翰
120 0
技术小达人
|
存储 传感器 编解码
设计全新动作捕捉，构建水下3D系统，《阿凡达2》的特效背后藏了哪些秘密？
上映一周，票房破5亿。 暌违13年，詹姆斯·卡梅隆终于带来了《阿凡达2：水之道》。
技术小达人
1687 0
设计全新动作捕捉，构建水下3D系统，《阿凡达2》的特效背后藏了哪些秘密？
TiAmoZhang
|
机器学习/深度学习 存储 人工智能
程序员饭碗不保了？GPT-3 最强应用发布，动动手指就自动写代码的神器来了！...
程序员饭碗不保了？GPT-3 最强应用发布，动动手指就自动写代码的神器来了！...
TiAmoZhang
1877 0
程序员饭碗不保了？GPT-3 最强应用发布，动动手指就自动写代码的神器来了！...
快跑啊小卢_
|
前端开发
请务必收下这10+个加载特效，保证让你的项目大放异彩⭐（一）
请务必收下这10+个加载特效，保证让你的项目大放异彩⭐（一）
快跑啊小卢_
180 0
快跑啊小卢_
|
前端开发
请务必收下这10+个加载特效，保证让你的项目大放异彩⭐（四）
请务必收下这10+个加载特效，保证让你的项目大放异彩⭐（四）
快跑啊小卢_
148 0
快跑啊小卢_
|
前端开发
请务必收下这10+个加载特效，保证让你的项目大放异彩⭐（二）
请务必收下这10+个加载特效，保证让你的项目大放异彩⭐（二）
快跑啊小卢_
121 0

热门文章

最新文章

  • 1
    helloworld
  • 2
    6.2. Apt-Get
  • 3
    Oracle 11g RAC ASM 错误之(1)
  • 4
    7-1 网络编程技术(下)-2
  • 5
    SANYUKI：净化空气，顺便美颜？
  • 6
    人工智能项目正在起飞：这对未来的工作意味着什么？
  • 7
    核心开发者宣称比特币失败 清货离场
  • 8
    重启数据库的一场闹剧
  • 9
    iconv vs mb_convert_encoding
  • 10
    poj 1247 Magnificent Meatballs
  • 1
    文档智能与检索增强生成结合的LLM知识库方案测评：优势与改进空间
    23
  • 2
    文档智能与检索增强生成结合的LLM知识库方案测评：优势与改进空间
    18
  • 3
    AICG：认识你，真好
    23
  • 4
    自建内网穿透服务器
    29
  • 5
    SpringBoot使用mysql查询昨天、今天、过去一周、过去半年、过去一年数据
    25
  • 6
    PHP中的异常处理与最佳实践####
    18
  • 7
    探索人工智能与大数据的融合之美####
    21
  • 8
    智能化运维：从被动响应到主动预防####
    18
  • 9
    springboot中使用knife4j访问接口文档的一系列问题
    32
  • 10
    后端开发中的微服务架构实践与挑战####
    20

    • 相关课程

    更多
  • 机器阅读技术与应用
  • 基于通义灵码实现高效 AI 编码
  • 相册服务中的故事生成算法介绍
  • 场景实践 -新手玩转云计算制作一个浪漫的表白网页
  • 跨越N次元 一键变身AI漫画人
  • 【新人赛】工业蒸汽量预测建模算法代码开源分享合集

    • 相关电子书

    更多
  • 数据+算法定义新世界
  • 如何高效的制作主机次时代游戏——高效游戏制作流程
  • 微信广告引擎与播放节奏算法实践

    • 相关实验场景

    更多
  • 奥运时刻！零代码生成奥运风格AI写真。
  • 在PAI ArtLab一键实现欧洲杯粉丝专属贴纸制作
  • 函数计算部署AI艺术字应用，生成新春文字头像
  • 一键创建和部署高分电影推荐语音技能
    • 下一篇
    DataWorks智能数据建模全面公测开始啦！