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

最新推荐文章于 2024-03-21 09:11:28 发布

沐瑶家咸鱼

最新推荐文章于 2024-03-21 09:11:28 发布

阅读量922

点赞数

分类专栏： html css3特效文章标签： css3 loading动画

本文链接：https://blog.csdn.net/u014420690/article/details/89511375

版权

html 同时被 2 个专栏收录

2 篇文章 0 订阅

订阅专栏

css3特效

1 篇文章 0 订阅

订阅专栏

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

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

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

.最基本的旋转。
很明显6个白色圆点以半径r绕着中心不停的旋转
旋转速度。
可以看到，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

沐瑶家咸鱼

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
用css3实现一个简单的loading动画

在访问各种网站的时候我们经常会看到各式各样的加载动画，超级炫酷，有的是gif图片做成的，有的是svg做成的，有的是通过js控制dom做成的，在css3出现以后，好多都是纯css的，本着程序员造轮子的精神，自己决定用css实现自己网站的加载动画。效果如下（虽然不是很炫酷，嘿嘿）下面我们开始动手，在开始前，我们分析一下这个动画是如何形成的.最基本的旋转。很明显6个白色圆点以半径r绕着中心...
复制链接

扫一扫