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

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

2022-04-25 194
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 请务必收下这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`在用户离开时发送少量数据至服务器，无需担心请求失败。需注意隐私合规、性能影响及浏览器兼容性。此技术有助于深入理解用户行为，为产品迭代提供依据。
土木林森
145 8
土木林森
|
4月前
|
消息中间件 Android开发 开发者
🔍深度剖析Android内存泄漏，让你的App远离崩溃边缘，稳如老狗！🐶
【7月更文挑战第28天】在 Android 开发中，内存管理至关重要。内存泄漏可悄无声息地累积，最终导致应用崩溃或性能下滑。它通常由不正确地持有 Activity 或 Fragment 的引用引起。常见原因包括静态变量持有组件引用、非静态内部类误用、Handler 使用不当、资源未关闭及集合对象未清理。使用 Android Studio Profiler 和 LeakCanary 可检测泄漏，修复方法涉及使用弱引用、改用静态内部类、妥善管理 Handler 和及时释放资源。良好的内存管理是保证应用稳定性的基石。
土木林森
78 4
文如秋雨
无人问津的设置页面，如何做到小而精美？
无人问津的设置页面，如何做到小而精美？
文如秋雨
70 0
豆约翰
|
Java 计算机视觉
手把手一步一步教你使用Java开发一个大型街机动作闯关类游戏04图像资源的透明处理
手把手一步一步教你使用Java开发一个大型街机动作闯关类游戏04图像资源的透明处理
豆约翰
121 0
技术小达人
|
存储 传感器 编解码
设计全新动作捕捉，构建水下3D系统，《阿凡达2》的特效背后藏了哪些秘密？
上映一周，票房破5亿。 暌违13年，詹姆斯·卡梅隆终于带来了《阿凡达2：水之道》。
技术小达人
1690 0
设计全新动作捕捉，构建水下3D系统，《阿凡达2》的特效背后藏了哪些秘密？
快跑啊小卢_
|
前端开发
请务必收下这10+个加载特效，保证让你的项目大放异彩⭐（三）
请务必收下这10+个加载特效，保证让你的项目大放异彩⭐（三）
快跑啊小卢_
153 0
快跑啊小卢_
|
前端开发
请务必收下这10+个加载特效，保证让你的项目大放异彩⭐（二）
请务必收下这10+个加载特效，保证让你的项目大放异彩⭐（二）
快跑啊小卢_
124 0
快跑啊小卢_
|
前端开发
请务必收下这10+个加载特效，保证让你的项目大放异彩⭐（四）
请务必收下这10+个加载特效，保证让你的项目大放异彩⭐（四）
快跑啊小卢_
148 0
快跑啊小卢_
|
前端开发
请务必收下这10+个加载特效，保证让你的项目大放异彩⭐（一）
请务必收下这10+个加载特效，保证让你的项目大放异彩⭐（一）
快跑啊小卢_
183 0

热门文章

最新文章

  • 1
    Flutter之禅 内存优化篇
  • 2
    《Cadence 16.6电路设计与仿真从入门到精通》——2.4 Design Entry CIS原理图图形界面　
  • 3
    记一次对网络抖动经典案例的分析
  • 4
    国外成人网站xHamster大量用户信息黑市变卖，部分账号涉及英美政府官员
  • 5
    用户密码以BCrypt加密的方式来防范被破解
  • 6
    带你理清CPU，cache和存储器之间的逻辑运作
  • 7
    Git设置代理服务器
  • 8
    【DSW Gallery】PAI-DSW开通及授权
  • 9
    吐血整理：机器学习的30个基本概念，都在这里了（手绘图解）
  • 10
    MOSS站点的迁移(备份还原)
  • 1
    设计模式之 5 大创建型模式，万字长文深剖 ，近 30 张图解！
    46
  • 2
    《C++新特性：为多线程数据竞争检测与预防保驾护航》
    40
  • 3
    Kotlin - 区间与数组
    40
  • 4
    Kotlin - 参数与异常
    39
  • 5
    Kotlin - 运算符与中缀表达式
    34
  • 6
    Kotlin - 函数与Lambda表达式
    22
  • 7
    Kotlin - 分支与循环
    18
  • 8
    天气预报1天-中国气象局-地址查询版免费API接口教程
    20
  • 9
    《C++智能合约与区块链底层交互全解析：构建坚实的去中心化应用桥梁》
    19

    • 相关课程

    更多
  • 机器阅读技术与应用
  • 相册服务中的故事生成算法介绍
  • 基于通义灵码实现高效 AI 编码
  • 场景实践 -新手玩转云计算制作一个浪漫的表白网页
  • 阿里小蜜中的机器阅读技术
  • 跨越N次元 一键变身AI漫画人

    • 相关电子书

    更多
  • 如何高效的制作主机次时代游戏——高效游戏制作流程
  • 一起来试验保险箱的脆弱面
  • 一起来试验 保险箱的脆弱面

    • 相关实验场景

    更多
  • 奥运时刻！零代码生成奥运风格AI写真。
  • 函数计算部署AI艺术字应用，生成新春文字头像
  • 一键创建和部署高分电影推荐语音技能
    • 下一篇
    阿里云OSS设置跨域访问