注册

纯CSS3实现AJAX加载图标(Loading)动画效果

嗨豆壳技术文章 时间:2014-08-17 20:27:07 [ray]

使用ajax开发的时候经常要用到loading(加载中)效果,通常是使用图片实现,本文介绍如何使用纯CSS3实现AJAX加载图标(Loading)动画效果,效果简洁、超酷。

<html><head>
<title>纯CSS3实现AJAX加载图标(Loading)动画效果</title>
<style type="text/css">
.loading{ background: #fff;width: 120px;margin: 0 auto;}
.loader{
margin: 6% auto;
font-size: 10px;
position: relative;
text-indent: -9999px;
border: 16px solid #e7e7e7;
border-left: 16px solid #3AB4F1;
-webkit-animation: load 1.1s infinite linear;
animation: load 1.1s infinite linear;
}
.loader,.loader:after {
border-radius: 50%;
width: 80px;
height: 80px;
}
@-webkit-keyframes load {
	0% { -webkit-transform: rotate(0deg);transform: rotate(0deg); }
	100% {-webkit-transform: rotate(360deg);transform: rotate(360deg); }
}
@keyframes load {
	0% { -webkit-transform: rotate(0deg);transform: rotate(0deg); }
	100% { -webkit-transform: rotate(360deg);transform: rotate(360deg); }
}</style></body>
</head>
<h1>纯CSS3实现AJAX加载图标Loading动画效果,效果简洁、超酷</h1>
<body><div class="loading">
<div class="loader">加载中...</div>
</div></body>
</html>

运行效果

加载中...

标签

本文地址:https://www.hi-docs.com/article/52.html

上一篇:PHP header()函数用法详解(编码设置、页面跳转、文件下载)

下一篇:百度免费IP地址查询API,查询接口