十六种炫酷纯css加载动画（一）

最新推荐文章于 2024-05-30 10:50:01 发布
最新推荐文章于 2024-05-30 10:50:01 发布
阅读量7.4k 收藏 223
点赞数 38
分类专栏： 前端开发 文章标签： 程序员 前端开发 it css3 加载动画
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/meng_nn/article/details/103508637
版权

一个好的开篇，会给你这个项目增加不少分值。

有没有遇到过打开页面加载一段时间，页面内容才加载出来。在等待加载的过程中页面却是空白页，给用户的体验特别不好，会让项目降一个档次。下面的十六种炫酷炸裂的css加载动画，会让你在等待的过程中，体验视觉盛宴，给用户不一般的加载体验，对，就是纯css3的炫酷加载动画，请看效果！

码字不易，且行且珍惜。

加载1

在这里插入图片描述

css源码

.title{
    width: 100%;
    text-align: center;
    margin:60px 0;
    font-size: 18px;
    color: #999;
}
.loadingOne{
    width: 80px;
    height: 40px;
    margin: 0 auto;
}
.loadingOne span{
    display: inline-block;
    width: 8px;
    height: 100%;
    border-radius: 4px;
    background: lightgreen;
    -webkit-animation: load 1s ease infinite;
    animation: load 1s ease infinite;
}
@-webkit-keyframes load{
    0%,100%{
        height: 40px;
        background: lightgreen;
    }
    50%{
        height: 70px;
        margin: -15px 0;
        background: lightblue;
    }
}
.loadingOne span:nth-child(2){
    -webkit-animation-delay:0.2s;
    animation-delay:0.2s;
}
.loadingOne span:nth-child(3){
    -webkit-animation-delay:0.4s;
    animation-delay:0.4s;
}
.loadingOne span:nth-child(4){
    -webkit-animation-delay:0.6s;
    animation-delay:0.6s;
}
.loadingOne span:nth-child(5){
    -webkit-animation-delay:0.8s;
    animation-delay:0.8s;
}

html源码

<div class="loadingOne">
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
</div>

加载2

在这里插入图片描述

css源码

.loadingTwo{
    width: 150px;
    height: 4px;
    border-radius: 2px;
    margin: 0 auto;
    margin-top:100px;
    position: relative;
    background: lightgreen;
    -webkit-animation: changeBgColor 1.04s ease-in infinite alternate;
    animation: changeBgColor 1.04s ease-in infinite alternate;
}
.loadingTwo span{
    display: inline-block;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: lightgreen;
    position: absolute;
    margin-top: -7px;
    margin-left:-8px;
    -webkit-animation: changePosition 1.04s ease-in infinite alternate;
    animation: changePosition 1.04s ease-in infinite alternate;
}
@-webkit-keyframes changeBgColor{
    0%{
        background: lightgreen;
    }
    100%{
        background: lightblue;
    }
}
@-webkit-keyframes changePosition{
    0%{
        background: lightgreen;
    }
    100%{
        margin-left: 142px;
        background: lightblue;
    }
}

html源码

<div class="loadingTwo">
    <span></span>
</div>

加载3

在这里插入图片描述

css源码

.loadingThree{
    width: 150px;
    height: 15px;
    margin: 0 auto;
    margin-top:100px;
}
.loadingThree span{
    display: inline-block;
    width: 15px;
    height: 100%;
    margin-right: 5px;
    border-radius: 50%;
    background: lightgreen;
    -webkit-animation: load 1.04s ease infinite;
}
.loadingThree span:last-child{
    margin-right: 0px;
}
@-webkit-keyframes load{
    0%{
        opacity: 1;
    }
    100%{
        opacity: 0;
    }
}
.loadingThree span:nth-child(1){
    -webkit-animation-delay:0.13s;
}
.loadingThree span:nth-child(2){
    -webkit-animation-delay:0.26s;
}
.loadingThree span:nth-child(3){
    -webkit-animation-delay:0.39s;
}
.loadingThree span:nth-child(4){
    -webkit-animation-delay:0.52s;
}
.loadingThree span:nth-child(5){
    -webkit-animation-delay:0.65s;
}

html源码

<div class="loadingThree">
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
</div>

加载4

在这里插入图片描述

css源码

.loadingFour{
		width: 150px;
		height: 15px;
		margin: 0 auto;
		margin-top:100px;
		text-align: center;
	}
	.loadingFour span{
		display: inline-block;
		width: 15px;
		height: 100%;
		margin-right: 5px;
		background: lightgreen;
		-webkit-animation: load 1.04s ease infinite;
	}
	.loadingFour span:last-child{
		margin-right: 0px;
	}
	@-webkit-keyframes load{
		0%{
			opacity: 1;
		}
		100%{
			opacity: 0;
		}
	}
	.loadingFour span:nth-child(1){
		-webkit-animation-delay:0.13s;
	}
	.loadingFour span:nth-child(2){
		-webkit-animation-delay:0.26s;
	}
	.loadingFour span:nth-child(3){
		-webkit-animation-delay:0.39s;
	}
	.loadingFour span:nth-child(4){
		-webkit-animation-delay:0.52s;
	}
	.loadingFour span:nth-child(5){
		-webkit-animation-delay:0.65s;
	}.loadingTwo{
    width: 150px;
    height: 4px;
    border-radius: 2px;
    margin: 0 auto;
    margin-top:100px;
    position: relative;
    background: lightgreen;
    -webkit-animation: changeBgColor 1.04s ease-in infinite alternate;
    animation: changeBgColor 1.04s ease-in infinite alternate;
}
.loadingTwo span{
    display: inline-block;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: lightgreen;
    position: absolute;
    margin-top: -7px;
    margin-left:-8px;
    -webkit-animation: changePosition 1.04s ease-in infinite alternate;
    animation: changePosition 1.04s ease-in infinite alternate;
}
@-webkit-keyframes changeBgColor{
    0%{
        background: lightgreen;
    }
    100%{
        background: lightblue;
    }
}
@-webkit-keyframes changePosition{
    0%{
        background: lightgreen;
    }
    100%{
        margin-left: 142px;
        background: lightblue;
    }
}

html源码

<div class="loadingFour">
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
</div>

加载5

在这里插入图片描述

css源码

.loadingFive{
    width: 150px;
    height: 15px;
    margin: 0 auto;
    margin-top:100px;
}
.loadingFive span{
    display: inline-block;
    width: 15px;
    height: 100%;
    margin-right: 5px;
    background: lightgreen;
    -webkit-transform-origin: right bottom;
    -webkit-animation: load 1s ease infinite;
}
.loadingFive span:last-child{
    margin-right: 0px;
}
@-webkit-keyframes load{
    0%{
        opacity: 1;
    }
    100%{
        opacity: 0;
        -webkit-transform: rotate(90deg);
    }
}
.loadingFive span:nth-child(1){
    -webkit-animation-delay:0.13s;
}
.loadingFive span:nth-child(2){
    -webkit-animation-delay:0.26s;
}
.loadingFive span:nth-child(3){
    -webkit-animation-delay:0.39s;
}
.loadingFive span:nth-child(4){
    -webkit-animation-delay:0.52s;
}
.loadingFive span:nth-child(5){
    -webkit-animation-delay:0.65s;
}.loadingTwo{
    width: 150px;
    height: 4px;
    border-radius: 2px;
    margin: 0 auto;
    margin-top:100px;
    position: relative;
    background: lightgreen;
    -webkit-animation: changeBgColor 1.04s ease-in infinite alternate;
    animation: changeBgColor 1.04s ease-in infinite alternate;
}
.loadingTwo span{
    display: inline-block;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: lightgreen;
    position: absolute;
    margin-top: -7px;
    margin-left:-8px;
    -webkit-animation: changePosition 1.04s ease-in infinite alternate;
    animation: changePosition 1.04s ease-in infinite alternate;
}
@-webkit-keyframes changeBgColor{
    0%{
        background: lightgreen;
    }
    100%{
        background: lightblue;
    }
}
@-webkit-keyframes changePosition{
    0%{
        background: lightgreen;
    }
    100%{
        margin-left: 142px;
        background: lightblue;
    }
}.loadingFive{
    width: 150px;
    height: 15px;
    margin: 0 auto;
    margin-top:100px;
}
.loadingFive span{
    display: inline-block;
    width: 15px;
    height: 100%;
    margin-right: 5px;
    background: lightgreen;
    -webkit-transform-origin: right bottom;
    -webkit-animation: load 1s ease infinite;
}
.loadingFive span:last-child{
    margin-right: 0px;
}
@-webkit-keyframes load{
    0%{
        opacity: 1;
    }
    100%{
        opacity: 0;
        -webkit-transform: rotate(90deg);
    }
}
.loadingFive span:nth-child(1){
    -webkit-animation-delay:0.13s;
}
.loadingFive span:nth-child(2){
    -webkit-animation-delay:0.26s;
}
.loadingFive span:nth-child(3){
    -webkit-animation-delay:0.39s;
}
.loadingFive span:nth-child(4){
    -webkit-animation-delay:0.52s;
}
.loadingFive span:nth-child(5){
    -webkit-animation-delay:0.65s;
}

html源码

<div class="loadingFive">
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
</div>

加载6

在这里插入图片描述

css源码

.loadingSix{
    width: 100px;
    height: 100px;
    position: relative;
    margin: 0 auto;
    margin-top:100px;
}
.loadingSix span{
    display: inline-block;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: lightgreen;
    position: absolute;
    -webkit-animation: load 1.04s ease infinite;
}
@-webkit-keyframes load{
    0%{
        opacity: 1;
    }
    100%{
        opacity: 0.2;
    }
}
.loadingSix span:nth-child(1){
    left: 0;
    top: 50%;
    margin-top:-8px;
    -webkit-animation-delay:0.13s;
}
.loadingSix span:nth-child(2){
    left: 14px;
    top: 14px;
    -webkit-animation-delay:0.26s;
}
.loadingSix span:nth-child(3){
    left: 50%;
    top: 0;
    margin-left: -8px;
    -webkit-animation-delay:0.39s;
}
.loadingSix span:nth-child(4){
    top: 14px;
    right:14px;
    -webkit-animation-delay:0.52s;
}
.loadingSix span:nth-child(5){
    right: 0;
    top: 50%;
    margin-top:-8px;
    -webkit-animation-delay:0.65s;
}
.loadingSix span:nth-child(6){
    right: 14px;
    bottom:14px;
    -webkit-animation-delay:0.78s;
}
.loadingSix span:nth-child(7){
    bottom: 0;
    left: 50%;
    margin-left: -8px;
    -webkit-animation-delay:0.91s;
}
.loadingSix span:nth-child(8){
    bottom: 14px;
    left: 14px;
    -webkit-animation-delay:1.04s;
}

html源码

<div class="loadingSix">
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
</div>

加载7

在这里插入图片描述

css源码

.loadingSeven{
    width: 80px;
    height: 40px;
    margin: 0 auto;
    margin-top:100px;
}
.loadingSeven span{
    display: inline-block;
    width: 8px;
    height: 100%;
    border-radius: 4px;
    background: lightgreen;
    -webkit-animation: loadsaven 1.04s ease infinite;
}
@-webkit-keyframes loadsaven{
    0%,100%{
        height: 40px;
        background: lightgreen;
    }
    50%{
        height: 60px;
        margin-top: -20px;
        background: lightblue;
    }
}
.loadingSeven span:nth-child(2){
    -webkit-animation-delay:0.13s;
}
.loadingSeven span:nth-child(3){
    -webkit-animation-delay:0.26s;
}
.loadingSeven span:nth-child(4){
    -webkit-animation-delay:0.39s;
}
.loadingSeven span:nth-child(5){
    -webkit-animation-delay:0.52s;
}

html源码

<div class="loadingSeven">
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
</div>

加载8

在这里插入图片描述

css源码

.loadingEight{
    width: 80px;
    height: 80px;
    border-radius: 50%;
    margin: 0 auto;
    margin-top:100px;
    position: relative;
    border:5px solid lightgreen;
    -webkit-animation: turn 2s linear infinite;
}
.loadingEight span{
    display: inline-block;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: lightgreen;
    position: absolute;
    left: 50%;
    margin-top: -15px;
    margin-left: -15px;
    -webkit-animation: changeBgColor 2s linear infinite;
}
@-webkit-keyframes changeBgColor{
    0%{
        background: lightgreen;
    }
    100%{
        background: lightblue;
    }
}
@-webkit-keyframes turn{
    0%{
        -webkit-transform: rotate(0deg);
        border-color: lightgreen;
    }
    100%{
        -webkit-transform: rotate(360deg);
        border-color: lightblue;
    }
}

html源码

<div class="loadingEight">
    <span></span>
</div>

搬你想搬，盖你所需，码字不易，且行且珍惜！

孟繁胜游
关注
  • 38
    点赞
  • 踩
  • 223
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
28种纯CSS3炫酷loading加载动画特效
12-13
这是一组效果非常炫酷的纯CSS3 Loading加载动画特效。这组loading动画共有27种不同的效果。每一种loading动画都是通过CSS3的keyframes帧动画来完成的，每一个加载动画都构思新颖，效果非常的酷。
CSS3常用动画效果合集（最全），2024年最新阿里P8面试官都说太详细了
m0_63174811的博客
04-17 421
编程基础的初级开发者，计算机科学专业的学生，以及平时没怎么利用过数据结构与算法的开发人员希望复习这些概念为下次技术面试做准备。或者想学习一些计算机科学的基本概念，以优化代码，提高编程技能。这份笔记都是可以作为参考的。网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。需要这份系统化的资料的朋友，可以添加V获取：vip1024c （备注前端）一个人可以走的很快，但一群人才能走的更远！
使用CSS实现圆环流水灯、跑马灯、加载渐变动画效果
最新发布
weixin_52231116的博客
05-30 1622
本文主要使用CSS实现圆环流水灯、跑马灯、加载动画效果，以及介绍了常见的几种 transform 的变形函数
CSS3动画下载按钮特效
07-28
CSS3动画下载按钮特效是一款jQuery基于css3属性制作的点击下载动画按钮ui交互式特效。
【CSS加载动画特效】28种纯CSS实现的加载loading动态特效（附源码）
热门推荐
赏樱看雪撸代码
07-11 1万+
CSS3实现多种load加载效果，纯CSS3实现多种加载中效果，纯CSS3实现28种加载动态效果，页面实现loading效果，好看的loading动态特效，animation与transform的灵活应用。
css加载动画
weixin_41897680的博客
09-25 8186
前言 感觉css动画真的很有意思，奈何太菜，想不出来。下面的这些例子都是从网上找的，我自己手敲的。教程来源也会进行标注。 加载动画 动画1 教程：点此查看 效果图 代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta n
手把手实现 CSS 加载动画（一）
p1967914901的博客
08-07 4428
接下来便是旋转这三个圆，最方便的做法便是将容器进行旋转，但有一个地方需要注意，我们是要等三个圆移动到最远的位置后开始旋转。既然是加载动画，我们不可能让他在角落展示吧，我们当然需要将它水平垂直居中，水平垂直居中的方式有很多，这里就不再赘述了。现在你已经看到了三个黑乎乎的圆已经重合在容器中间（为了方便观察，我们给容器加了一个背景颜色）。好了，到现在我们已经完成了初始状态，接下来我们要为它们分别定义动画。接下来我们来绘制三个圆，首先一开始三个圆是在容器中间。，这就是动画开始时一个圆分裂成三个圆的停顿时刻；...
八种炫酷纯CSS加载动画代码
weixin_43923808的博客
05-12 7312
加载1CSS源码.title{ width: 100%; text-align: center; margin:60px 0; font-size: 18px; color: #999; } .loadingOne{ width: 80px; height: 40px; margin: 0 auto; } .loadingOne span{ display: inline-block; width: 8px; hei..
28种CSS3炫酷loading页面加载动画
12-11
28种CSS3炫酷loading页面加载动画特效代码，兼容主流浏览器 使用方法： 1、在head区域引入样式表文件demo.css和loaders.css 2、在你的网页中加入<!-- 代码 开始 --><!-- 代码 结束 -->注释区域代码即可...
3种炫酷纯CSS3预加载动画特效
12-13
"3种炫酷纯CSS3预加载动画特效"正是这样一组专为网页设计者准备的资源，利用CSS3的强大功能，无需JavaScript或其他额外的库，就能实现富有创意的加载效果。 首先，我们来看第一种预加载动画——翻书效果。这种效果...
10种炫酷的CSS3 loading加载动画特效
12-13
这10种炫酷的CSS3加载动画特效展示了CSS3的强大能力，包括但不限于以下技术： 1. **动画属性（Animation Properties）**：如`animation-name`定义动画的名称，`animation-duration`设置动画持续时间，`animation-...
纯CSS实现超炫酷网页动态加载中特效动画.zip
07-11
总的来说，纯CSS实现的超炫酷网页加载动画为网页设计师提供了丰富的工具箱，让他们能够在不增加额外性能负担的情况下，为用户提供更具吸引力的等待体验。开发者只需将这些预设的动画样式引入到自己的项目中，稍作...
一组舒服好看的css加载动画（复制就能用）
Wancc123的博客
03-23 1870
搬运几种好用的css加载动画，没有gif动画，大家手动cv一下看看，记得点赞收藏， 文章最后附上例子地址 第一种：方块翻滚 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <!-- <meta http-equiv="X-UA-Compatible" content="IE=edge"> --> <meta name="viewp
加载loading动画
qq_40289557的博客
08-22 7589
提起加载（loading）效果，想必大家都不会陌生，在目前的移动端、PC端、各类app均广泛使用，使用loading动画能显著提升用户的交互体检，尤其是在页面加载速度比较的慢的情况下，loading动画的作用就更加突出了。实现一个个性化的加载动画效果，并不难，其主要原理是使用css3动画属性-animation、结合transform属性即可
纯css 加载动画
weixin_54255895的博客
03-20 508
【代码】纯css 加载动画。
CSS3绘制8种超炫的加载动画
火雨(Nick)
04-20 1万+
CSS3绘制8种超炫的加载动画     逛前端开发网站的时候，偶尔发现一组非常炫酷的CSS3加载动画，遂迫不及待的做个Demo保存下来。         这些加载动画用到了CSS3的旋转transform属性，颜色透明度设置和伪元素操作等CSS技术。奇妙的组合，产生了意想不到的效果。         1.上下起伏波动的加载动画：          #loader1, #loade
简约CSS加载动画
weixin_53007319的博客
07-14 206
属性确定了转动中心点，正方形定在左下角，三个圆圈转点则是定在自身之外。容器作为父元素用于定位，正方形和三个圆圈通过CSS中。盒子作为圆圈蒙版层定位到容器中心，将中心部分遮掩。1.正方形和三个小原围绕盒子中心点转动。容器先转化为一个圆圈，后通过CSS中。2.遮掩外围多余部分。3.遮掩中心多余部分。
用css写一个页面打开时的炫酷动画效果
04-12
当页面打开时，可以使用CSS动画来制作炫酷的效果。例如，可以使用 keyframes 关键字来定义动画，然后使用 animation 属性来将动画应用到元素上。以下是一个 CSS 动画示例： ``` <style> .my-div { width: 100px; height: 100px; background-color: red; animation: flip 2s ease-in-out; } @keyframes flip { from { transform: rotateY(0deg); } to { transform: rotateY(360deg); } } </style> <div class="my-div"></div> ``` 这个例子中，当页面加载时，一个红色的正方形会从中心位置逐渐旋转，并在 2 秒钟内完成一次完整的 360 度旋转。你可以根据需要修改动画的细节，例如颜色、旋转方向和速度等等。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值