效果图截图如下：
直接上代码：
html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>css3实现loading效果</title>
<link rel="stylesheet" type="text/css" href="css3-loading.css">
</head>
<body>
<div class="loading-box">
<div class="loading"></div>
<p class="font">Loading</p>
</div>
</body>
</html>
css
.loading-box{
width: 200px;
height: 200px;
position: relative;
margin: 100px auto 0 auto;
}
.font{
width: 100%;
height: 40px;
font-size: 20px;
font-family: Arial;
position: absolute;
text-align: center;
line-height: 40px;
left: 0;
top: 50%;
margin-top: -20px;
color: green;
}
.loading{
width: 170px;
height: 170px;
margin: 10px auto 10px auto;
border-radius: 100%;
border-left:10px solid #eeeeee;
border-bottom:10px solid #eeeeee;
border-right:10px solid green;
border-top:10px solid green;
-webkit-animation: loading .6s infinite linear;
-moz-animation: loading .6s infinite linear;
-ms-animation: loading .6s infinite linear;
-o-animation: loading .6s infinite linear;
animation: loading .6s infinite linear;
}
@keyframes "loading" {
from {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
}
to {
-webkit-transform: rotate(359deg);
-moz-transform: rotate(359deg);
-o-transform: rotate(359deg);
-ms-transform: rotate(359deg);
transform: rotate(359deg);
}
}
@-moz-keyframes loading {
from {
-moz-transform: rotate(0deg);
transform: rotate(0deg);
}
to {
-moz-transform: rotate(359deg);
transform: rotate(359deg);
}
}
@-webkit-keyframes "loading" {
from {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
to {
-webkit-transform: rotate(359deg);
transform: rotate(359deg);
}
}
@-ms-keyframes "loading" {
from {
-ms-transform: rotate(0deg);
transform: rotate(0deg);
}
to {
-ms-transform: rotate(359deg);
transform: rotate(359deg);
}
}
@-o-keyframes "loading" {
from {
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
to {
-o-transform: rotate(359deg);
transform: rotate(359deg);
}
}
animation
语法
animation: name duration timing-function delay iteration-count direction;
定义和用法
animation 属性是一个简写属性，用于设置六个动画属性：
- animation-name:规定需要绑定到选择器的keyframe名称
- animation-duration：规定完成动画所花费的时间，以秒或毫秒计
- animation-timing-function：规定动画的速度曲线
- animation-delay：规定在动画开始之前的延迟
- animation-iteration-count：规定动画开始之前的延迟
- animation-direction：规定是否应该轮流反向播放动画
animation-timing-function的属性值
- linear ：动画从头到尾速度是相同的
- ease ：默认。动画以低速开始，然后加快，在结束前变慢。
- ease-in ：动画以低速开始。
- ease-out ：动画以低速结束。
- ease-in-out ：动画以低速开始和结束。
- cubic-bezier(n,n,n,n) ：在cubic-bezier函数中自己的值。该值是从0到1的数值。
兼容性
- IE10及Firefox、Opera支持animation属性。
- Safari和Chrome支持替代的-webkit-animation属性。
- IE9及其以下版本不支持animation属性。
请始终规定animation-duration属性，否则时长为0，就不会播放动画了。
@keyframes
语法
@keyframes animationname {keyframes-selector {css-styles;}}
定义和用法
- animationname：定义动画的名称。
- keyframes-selector：动画时长的百分比。
- css-styles:一个或多个合法的css样式属性。
keyframes-selector合法值
- 0-100%
- form（与0%相同）
- to（与100%相同）
兼容性
- 目前浏览器都不支持 @keyframes 规则。
- Firefox 支持替代的 @-moz-keyframes 规则。
- Opera 支持替代的 @-o-keyframes 规则。
- Safari 和 Chrome 支持替代的 @-webkit-keyframes 规则。