用CSS3 实现loading动画

最新推荐文章于 2023-07-11 11:07:51 发布

dengzhengguang

最新推荐文章于 2023-07-11 11:07:51 发布

阅读量820

点赞数 1

分类专栏： CSS3 文章标签： CSS3 loading动画

本文链接：https://blog.csdn.net/dengzhengguang/article/details/51815205

版权

本文介绍了如何利用CSS3的transform、transition和animation属性来制作loading动画，具体展示了转圈式的circle动画效果，并列举了一些常用的loading动画在线生成网站。

摘要由CSDN通过智能技术生成

CSS3中常用transform，transition，animation三个属性制作动画，而loading动画算是页面最常见的动画之一，下面就用之前提到的几个属性做两个简单的loading动画

1.转圈式的（circle）

css代码：

<pre name="code" class="css">.loading-circle{
	width:50px;
	height:50px;
	border:5px solid;
	border-color:#333 #333 transparent;
	border-radius:50%;
	animation:loading-circle 1s linear both infinite;
}


@keyframes loading-circle{
			0%{transform:rotate(0);}
			100%{transform:rotate(360deg);}
		}

html:

<div class="loading-circle"></div>

2.步进式的：

CSS：

.loading-step{
			width:95px;
			height:40px;
			font-size:0;
			overflow:hidden;
			white-space:nowrap;
			margin-top:20px;
			vertical-align:middle;
			
		}