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

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

2022-04-25 213
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 请务必收下这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


👋 写在最后

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


文章标签：
前端开发
快跑啊小卢_
目录
相关文章
德宏大魔王
|
JavaScript 前端开发 Python
传智播客预习视频(16倍速无人值守自动下一节)
传智播客预习视频(16倍速无人值守自动下一节)
德宏大魔王
992 0
传智播客预习视频(16倍速无人值守自动下一节)
小小杨树1
|
10月前
|
计算机视觉
我的自描外挂制作日志——FPS类游戏的自瞄【验证猜想】
我的自描外挂制作日志——FPS类游戏的自瞄【验证猜想】
小小杨树1
113 1
開发-I88I9Z88OZ4
|
存储 区块链
无聊猿大逃杀游戏卷轴模式系统开发逻辑步骤
区块链的去中心化，数据的防篡改，决定了智能合约更加适合于在区块链上来实现
開发-I88I9Z88OZ4
81 0
a15034260562-24955
|
5G
复制一个5G文件只需要两秒，全网最牛方法！
复制一个5G文件只需要两秒，全网最牛方法！
a15034260562-24955
179 0
pbruxexakfzni
|
测试技术
软件测试面试题：在多用户模式下你用LoadRunnner的哪个组件来回放脚本？
软件测试面试题：在多用户模式下你用LoadRunnner的哪个组件来回放脚本？
pbruxexakfzni
135 0
快跑啊小卢_
|
前端开发
请务必收下这10+个加载特效，保证让你的项目大放异彩⭐（四）
请务必收下这10+个加载特效，保证让你的项目大放异彩⭐（四）
快跑啊小卢_
172 0
快跑啊小卢_
|
前端开发
请务必收下这10+个加载特效，保证让你的项目大放异彩⭐（一）
请务必收下这10+个加载特效，保证让你的项目大放异彩⭐（一）
快跑啊小卢_
205 0
快跑啊小卢_
|
前端开发
请务必收下这10+个加载特效，保证让你的项目大放异彩⭐（三）
请务必收下这10+个加载特效，保证让你的项目大放异彩⭐（三）
快跑啊小卢_
186 0
快跑啊小卢_
|
前端开发
请务必收下这10+个加载特效，保证让你的项目大放异彩⭐（二）
请务必收下这10+个加载特效，保证让你的项目大放异彩⭐（二）
快跑啊小卢_
136 0
呆呆敲代码的小Y
|
vr&ar 图形学
【Unity3D 灵巧小知识点】 ☀️ | 切换场景后保留上个场景中的游戏物体不被销毁
Unity 小科普 老规矩，先介绍一下 Unity 的科普小知识： Unity是 实时3D互动内容创作和运营平台 。 包括游戏开发、美术、建筑、汽车设计、影视在内的所有创作者，借助 Unity 将创意变成现实。 Unity 平台提供一整套完善的软件解决方案，可用于创作、运营和变现任何实时互动的2D和3D内容，支持平台包括手机、平板电脑、PC、游戏主机、增强现实和虚拟现实设备。 也可以简单把 Unity 理解为一个游戏引擎，可以用来专业制作游戏！
呆呆敲代码的小Y
698 0

热门文章

最新文章

  • 1
    域名ICP备案时网站备注到底该怎么写？全网最全教程来了
  • 2
    【玩转AIGC系列】使用Megatron-Deepspeed训练GPT-2并生成文本
  • 3
    专注精准：垂直领域模型的深度解析
  • 4
    图床软件竟然要收费，算了我自己写一个免费的
  • 5
    成功解决FileNotFoundError: [Errno 2] No such file or directory: 'C:\\Users\\niu\\AppData\\Local\\Temp\\p
  • 6
    dd命令使用
  • 7
    Lnmp安装收集资料
  • 8
    Fortinet重组进行中：Q4收益及预期良好 股价上涨
  • 9
    zendframework配置篇
  • 10
    .Net Winform 开发笔记（四） 透过现象看本质
  • 1
    量子算法的设计与优化：迈向量子计算的未来
    19
  • 2
    基于AI的自动化服务器管理：解锁运维的未来
    23
  • 3
    出道吧！阿里巴巴蛇年新春红包！
    17
  • 4
    大数据与金融科技：革新金融行业的动力引擎
    18
  • 5
    AI，正在帮老师们上“隐形的班”
    17
  • 6
    一键穿毛衣，通义邀你暖洋洋过冬
    8
  • 7
    通义鸿蒙原生版上线啦！
    9
  • 8
    【源码】【Java并发】【线程池】邀请您从0-1阅读ThreadPoolExecutor源码
    16
  • 9
    身为AI，班味怎么这么浓啊？
    12
  • 10
    今天的功德，在通义代码模式攒足了......
    9

    • 相关课程

    更多
  • 机器阅读技术与应用

    • 相关电子书

    更多
  • 《网站性能与体验优化实践指北》
  • 云端设计，与时间赛跑
  • 如何高效的制作主机次时代游戏——高效游戏制作流程

    • 相关实验场景

    更多
  • 使用Java面向对象编写网络通信程序应用
    • 下一篇
    通义万相：视觉生成大模型再进化