请务必收下这10+个加载特效,保证让你的项目大放异彩⭐(一)

简介: 请务必收下这10+个加载特效,保证让你的项目大放异彩⭐(一)

☀️ 前言


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

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

⛷️ 来吧展示


1、一个"滚动"加载

跳动旋转的的方块再加上渐变的影子简单的构成了一个物体滚动的画面

<!-- loading.html -->
<div class="boxLoading"></div>
复制代码
/* loading.css */
.boxLoading {  
  width: 50px;
  height: 50px;
  margin: auto;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}
.boxLoading:before {
  content: '';
  width: 50px;
  height: 5px;
  background: #fff;
  opacity: 0.7;
  position: absolute;
  top: 59px;
  left: 0;
  border-radius: 50%;
  animation: shadow .5s linear infinite;
}
.boxLoading:after {
  content: '';
  width: 50px;
  height: 50px;
  background: #e04960;
  animation: animate .5s linear infinite;
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 3px;
}
@keyframes animate {
  17% {
    border-bottom-right-radius: 3px;
  }
  25% {
    transform: translateY(9px) rotate(22.5deg);
  }
  50% {
    transform: translateY(18px) scale(1, .9) rotate(45deg);
    border-bottom-right-radius: 40px;
  }
  75% {
    transform: translateY(9px) rotate(67.5deg);
  }
  100% {
    transform: translateY(0) rotate(90deg);
  }
}
@keyframes shadow {
  0%, 100% {
    transform: scale(1, 1);
  }
  50% {
    transform: scale(1.2, 1);
  }
}
复制代码

Author:Dicson


2、一个"方块消失术"加载

当每个消失的方块集成一起再设置不同的消失时间会发生什么事情呢?

<!-- loading.html -->
<div class="sk-cube-grid">
    <div class="sk-cube sk-cube-1"></div>
    <div class="sk-cube sk-cube-2"></div>
    <div class="sk-cube sk-cube-3"></div>
    <div class="sk-cube sk-cube-4"></div>
    <div class="sk-cube sk-cube-5"></div>
    <div class="sk-cube sk-cube-6"></div>
    <div class="sk-cube sk-cube-7"></div>
    <div class="sk-cube sk-cube-8"></div>
    <div class="sk-cube sk-cube-9"></div>
  </div>
复制代码
/* loading.css */
.sk-cube-grid {
  width: 4em;
  height: 4em;
  margin: auto; 
}
.sk-cube {
  width: 33%;
  height: 33%;
  background-color: #e04960;
  float: left;
  animation: sk-cube-grid-scale-delay 1.3s infinite ease-in-out;
}
.sk-cube-1 {
  animation-delay: 0.2s;
}
.sk-cube-2 {
  animation-delay: 0.3s;
}
.sk-cube-3 {
  animation-delay: 0.4s;
}
.sk-cube-4 {
  animation-delay: 0.1s;
}
.sk-cube-5 {
  animation-delay: 0.2s;
}
.sk-cube-6 {
  animation-delay: 0.3s;
}
.sk-cube-7 {
  animation-delay: 0s;
}
.sk-cube-8 {
  animation-delay: 0.1s;
}
.sk-cube-9 {
  animation-delay: 0.2s;
}
@keyframes sk-cube-grid-scale-delay {
  0%, 70%, 100% {
    transform: scale3D(1,1,1);
  }
  35%           {
    transform: scale3D(0,0,1);
  }
}
复制代码

Author:Nicola Pressi


👋 写在最后


  • 首先还是很感谢大家看到这里,这次的文章就分享到这里,如果有需要可以直接复制使用哟~
  • 如果您觉得这篇文章有帮助到您的的话不妨🍉关注+点赞+收藏+评论+转发🍉支持一下哟~~😛您的支持就是我更新的最大动力。
目录
打赏
0
0
0
0
1
分享
相关文章
Java网络编程:实现文件断点续传功能
文件下载是网络应用程序中的常见任务,而断点续传是提供更好用户体验的重要功能之一。本文将详细介绍如何使用Java实现文件断点续传功能,使用户能够在下载中断后从上次中断的地方继续下载。
322 0
MIT颠覆传统!分形生成模型效率暴涨4000倍,高分辨率图像秒级生成
Fractal Generative Models 是麻省理工学院与 Google DeepMind 团队推出的新型图像生成方法,基于分形思想,通过递归调用模块构建自相似架构,显著提升计算效率,适用于高分辨率图像生成、医学图像模拟等领域。
141 0
MIT颠覆传统!分形生成模型效率暴涨4000倍,高分辨率图像秒级生成
Docker 部署 Vue
在 Docker 中使用 Node 和 Nginx 基础镜像来部署一个 Vue 项目,通常可以按照以下步骤进行。这些步骤涵盖了从构建 Vue 项目到配置 Dockerfile 和 Nginx 的过程。
171 1
Java 22 新增利器: 使用 Java Stream Gather 优雅地处理流中的状态
Java 22 新增利器: 使用 Java Stream Gather 优雅地处理流中的状态
217 0
【Python机器学习】神经网络中误差反向传播(BP)算法详解及代码示例(图文解释 附源码)
【Python机器学习】神经网络中误差反向传播(BP)算法详解及代码示例(图文解释 附源码)
234 0
【问题解决】typora+picgo上传图片一直在uploading的解决方法
我们在typora+picgo搭建完图床后,我们需要上传图片,我们上传图片时,发现一直在uploading转圈圈,因此我去查询了解决方法,并且成功的解决问题了 问题情况如下图:
206 0
网页开发中SEO是什么?TDK又是什么?
搜索引擎优化,是一种利用搜索引擎的规则提高网站在有关搜索引擎内自然排名的方式。SEO的目的是对网站进行深度的优化,从而帮助网站获取免费的流量,进而在搜索引擎上提升网站的排名,提高网站的知名度。
246 0
AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等

登录插画

登录以查看您的控制台资源

管理云资源
状态一览
快捷访问