用css3实现一个简单的loading动画

最新推荐文章于 2024-08-30 00:13:53 发布
最新推荐文章于 2024-08-30 00:13:53 发布
阅读量958 收藏 4
点赞数
分类专栏： html css3特效 文章标签： css3 loading动画
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u014420690/article/details/89511375
版权

在访问各种网站的时候我们经常会看到各式各样的加载动画，超级炫酷，有的是gif图片做成的，有的是svg做成的，有的是通过js控制dom做成的，在css3出现以后，好多都是纯css的，本着程序员造轮子的精神，自己决定用css实现自己网站的加载动画。效果如下（虽然不是很炫酷，嘿嘿）

效果图：
在这里插入图片描述

下面我们开始动手，在开始前，我们分析一下这个动画是如何形成的

  1. .最基本的旋转。
    很明显6个白色圆点以半径r绕着中心不停的旋转

  2. 旋转速度。
    可以看到，6个圆点之间距离不断变化，从窄到宽，过半后又慢慢变窄。根据速度v、时间t、距离l的关系（l=t(v1-v2)）,可以知道他们之间的速度是不一样的，并且从最前面一个依次递减，我们只需设置一个合适的值就好了。

如何实现

我们已经分析了动画如何实现的了，如何用html和css实现呢。
首先是白色的圆点，使用css的border-radius：宽度或者高度的一半；

   <div style="border-radius:3px;width:6px;height:6px;background:white;"></div>

然后是半径r和中心点，这里是将白点放入一个div中，将其高度设置为r，然后是中心点，使用absolute布局，设置bottom为容器的50%,left:50%

<div style="width:10px;height:10px;position:absolute;bottom:50%,left:50%;">
	<div style="border-radius:3px;width:6px;height:6px;background:white;margin:0px;"></div>
</div>

最后是动画使用css3的@keyframes
根据上面的分析，我们可以把6圆点的旋转值从180deg依次往前推一定间隔，这样，他们就会表现出不同的速度，
后半段通过控制动画的总时间一致，浏览器会自动调整期旋转速度。
实现如下，依次前推30deg

@keyframes myloading1{
0%{transform: rotate(0deg);opacity: 1}
50%{transform: rotate(180deg);opacity: 0.9}
100%{transform: rotate(360deg);opacity: 0.1}
}
@keyframes myloading2{
0%{transform: rotate(0deg);opacity: 1}
50%{transform: rotate(150deg);opacity: 0.85}
100%{transform: rotate(360deg);opacity: 0.1}
}
@keyframes myloading3{
0%{transform: rotate(0deg);opacity: 1}
50%{transform: rotate(120deg);opacity: 0.8}
100%{transform: rotate(360deg);opacity: 0.1}
}
@keyframes myloading4{
0%{transform: rotate(0deg);opacity: 1}
50%{transform: rotate(90deg);opacity: 0.75}
100%{transform: rotate(360deg);opacity: 0.1}
}
@keyframes myloading5{
0%{transform: rotate(0deg);opacity: 1}
50%{transform: rotate(60deg);opacity: 0.7}
100%{transform: rotate(360deg);opacity: 0.1}
}
@keyframes myloading6{
0%{transform: rotate(0deg);opacity: 1}
50%{transform: rotate(30deg);opacity: 0.65}
100%{transform: rotate(360deg);opacity: 0.1}
}

最后把动画加到div上，style="animation:myloading* 5s infinite linear;"

最终代码

<html>
<head>
<title>我的加载动画</title>
<style type="text/css">
	@keyframes myloading1{
	0%{transform: rotate(0deg);opacity: 1}
	50%{transform: rotate(180deg);opacity: 0.9}
	100%{transform: rotate(360deg);opacity: 0.1}
	}
	
	@keyframes myloading2{
	0%{transform: rotate(0deg);opacity: 1}
	50%{transform: rotate(150deg);opacity: 0.85}
	100%{transform: rotate(360deg);opacity: 0.1}
	}
	@keyframes myloading3{
	0%{transform: rotate(0deg);opacity: 1}
	50%{transform: rotate(120deg);opacity: 0.8}
	100%{transform: rotate(360deg);opacity: 0.1}
	}
	@keyframes myloading4{
	0%{transform: rotate(0deg);opacity: 1}
	50%{transform: rotate(90deg);opacity: 0.75}
	100%{transform: rotate(360deg);opacity: 0.1}
	}
	@keyframes myloading5{
	0%{transform: rotate(0deg);opacity: 1}
	50%{transform: rotate(60deg);opacity: 0.7}
	100%{transform: rotate(360deg);opacity: 0.1}
	}
	@keyframes myloading6{
	0%{transform: rotate(0deg);opacity: 1}
	50%{transform: rotate(30deg);opacity: 0.65}
	100%{transform: rotate(360deg);opacity: 0.1}
	}
	.dot-container{
		transform-origin:left bottom;
		left:50%;
		bottom:50%;
		position:absolute;
		width:20px;
		height:20px;
		animation-direction:normal;
	}
	.dot{
		width:6px;height:6px;border-radius:3px;background:white;
	}
</style>
</head>
<body style='background-color:black;opacity:0.5'>
	<div style="text-align:center;position:absolute;color:white;width:93px;height:93px;">
		<div style="animation: myloading1 2s linear infinite;" class="dot-container">
			<div class="dot"></div>
		</div>
		<div style="animation: myloading2 2s linear infinite;" class="dot-container">
			<div class="dot"></div>
		</div>
		<div style="animation: myloading3 2s linear infinite;" class="dot-container">
			<div class="dot"></div>
		</div>
		<div style="animation: myloading4 2s linear infinite;" class="dot-container">
			<div class="dot"></div>
		</div>
		<div style="animation: myloading5 2s linear infinite;" class="dot-container">
			<div class="dot"></div>
		</div>
		<div style="animation: myloading6 2s linear infinite;" class="dot-container">
			<div class="dot"></div>
		</div>
	</div>
</body>
</html>

我的博客：http://blog.timefluid.cn

沐瑶家咸鱼
关注
专栏目录
CSS3实现简单的Loading...动画
HHH_LLL的博客
08-17 345
前言：很久没更新，最近项目中做了个简单的Loading效果，上传供大家查阅或找灵感。 效果：其实是动态的效果，大家可以自己去尝试 代码： HTML <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> ...
loading css3动画
chenxi1025的博客
01-05 549
现在很多的网站网页在加载的时候都有一个加载的动画标识，有些事用gif动画图片，有些使用存css3写的，还有一些是使用js实现的，今天我就来用存css3来写一个加载的动画效果。 该效果使用咯css3的transform 里面的scale(缩放)、rotate(旋转)、translate(位移)，还使用了css3的动画keframes    animation。 思路： 1.定义一个大盒子，来装
CSS特效 —— 旋转的Loading状态
最新发布
一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身"农奴"把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！
08-30 1463
通过调整可以改变动画的速度。可以通过更改中的颜色值来自定义颜色方案。
CSS3-loading动画（三）
weixin_30470857的博客
07-12 197
分享继续，图片看得不真切 在线演示demo：http://liyunpei.xyz/loading.html 十一、效果十一 四个小球分别包含于四个正方形div，将小球相对于正方形定位（top：0；left：0），将方形div设置旋转，使小球分别位于四角，然后使用关键帧动画控制小球在当前位置与靠近中心点的位置之间来回移动 {animation: flor_move 1s 0s...
CSS：一个简单的loading动画
QD的博客
05-19 709
<div id="circle"></div> <div id="inner"> <div id="spiner"></div> <div id="filler"></div> <div id="masker"></div> </div>#inner { position: absolute; left: 24px; top: 24px; width: 100px;
css3 实现loading动画
花神的博客
09-07 587
&lt;!DOCTYPE html&gt; &lt;html lang="zh"&gt; &lt;head&gt; &lt;meta charset="UTF-8" /&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=1.0" /&gt;
css3实现加载loading特效小动画效果
06-12
例如，一个简单的圆形旋转加载动画可以通过以下方式定义： ```css @keyframes rotating { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } ``` 接下来，我们需要一个HTML元素来承载...
纯CSS3实现的8种Loading动画效果
09-25
本例中，使用了一个简单的`<div>`元素，并为其赋予了一个类名`loader`，作为所有动画的容器。 ```html 加载中 ``` 上述代码中，`class="loader"`将被用来定义动画的样式规则。 ### 知识点二：CSS动画关键帧 CSS3...
CSS实现一个简单loading动画效果
12-30
曾经以为，loading的制作需要一些比较高深的web动画技术，后来发现大多数loading都可以用“障眼法”做出来。比如一个旋转的圆圈，并不都是将gif图放进去，有些就是画个静止图像，然后让它旋转就完了。gif图也可以，...
使用css3实现超炫的loading加载动画效果
09-25
总结起来，使用CSS3实现超炫的loading加载动画效果，开发者可以通过创建自定义的关键帧动画和利用变换属性来实现各种动态效果。这不仅可以提升网站或应用的视觉吸引力，还能为用户提供反馈，让他们知道内容正在加载...
css3实现loading动画
chenzfyy的博客
10-19 629
Document .box{width:100%;padding:3%;box-sizing:border-box;overflow:hidden} .box .loader{width:30%;float:left;height:200px;margin-right:3%;border:1px #ccc solid;box-sizing:border-box;display:flex
CSS3动画之DIY Loading动画
12-13
首先要知道什么是CSS3动画？然后才能做出自己想要的动画效果。下面会通过3个简单的Loading动画效果来对CSS3 animation动画做一个简单介绍，希望对你有用。 动画是使元素从一种样式逐渐变化为另一种样式的效果。 您可以改变任意多的样式任意多的次数。 使用百分比来规定变化发生的时间，或用关键词 "from" 和 "to"，等同于 0% 和 100%。 0% 是动画的开始，100% 是动画的完成。 要创建CSS3动画，那么首先就要了解@keyframes规则。@keyframes规则是创建动画。 @keyframes规则内指定一个CSS样式和动画将逐步从目前的样式更改为新的样式。 当在
CSS3-loading动画
liuhao9999的博客
07-28 307
代码】CSS3-loading动画。
css3-loading动画
qq_41481924的博客
07-24 304
1.源码 &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=, initial-scale=1.0"&gt; &lt;meta
CSS3--loading动画
liuhao9999的博客
07-28 275
代码】CSS3--loading动画。
CSS3 实现 loading 动画效果
求知若饥，谦卑若愚
05-26 1885
CSS3 实现 loading 效果
用CSS3 实现loading动画
dengzhengguang的博客
07-03 852
用transform和animation实现的页面loading动画
CSS3实现创意Loading动画示例解析
"这篇教程介绍了如何使用CSS3轻松创建清新风格的Loading加载动画，通过两个具体实例展示了如何利用CSS3的动画（animation）和选择器（nth-child）特性来实现不同效果的Loading效果。" 在网页设计中，加载动画...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值