菜单 搜索
首页 前端知识 【CSS加载动画特效】28种纯CSS实现的加载loading动态特效（附源码）

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

2024-03-27 10:03:31 前端知识 前端哥 359 383 我要收藏

文章目录

  • 写在前面
  • 涉及知识点
  • 效果展示
  • 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博主-《拄杖盲学轻声码》，主页有很多分享的代码，期待您的访问。

转载请注明出处或者链接地址：https://www.qianduange.cn//article/4201.html
标签
上一篇：HTML基本结构及基本标签
评论
相关文章

前端哥

前端哥

发布的文章

HTML期末大作业-小米商城，快手前端面试经验

2024-04-17 21:04:45

如何在VSCode中将html文件打开到浏览器

2024-04-17 21:04:13

【VUE】Vue2菜单搜索并跳转指定页面

2024-04-17 21:04:11

HTML中的自适应布局

2024-04-17 21:04:02

Web前端课程——HTML，CSS

2024-04-17 21:04:39

前端学习系列之html

2024-04-17 21:04:38

css3之动画渲染，【最全总结】

2024-04-17 21:04:19

打造经典游戏：HTML5与CSS3实现俄罗斯方块

2024-04-17 21:04:17

css实现文字大小自适应

2024-01-30 10:01:36

2024 CSS 水平垂直居中方式汇总，全到没朋友（锤爆面试官系列）

2024-04-17 21:04:08

大家推荐的文章
1

js数组常用方法（19种）|你会的到底有多少呢？

2024-04-08 11:04:211000
2

【Echarts系列】—— 实现电池图、3D立体圆形柱状图

2024-03-03 11:03:011000
3

ECharts 饼状图颜色设置

2024-02-16 14:02:001000
4

echarts实现动态渲染多柱图

2024-02-12 14:02:341000
5

移动端css布局大全

2024-02-06 15:02:421000
6

使用HTML5和JS实现日期下拉框功能

2024-02-04 11:02:521000
7

JS生成条形码JsBarcode.all.js，转成图片canvas2image.js，并打印二维码jQuery.print.js

2024-01-27 01:01:181000
8

vue实现可输入可下拉选择的组件

2024-04-05 09:04:35999
9

echarts 图表，定时器实现数据实时动态

2024-03-13 00:03:28999
10

jQuery事件处理

2024-03-12 01:03:32999

rss订阅 百度xml 谷歌xml 搜狗xml soxml 神马搜索xml 网站地图

Copyright © 2018-2022 前端哥 陕ICP备2023000550号-1 前端哥

讲个笑话：程序员心理活动：看别人的代码，这都写得什么玩意儿，垃圾！！看自己一个月前的代码：这TM谁写得代码，垃圾！再一看，这代码怎么这么眼熟？我自己写得？仔细一看，卧槽！还TM的真是我自己写的！！

前端技术交流源码工具分享网站

会员中心 联系我 留言建议 回顶部
复制成功！