【CSS加载动画特效】28种纯CSS实现的加载loading动态特效（附源码） |
您所在的位置：网站首页 › 动画效果延迟 › 【CSS加载动画特效】28种纯CSS实现的加载loading动态特效（附源码） |
【CSS加载动画特效】28种纯CSS实现的加载loading动态特效（附源码）
|
文章目录
写在前面涉及知识点效果展示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，文尾有完整代码包下载链接。 在制作这个页面的时候首先就是构思，正常demo都是拿一个dom节点来示例，我选择整4个为代表，这样的话看着舒服点。 首先创建四个div，针对div设置居中展示，其中dom节点如下： 每一个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代码 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; }添加样式后的效果如下： 其实这个和上面的有点像，如果说第一个是一维的，那它就算二维的，是用了9个圆点形成的一个正方形矩阵，然后通过不同时间段各个圆点大小的变化形成的一种动态加载效果。 Html设置了9个子元素div，样式方面主要使用了css的animation-duration来设置不同节点的动画完成时间、animation-delay设置延迟间隔及transform设置缩放。如下所示代码： Html代码 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; }页面呈现效果如下所示： 这个相比上两个没有那么的复杂，主要用一个div就可以完成效果，主要是利用了animation-fill-mode和animation的样式设置，针对动画设置了transform的角度旋转动画rotate设置。 Html代码 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); } }页面实现效果如下： 其实这个是我们公司现阶段用的一个效果，有点像手风琴的感觉，其中设置了5根小柱子，然后通过设置这些柱子的高低动画，从而形成一种高低起伏的加载动画。 主要和前面一样，核心在于animation的样式设置。 Html代码 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; }页面效果如下所示： 网盘下载（第四章节有链接路径，可自行下载） 留言获取（可以在博主的评论区留言，切记要留下邮箱哟，博主看到后第一时间发出） 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博主-《拄杖盲学轻声码》，主页有很多分享的代码，期待您的访问。 |
【本文地址】
今日新闻 |
推荐新闻 |