【CSS加载动画特效】28种纯CSS实现的加载loading动态特效（附源码）

news2024/10/7 8:26:58

文章目录

  • 写在前面
  • 涉及知识点
  • 效果展示
  • 1、Loading节点的创建
  • 2、部分效果的实现源码
    • 1）三点加载动画
      • Html代码
      • CSS样式代码
    • 2）圆点矩阵加载特效
      • Html代码
      • CSS样式代码
    • 3）圆形轨迹加载动画
      • Html代码
      • Css样式代码
    • 4）栅栏式加载动画
      • Html代码
      • Css样式代码
  • 3、完整28种特效获取方式
  • 4、源码下载区
    • 1）百度网盘
    • 2）123云盘
    • 3）邮箱留言
  • 总结

写在前面

今天其实还是有点期待6月份城市赛道的成绩公布，但是可能因为出现城市太多等问题，官方也还在快马加鞭的统计中，我也趁机再发一篇前端的文章了，其实在很多系统里面我们都看到过各种各样的加载中样式，但是总有些显得平平无奇，今天我就统计了28种load加载动画特效给大家，希望能满足大家的需求。

涉及知识点

CSS3实现多种load加载效果，纯CSS3实现多种加载中效果，纯CSS3实现28种加载动态效果，页面实现loading效果，好看的loading动态特效，animation与transform的灵活应用。
版权声明：此文原创于CSDN博主-《拄杖盲学轻声码》，主页有很多分享的代码，期待您的访问。

效果展示

其实这个就是为了让更多的人能够选择性是否继续阅读这篇文章，为大家精准定位自己想要的demo，文尾有完整代码包下载链接。
在这里插入图片描述

1、Loading节点的创建

在制作这个页面的时候首先就是构思，正常demo都是拿一个dom节点来示例，我选择整4个为代表，这样的话看着舒服点。
首先创建四个div，针对div设置居中展示，其中dom节点如下：

<div class="loader">
  <div class="loader-inner">
    <div></div>
    <div></div>
    <div></div>
  </div>
</div>
<div class="loader">
  <div class="loader-inner">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </div>
</div>
<div class="loader">
  <div class="loader-inner">
    <div></div>
  </div>
</div>
<div class="loader">
  <div class="loader-inner">
    <div></div>
    <div></div>
  </div>
</div>

每一个loader都是表示装的一个加载中的效果，设置一个背景色效果如下：
在这里插入图片描述

然后再在白色的方块内设置样式，因为效果不同，所以我采用不同的class名来设置不同的样式属性。
版权声明：此文原创于CSDN博主-《拄杖盲学轻声码》，主页有很多分享的代码，期待您的访问。

2、部分效果的实现源码

1）三点加载动画

主要使用了animation属性的设置，也是CSS3中具有代表性的动画特征，它可以实现动画的时间、反向、次数，甚至支持反向动画等。

语法：animation: name duration timing-function delay iteration-count direction fill-mode play-state;

其中属性说明如下：

值说明
animation-name指定要绑定到选择器的关键帧的名称
animation-duration动画指定需要多少秒或毫秒完成
animation-timing-function设置动画将如何完成一个周期
animation-delay设置动画在启动前的延迟间隔。
animation-iteration-count定义动画的播放次数。
animation-direction指定是否应该轮流反向播放动画。
animation-fill-mode规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式。
animation-play-state指定动画是否正在运行或已暂停。
initial设置属性为其默认值。
inherit从父元素继承属性。

在我这个实例当中我主要设置的代码如下：

Html代码

<div class="loader">
  <div class="loader-inner ball-pulse">
    <div></div>
    <div></div>
    <div></div>
  </div>
</div>

CSS样式代码

.ball-pulse>div:nth-child(1) {
        -webkit-animation: scale 0.75s 0.12s infinite cubic-bezier(.2, .68, .18, 1.08);
        animation: scale 0.75s 0.12s infinite cubic-bezier(.2, .68, .18, 1.08);
}

.ball-pulse>div:nth-child(2) {
        -webkit-animation: scale 0.75s 0.24s infinite cubic-bezier(.2, .68, .18, 1.08);
        animation: scale 0.75s 0.24s infinite cubic-bezier(.2, .68, .18, 1.08);
}

.ball-pulse>div:nth-child(3) {
        -webkit-animation: scale 0.75s 0.36s infinite cubic-bezier(.2, .68, .18, 1.08);
        animation: scale 0.75s 0.36s infinite cubic-bezier(.2, .68, .18, 1.08);
}

.ball-pulse>div {
        background-color: #fff;
        width: 15px;
        height: 15px;
        border-radius: 100%;
        margin: 2px;
        -webkit-animation-fill-mode: both;
        animation-fill-mode: both;
        display: inline-block;
}

添加样式后的效果如下：
在这里插入图片描述

2）圆点矩阵加载特效

其实这个和上面的有点像，如果说第一个是一维的，那它就算二维的，是用了9个圆点形成的一个正方形矩阵，然后通过不同时间段各个圆点大小的变化形成的一种动态加载效果。
Html设置了9个子元素div，样式方面主要使用了css的animation-duration来设置不同节点的动画完成时间、animation-delay设置延迟间隔及transform设置缩放。如下所示代码：

Html代码

<div class="loader">
  <div class="loader-inner ball-grid-pulse">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </div>
</div>

CSS样式代码

@keyframes ball-grid-pulse {
        0% {
                -webkit-transform: scale(1);
                transform: scale(1);
        }

        50% {
                -webkit-transform: scale(0.5);
                transform: scale(0.5);
                opacity: 0.7;
        }

        100% {
                -webkit-transform: scale(1);
                transform: scale(1);
                opacity: 1;
        }
}

.ball-grid-pulse {
        width: 57px;
}

.ball-grid-pulse>div:nth-child(1) {
        -webkit-animation-delay: -0.06s;
        animation-delay: -0.06s;
        -webkit-animation-duration: 0.72s;
        animation-duration: 0.72s;
}

.ball-grid-pulse>div:nth-child(2) {
        -webkit-animation-delay: 0.25s;
        animation-delay: 0.25s;
        -webkit-animation-duration: 1.02s;
        animation-duration: 1.02s;
}

.ball-grid-pulse>div:nth-child(3) {
        -webkit-animation-delay: -0.17s;
        animation-delay: -0.17s;
        -webkit-animation-duration: 1.28s;
        animation-duration: 1.28s;
}

.ball-grid-pulse>div:nth-child(4) {
        -webkit-animation-delay: 0.48s;
        animation-delay: 0.48s;
        -webkit-animation-duration: 1.42s;
        animation-duration: 1.42s;
}

.ball-grid-pulse>div:nth-child(5) {
        -webkit-animation-delay: 0.31s;
        animation-delay: 0.31s;
        -webkit-animation-duration: 1.45s;
        animation-duration: 1.45s;
}

.ball-grid-pulse>div:nth-child(6) {
        -webkit-animation-delay: 0.03s;
        animation-delay: 0.03s;
        -webkit-animation-duration: 1.18s;
        animation-duration: 1.18s;
}

.ball-grid-pulse>div:nth-child(7) {
        -webkit-animation-delay: 0.46s;
        animation-delay: 0.46s;
        -webkit-animation-duration: 0.87s;
        animation-duration: 0.87s;
}

.ball-grid-pulse>div:nth-child(8) {
        -webkit-animation-delay: 0.78s;
        animation-delay: 0.78s;
        -webkit-animation-duration: 1.45s;
        animation-duration: 1.45s;
}

.ball-grid-pulse>div:nth-child(9) {
        -webkit-animation-delay: 0.45s;
        animation-delay: 0.45s;
        -webkit-animation-duration: 1.06s;
        animation-duration: 1.06s;
}

.ball-grid-pulse>div {
        background-color: #fff;
        width: 15px;
        height: 15px;
        border-radius: 100%;
        margin: 2px;
        -webkit-animation-fill-mode: both;
        animation-fill-mode: both;
        display: inline-block;
        float: left;
        -webkit-animation-name: ball-grid-pulse;
        animation-name: ball-grid-pulse;
        -webkit-animation-iteration-count: infinite;
        animation-iteration-count: infinite;
        -webkit-animation-delay: 0;
        animation-delay: 0;
}

页面呈现效果如下所示：
在这里插入图片描述

3）圆形轨迹加载动画

这个相比上两个没有那么的复杂，主要用一个div就可以完成效果，主要是利用了animation-fill-mode和animation的样式设置，针对动画设置了transform的角度旋转动画rotate设置。

Html代码

 <div class="loader">
        <div class="loader-inner ball-clip-rotate">
          <div></div>
        </div>
      </div>

Css样式代码

.ball-clip-rotate>div {
        background-color: #fff;
        width: 15px;
        height: 15px;
        border-radius: 100%;
        margin: 2px;
        -webkit-animation-fill-mode: both;
        animation-fill-mode: both;
        border: 2px solid #fff;
        border-bottom-color: transparent;
        height: 25px;
        width: 25px;
        background: transparent !important;
        display: inline-block;
        -webkit-animation: rotate 0.75s 0s linear infinite;
        animation: rotate 0.75s 0s linear infinite;
}

@keyframes rotate {
        0% {
                -webkit-transform: rotate(0deg) scale(1);
                transform: rotate(0deg) scale(1);
        }

        50% {
                -webkit-transform: rotate(180deg) scale(0.6);
                transform: rotate(180deg) scale(0.6);
        }

        100% {
                -webkit-transform: rotate(360deg) scale(1);
                transform: rotate(360deg) scale(1);
        }
}

页面实现效果如下：
在这里插入图片描述

4）栅栏式加载动画

其实这个是我们公司现阶段用的一个效果，有点像手风琴的感觉，其中设置了5根小柱子，然后通过设置这些柱子的高低动画，从而形成一种高低起伏的加载动画。
主要和前面一样，核心在于animation的样式设置。

Html代码

<div class="loader">
  <div class="loader-inner line-scale">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </div>
</div>

Css样式代码

.line-scale>div:nth-child(1) {
        -webkit-animation: line-scale 1s 0.1s infinite cubic-bezier(.2, .68, .18, 1.08);
        animation: line-scale 1s 0.1s infinite cubic-bezier(.2, .68, .18, 1.08);
}

.line-scale>div:nth-child(2) {
        -webkit-animation: line-scale 1s 0.2s infinite cubic-bezier(.2, .68, .18, 1.08);
        animation: line-scale 1s 0.2s infinite cubic-bezier(.2, .68, .18, 1.08);
}

.line-scale>div:nth-child(3) {
        -webkit-animation: line-scale 1s 0.3s infinite cubic-bezier(.2, .68, .18, 1.08);
        animation: line-scale 1s 0.3s infinite cubic-bezier(.2, .68, .18, 1.08);
}

.line-scale>div:nth-child(4) {
        -webkit-animation: line-scale 1s 0.4s infinite cubic-bezier(.2, .68, .18, 1.08);
        animation: line-scale 1s 0.4s infinite cubic-bezier(.2, .68, .18, 1.08);
}

.line-scale>div:nth-child(5) {
        -webkit-animation: line-scale 1s 0.5s infinite cubic-bezier(.2, .68, .18, 1.08);
        animation: line-scale 1s 0.5s infinite cubic-bezier(.2, .68, .18, 1.08);
}

.line-scale>div {
        background-color: #fff;
        width: 4px;
        height: 35px;
        border-radius: 2px;
        margin: 2px;
        -webkit-animation-fill-mode: both;
        animation-fill-mode: both;
        display: inline-block;
}

页面效果如下所示：
在这里插入图片描述

3、完整28种特效获取方式

  • 网盘下载（第四章节有链接路径，可自行下载）

  • 留言获取（可以在博主的评论区留言，切记要留下邮箱哟，博主看到后第一时间发出）

4、源码下载区

1）百度网盘

链接：https://pan.baidu.com/s/1OSRhPOxonxWDlGxAN_0U1g
提取码：hdd6

2）123云盘

链接：https://www.123pan.com/s/ZxkUVv-V3I4.html
提取码：hdd6

3）邮箱留言

评论区留下您的邮箱账号，博主看到第一时间发给您，祝您生活愉快！

总结

以上就是今天要讲的内容，本文主要介绍了CSS3的特效应用，主要实现了CSS3实现多种加载中效果，CSS3实现28种加载动态效果，页面实现loading效果，好看的loading动态特效，也期待大家一起进步哈，2023年一起加油！！！

版权声明：此文原创于CSDN博主-《拄杖盲学轻声码》，主页有很多分享的代码，期待您的访问。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/743879.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

Qt/C++音视频开发46-音视频同步保存到MP4

Qt/C++音视频开发46-音视频同步保存到MP4

一、前言 用ffmpeg单独做视频保存不难&#xff0c;单独做音频保存也不难&#xff0c;难的是音视频同步保存到MP4中&#xff0c;重点是音视频要同步&#xff0c;其实这也不难&#xff0c;只要播放那边音视频同步后的数据&#xff0c;写入到文件即可。最难的是在播放过程中不断随…
阅读更多...
python对dataframe索引的操作

python对dataframe索引的操作

目录 假如有个dataframe如下&#xff0c;这里需要去除第一个aa&#xff0c;保留最后一个aa 关键代码 # 如果你想保留第一个aa&#xff0c;那么keep就是first df.reset_index().drop_duplicates(subsetindex, keepfirst).set_index(index)结果如下&#xff1a; 原文链接&am…
阅读更多...
10.1.5 查询指令是否为 Bash shell 的内置命令： type

10.1.5 查询指令是否为 Bash shell 的内置命令： type

通过 type 这个指令我们可以知道每个指令是否为 bash 的内置指令。 此外&#xff0c;由于利用 type 搜寻后面的名称时&#xff0c;如果后面接的名称并不能以可执行文件的状态被找到&#xff0c; 那么该名称是不会被显示出来的。也就是说&#xff0c; type 主要在找出“可执行文…
阅读更多...
3 Prometheus安装

3 Prometheus安装

目录 1. 安装Prometheus 2. 基于linux安装Prometheus 下载安装包 将安装包放在合适的目录下 启动prometheus 访问 3. 配置Prometheus 3.1 global 3.2 alerting 3.3 rule_files 3.4 static_configs 4. 第一个指标 5 表达式浏览器 指标列表自动填充 指标名称筛选 指…
阅读更多...
pytorch的whl文件安装

pytorch的whl文件安装

下载.whl文件&#xff0c;离线安装 提示&#xff1a;下载torch的稳定版本网址[https://download.pytorch.org/whl/torch_stable.html](https://download.pytorch.org/whl/torch_stable.html) 首先&#xff0c;查看主机显卡和安装的cuda版本。 可以在命令行输入:nvcc -V 如果…
阅读更多...
使用jquery遇到的问题Unresolved function or method $()

使用jquery遇到的问题Unresolved function or method $()

今天在使用jquery的时候&#xff0c;发现页面中即使引入了jquery.min.js&#xff0c;js代码中仍然说找不到$()&#xff0c;原来的项目也是用的jquery.min.js&#xff0c;为什么之前的就没有这个问题呢。 然后利用搜索引擎查了一下解决方案&#xff0c;最后还是决定改成未压缩版…
阅读更多...
触摸按键控制LED灯亮灭

触摸按键控制LED灯亮灭

文章目录 前言一、触摸按键介绍二、触摸按键电路原理模式一&#xff1a;模式二&#xff1a; 三、系统设计1、模块框图2、RTL视图 四、源码1、touch_led模块 五、效果六、总结七、参考资料 前言 环境&#xff1a; 1、Quartus18.1 2、vscode 3、板子型号&#xff1a;原子哥开拓者…
阅读更多...
前端熟练发起ajax请求的多种方法

前端熟练发起ajax请求的多种方法

1.原生发起ajax 1.1概念&#xff1a; 说明&#xff1a;XMLHttpRequest是 JavaScript 的内置对象&#xff0c;用于在Web应用程序中向服务器发送HTTP请求和接收响应。通过XMLHttpRequest对象&#xff0c;可以实现异步加载数据&#xff0c;无需刷新整个页面即可更新部分内容。常…
阅读更多...
Ubuntu 22.04 LTS RTX 2060 6G 显卡 GPU测试 甜甜圈 geeks3d GpuTest

Ubuntu 22.04 LTS RTX 2060 6G 显卡 GPU测试 甜甜圈 geeks3d GpuTest

下载 GpuTest主页地址 GpuTest - Cross-Platform GPU Stress Test and OpenGL Benchmark for Windows, Linux and OS X | Geeks3D.com 下载页 GpuTest download | Geeks3D 下载链接 https://ozone3d.net/gputest/dl/GpuTest_Linux_x64_0.7.0.zip 测试 unzip GpuTest_Li…
阅读更多...
【C#】并行编程实战：同步原语（上）

【C#】并行编程实战：同步原语（上）

在第4章中讨论了并行编程的潜在问题&#xff0c;其中之一就是同步开销。当将工作分解为多个工作项并由任务处理时&#xff0c;就需要同步每个线程的结果。线程局部存储和分区局部存储&#xff0c;某种程度上可以解决同步问题。但是&#xff0c;当数据共享时&#xff0c;就需要用…
阅读更多...
Python实现PSO粒子群优化算法优化XGBoost回归模型(XGBRegressor算法)项目实战

Python实现PSO粒子群优化算法优化XGBoost回归模型(XGBRegressor算法)项目实战

说明&#xff1a;这是一个机器学习实战项目&#xff08;附带数据代码文档视频讲解&#xff09;&#xff0c;如需数据代码文档视频讲解可以直接到文章最后获取。 1.项目背景 PSO是粒子群优化算法&#xff08;Particle Swarm Optimization&#xff09;的英文缩写&#xff0c;是一…
阅读更多...
在线培训系统成为未来自主学习利器

在线培训系统成为未来自主学习利器

传统教育模式存在的一个重要问题是&#xff0c;学生往往需要跟随教师和课堂的步调前进。这种模式可能会导致一些学生在学习过程中感到压力和挫败&#xff0c;并且不可避免地会出现部分学生落后于其他同学的情况。然而&#xff0c;在线培训系统可以赋予学生更多的自主权&#xf…
阅读更多...
Linux系统编程（环境变量编程）

Linux系统编程（环境变量编程）

文章目录 前言一、环境变量表二、环境变量读写接口总结 前言 本篇文章我们来讲解环境变量编程&#xff0c;环境变量在Linux中可以说是非常重要的&#xff0c;那么这篇文章将会带大家来学习环境变量的编程。 一、环境变量表 在Linux系统中&#xff0c;环境变量是一种特殊的变…
阅读更多...
SQL-每日一题【595.大的国家】

SQL-每日一题【595.大的国家】

题目 World 表&#xff1a; 如果一个国家满足下述两个条件之一&#xff0c;则认为该国是 大国 &#xff1a; 面积至少为 300 万平方公里&#xff08;即&#xff0c;3000000 km2&#xff09;&#xff0c;或者人口至少为 2500 万&#xff08;即 25000000&#xff09; 编写一个…
阅读更多...
kafka第一课-Kafka快速实战以及基本原理详解

kafka第一课-Kafka快速实战以及基本原理详解

一、Kafka介绍 Kafka是一个分布式的发布-订阅消息系统&#xff0c;可以快速地处理高吞吐量的数据流&#xff0c;并将数据实时地分发到多个消费者中。Kafka消息系统由多个broker&#xff08;服务器&#xff09;组成&#xff0c;这些broker可以在多个数据中心之间分布式部署&…
阅读更多...
react学习笔记——复习模块

react学习笔记——复习模块

前言&#xff1a;最近开始学习react&#xff0c;之前学习vue没有把笔记整理的特别好&#xff0c;非常后悔&#xff0c;感觉学了等于没学&#xff0c;这次要好好整理啊&#xff01;本次学习参考教程为B站&#xff0c;张天禹老师的react全家桶。 文章目录 类的基本知识创建一个类…
阅读更多...
时间序列分类 论文和数据集汇总

时间序列分类 论文和数据集汇总

时间序列分类 时间序列广泛应用于金融、工业领域、健康、运维、交通领域。 其实异常检测任务也可以看作是一个时间序列分类任务&#xff0c;异常与否两类&#xff0c;或者异常有很多种&#xff0c;则是多分类问题。 时间序列分类的数据是多种的&#xff1a;时间轨迹数据&#x…
阅读更多...
Real-time Short Video Recommendation on Mobile Devices 阅读笔记

Real-time Short Video Recommendation on Mobile Devices 阅读笔记

摘要 用户会实时兴趣转移&#xff0c;为实现在客户端重排&#xff0c;提出一种 context-aware re-ranking 方法&#xff0c;基于 adaptive beam search 1 引言 1.1 之前架构的问题&#xff1a; 1&#xff0c;需解决 real-time feedback 的问题 2&#xff0c;速度问题 1.2…
阅读更多...
【Spring Boot】开发环境热部署

【Spring Boot】开发环境热部署

开发环境热部署 在实际的项目开发调试过程中会频繁地修改后台类文件&#xff0c;导致需要重新编译、重新启动&#xff0c;整个过程非常麻烦&#xff0c;影响开发效率。下面介绍Spring Boot如何解决这个问题。 1.devtools实现原理 我们在开发调试Spring Boot项目时&#xff0…
阅读更多...
Flink 系列三 Flink 实战

Flink 系列三 Flink 实战

目录 ​编辑 前言 1、安装flink环境 2、在idea中创建flink的第一个demo 2.1、执行如下maven命令 2.2、填写groupId、artifactId、version、package 2.3、选择Yes即可生成创建好的工程 3、开发第一个flink程序 3.1、开发一个简单的统计程序 3.2、直接编译得到jar包 4、…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023