摘要:
下文讲述使用css代码制作一个”点状圆形的加载等待效果”的方法分享,如下所示:
下午将通过示例的方式讲述其方法，如下所示:
实现思路:
1.绘制5个点状元素
2.设置动画，对元素进行旋转
即可模拟出“加载等待效果”
例:
css3代码编写一个“点状圆形的加载等待效果”的示例分析
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.maomao365.com/" />
<title>猫猫小屋</title>
<style>
/*css reset */
body, p, div, ol, ul, li, dl, dt, dd, h1, h2, h3, h4, h5, h6, form, input, iframe, nav {
margin: 0;
padding: 0;
}
.wrapper {
width: 1000px;
margin: 200px auto;
}
.windows8 {
position: relative;
width: 44px;
height: 44px;
margin: auto;
}
.windows8 .wBall {
position: absolute;
width: 42px;
height: 42px;
opacity: 0;
transform: rotate(225deg);
-o-transform: rotate(225deg);
-ms-transform: rotate(225deg);
-webkit-transform: rotate(225deg);
-moz-transform: rotate(225deg);
animation: orbit 3.6325s infinite;
-o-animation: orbit 3.6325s infinite;
-webkit-animation: orbit 3.6325s infinite;
-moz-animation: orbit 3.6325s infinite;
}
.windows8 .wBall .wInnerBall {
position: absolute;
width: 5px;
height: 5px;
background: rgb(0,0,0);
left: 0px;
top: 0px;
border-radius: 5px;
}
.windows8 #wBall_1 {
animation-delay: 0.796s;
-o-animation-delay: 0.796s;
-webkit-animation-delay: 0.796s;
-moz-animation-delay: 0.796s;
}
.windows8 #wBall_2 {
animation-delay: 0.153s;
-o-animation-delay: 0.153s;
-webkit-animation-delay: 0.153s;
-moz-animation-delay: 0.153s;
}
.windows8 #wBall_3 {
animation-delay: 0.3165s;
-o-animation-delay: 0.3165s;
-webkit-animation-delay: 0.3165s;
-moz-animation-delay: 0.3165s;
}
.windows8 #wBall_4 {
animation-delay: 0.4695s;
-o-animation-delay: 0.4695s;
-webkit-animation-delay: 0.4695s;
-moz-animation-delay: 0.4695s;
}
.windows8 #wBall_5 {
animation-delay: 0.633s;
-o-animation-delay: 0.633s;
-webkit-animation-delay: 0.633s;
-moz-animation-delay: 0.633s;
}
@keyframes orbit {
0% {
opacity: 1;
z-index: 99;
transform: rotate(180deg);
animation-timing-function: ease-out;
}
7% {
opacity: 1;
transform: rotate(300deg);
animation-timing-function: linear;
}
30% {
opacity: 1;
transform: rotate(410deg);
animation-timing-function: ease-in-out;
}
39% {
opacity: 1;
transform: rotate(645deg);
animation-timing-function: linear;
}
70% {
opacity: 1;
transform: rotate(770deg);
animation-timing-function: ease-out;
}
75% {
opacity: 1;
transform: rotate(900deg);
animation-timing-function: ease-out;
}
76% {
opacity: 0;
transform: rotate(900deg);
}
100% {
opacity: 0;
transform: rotate(900deg);
}
}
@-o-keyframes orbit {
0% {
opacity: 1;
z-index: 99;
-o-transform: rotate(180deg);
-o-animation-timing-function: ease-out;
}
7% {
opacity: 1;
-o-transform: rotate(300deg);
-o-animation-timing-function: linear;
}
30% {
opacity: 1;
-o-transform: rotate(410deg);
-o-animation-timing-function: ease-in-out;
}
39% {
opacity: 1;
-o-transform: rotate(645deg);
-o-animation-timing-function: linear;
}
70% {
opacity: 1;
-o-transform: rotate(770deg);
-o-animation-timing-function: ease-out;
}
75% {
opacity: 1;
-o-transform: rotate(900deg);
-o-animation-timing-function: ease-out;
}
76% {
opacity: 0;
-o-transform: rotate(900deg);
}
100% {
opacity: 0;
-o-transform: rotate(900deg);
}
}
@-ms-keyframes orbit {
0% {
opacity: 1;
z-index: 99;
-ms-transform: rotate(180deg);
}
7% {
opacity: 1;
-ms-transform: rotate(300deg);
}
30% {
opacity: 1;
-ms-transform: rotate(410deg);
}
39% {
opacity: 1;
-ms-transform: rotate(645deg);
}
70% {
opacity: 1;
-ms-transform: rotate(770deg);
}
75% {
opacity: 1;
-ms-transform: rotate(900deg);
}
76% {
opacity: 0;
-ms-transform: rotate(900deg);
}
100% {
opacity: 0;
-ms-transform: rotate(900deg);
}
}
@-webkit-keyframes orbit {
0% {
opacity: 1;
z-index: 99;
-webkit-transform: rotate(180deg);
-webkit-animation-timing-function: ease-out;
}
7% {
opacity: 1;
-webkit-transform: rotate(300deg);
-webkit-animation-timing-function: linear;
}
30% {
opacity: 1;
-webkit-transform: rotate(410deg);
-webkit-animation-timing-function: ease-in-out;
}
39% {
opacity: 1;
-webkit-transform: rotate(645deg);
-webkit-animation-timing-function: linear;
}
70% {
opacity: 1;
-webkit-transform: rotate(770deg);
-webkit-animation-timing-function: ease-out;
}
75% {
opacity: 1;
-webkit-transform: rotate(900deg);
-webkit-animation-timing-function: ease-out;
}
76% {
opacity: 0;
-webkit-transform: rotate(900deg);
}
100% {
opacity: 0;
-webkit-transform: rotate(900deg);
}
}
@-moz-keyframes orbit {
0% {
opacity: 1;
z-index: 99;
-moz-transform: rotate(180deg);
-moz-animation-timing-function: ease-out;
}
7% {
opacity: 1;
-moz-transform: rotate(300deg);
-moz-animation-timing-function: linear;
}
30% {
opacity: 1;
-moz-transform: rotate(410deg);
-moz-animation-timing-function: ease-in-out;
}
39% {
opacity: 1;
-moz-transform: rotate(645deg);
-moz-animation-timing-function: linear;
}
70% {
opacity: 1;
-moz-transform: rotate(770deg);
-moz-animation-timing-function: ease-out;
}
75% {
opacity: 1;
-moz-transform: rotate(900deg);
-moz-animation-timing-function: ease-out;
}
76% {
opacity: 0;
-moz-transform: rotate(900deg);
}
100% {
opacity: 0;
-moz-transform: rotate(900deg);
}
}
</style>
</head>
<body>
<div class="wrapper">
<div class="windows8">
<div class="wBall" id="wBall_1">
<div class="wInnerBall"></div>
</div>
<div class="wBall" id="wBall_2">
<div class="wInnerBall"></div>
</div>
<div class="wBall" id="wBall_3">
<div class="wInnerBall"></div>
</div>
<div class="wBall" id="wBall_4">
<div class="wInnerBall"></div>
</div>
<div class="wBall" id="wBall_5">
<div class="wInnerBall"></div>
</div>
</div>
</div>
</body>
</html>
css3实现一个点状圆形进度条的示例分享