CSS3实现Loading效果
使用Loding的gif图，每一帧图片的外层会有白色描边。所以如果必须使用gif图的话，请将背景色设置为白色。
你也尝试用以下方法，使用css来实现loading的效果
1.
适用于pc端。在移动端上会缩放的很小。
html：
<div class="weui_loading_toast" style="display: block;" id="loading">
<div class="weui_mask_transparent"></div>
<div class="weui_toast">
<div class="weui_loading">
<div class="weui_loading_leaf weui_loading_leaf_0"></div>
<div class="weui_loading_leaf weui_loading_leaf_1"></div>
<div class="weui_loading_leaf weui_loading_leaf_2"></div>
<div class="weui_loading_leaf weui_loading_leaf_3"></div>
<div class="weui_loading_leaf weui_loading_leaf_4"></div>
<div class="weui_loading_leaf weui_loading_leaf_5"></div>
<div class="weui_loading_leaf weui_loading_leaf_6"></div>
<div class="weui_loading_leaf weui_loading_leaf_7"></div>
<div class="weui_loading_leaf weui_loading_leaf_8"></div>
<div class="weui_loading_leaf weui_loading_leaf_9"></div>
<div class="weui_loading_leaf weui_loading_leaf_10"></div>
<div class="weui_loading_leaf weui_loading_leaf_11"></div>
</div>
<p class="weui_toast_content">评论加载中</p>
</div>
</div>
css:
.weui_mask_transparent {
position: fixed;
z-index: 1001;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
.weui_loading_toast .weui_toast {
width: 7.6rem;
min-height: 7.6rem;
}
.weui_toast {
position: fixed;
z-index: 1003;
top: 180px;
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
background: rgba(40, 40, 40, 0.75);
text-align: center;
border-radius: 5px;
color: #FFFFFF;
}
.weui_toast_content {
margin: 15px 0;
}
.weui_loading_toast .weui_toast_content {
margin-top: 64%;
font-size: 14px;
}
.weui_loading {
position: absolute;
width: 0px;
z-index: 2000000000;
left: 50%;
top: 38%;
}
.weui_loading_leaf {
position: absolute;
top: -1px;
opacity: 0.25;
}
.weui_loading_leaf:before {
content: " ";
position: absolute;
width: 8.14px;
height: 2.08px;
background: #d1d1d5;
box-shadow: rgba(0, 0, 0, 0.0980392) 0px 0px 1px;
border-radius: 1px;
-webkit-transform-origin: left 50% 0px;
-ms-transform-origin: left 50% 0px;
transform-origin: left 50% 0px;
}
.weui_loading_leaf_0 {
-webkit-animation: opacity-60-25-0-12 1.25s linear infinite;
animation: opacity-60-25-0-12 1.25s linear infinite;
}
.weui_loading_leaf_0:before {
-webkit-transform: rotate(0deg) translate(7.92px, 0px);
-ms-transform: rotate(0deg) translate(7.92px, 0px);
transform: rotate(0deg) translate(7.92px, 0px);
}
.weui_loading_leaf_1 {
-webkit-animation: opacity-60-25-1-12 1.25s linear infinite;
animation: opacity-60-25-1-12 1.25s linear infinite;
}
.weui_loading_leaf_1:before {
-webkit-transform: rotate(30deg) translate(7.92px, 0px);
-ms-transform: rotate(30deg) translate(7.92px, 0px);
transform: rotate(30deg) translate(7.92px, 0px);
}
.weui_loading_leaf_2 {
-webkit-animation: opacity-60-25-2-12 1.25s linear infinite;
animation: opacity-60-25-2-12 1.25s linear infinite;
}
.weui_loading_leaf_2:before {
-webkit-transform: rotate(60deg) translate(7.92px, 0px);
-ms-transform: rotate(60deg) translate(7.92px, 0px);
transform: rotate(60deg) translate(7.92px, 0px);
}
.weui_loading_leaf_3 {
-webkit-animation: opacity-60-25-3-12 1.25s linear infinite;
animation: opacity-60-25-3-12 1.25s linear infinite;
}
.weui_loading_leaf_3:before {
-webkit-transform: rotate(90deg) translate(7.92px, 0px);
-ms-transform: rotate(90deg) translate(7.92px, 0px);
transform: rotate(90deg) translate(7.92px, 0px);
}
.weui_loading_leaf_4 {
-webkit-animation: opacity-60-25-4-12 1.25s linear infinite;
animation: opacity-60-25-4-12 1.25s linear infinite;
}
.weui_loading_leaf_4:before {
-webkit-transform: rotate(120deg) translate(7.92px, 0px);
-ms-transform: rotate(120deg) translate(7.92px, 0px);
transform: rotate(120deg) translate(7.92px, 0px);
}
.weui_loading_leaf_5 {
-webkit-animation: opacity-60-25-5-12 1.25s linear infinite;
animation: opacity-60-25-5-12 1.25s linear infinite;
}
.weui_loading_leaf_5:before {
-webkit-transform: rotate(150deg) translate(7.92px, 0px);
-ms-transform: rotate(150deg) translate(7.92px, 0px);
transform: rotate(150deg) translate(7.92px, 0px);
}
.weui_loading_leaf_6 {
-webkit-animation: opacity-60-25-6-12 1.25s linear infinite;
animation: opacity-60-25-6-12 1.25s linear infinite;
}
.weui_loading_leaf_6:before {
-webkit-transform: rotate(180deg) translate(7.92px, 0px);
-ms-transform: rotate(180deg) translate(7.92px, 0px);
transform: rotate(180deg) translate(7.92px, 0px);
}
.weui_loading_leaf_7 {
-webkit-animation: opacity-60-25-7-12 1.25s linear infinite;
animation: opacity-60-25-7-12 1.25s linear infinite;
}
.weui_loading_leaf_7:before {
-webkit-transform: rotate(210deg) translate(7.92px, 0px);
-ms-transform: rotate(210deg) translate(7.92px, 0px);
transform: rotate(210deg) translate(7.92px, 0px);
}
.weui_loading_leaf_8 {
-webkit-animation: opacity-60-25-8-12 1.25s linear infinite;
animation: opacity-60-25-8-12 1.25s linear infinite;
}
.weui_loading_leaf_8:before {
-webkit-transform: rotate(240deg) translate(7.92px, 0px);
-ms-transform: rotate(240deg) translate(7.92px, 0px);
transform: rotate(240deg) translate(7.92px, 0px);
}
.weui_loading_leaf_9 {
-webkit-animation: opacity-60-25-9-12 1.25s linear infinite;
animation: opacity-60-25-9-12 1.25s linear infinite;
}
.weui_loading_leaf_9:before {
-webkit-transform: rotate(270deg) translate(7.92px, 0px);
-ms-transform: rotate(270deg) translate(7.92px, 0px);
transform: rotate(270deg) translate(7.92px, 0px);
}
.weui_loading_leaf_10 {
-webkit-animation: opacity-60-25-10-12 1.25s linear infinite;
animation: opacity-60-25-10-12 1.25s linear infinite;
}
.weui_loading_leaf_10:before {
-webkit-transform: rotate(300deg) translate(7.92px, 0px);
-ms-transform: rotate(300deg) translate(7.92px, 0px);
transform: rotate(300deg) translate(7.92px, 0px);
}
.weui_loading_leaf_11 {
-webkit-animation: opacity-60-25-11-12 1.25s linear infinite;
animation: opacity-60-25-11-12 1.25s linear infinite;
}
.weui_loading_leaf_11:before {
-webkit-transform: rotate(330deg) translate(7.92px, 0px);
-ms-transform: rotate(330deg) translate(7.92px, 0px);
transform: rotate(330deg) translate(7.92px, 0px);
}
@-webkit-keyframes opacity-60-25-0-12 {
0% {
opacity: 0.25;
}
0.01% {
opacity: 0.25;
}
0.02% {
opacity: 1;
}
60.01% {
opacity: 0.25;
}
100% {
opacity: 0.25;
}
}
@-webkit-keyframes opacity-60-25-1-12 {
0% {
opacity: 0.25;
}
8.34333% {
opacity: 0.25;
}
8.35333% {
opacity: 1;
}
68.3433% {
opacity: 0.25;
}
100% {
opacity: 0.25;
}
}
@-webkit-keyframes opacity-60-25-2-12 {
0% {
opacity: 0.25;
}
16.6767% {
opacity: 0.25;
}
16.6867% {
opacity: 1;
}
76.6767% {
opacity: 0.25;
}
100% {
opacity: 0.25;
}
}
@-webkit-keyframes opacity-60-25-3-12 {
0% {
opacity: 0.25;
}
25.01% {
opacity: 0.25;
}
25.02% {
opacity: 1;
}
85.01% {
opacity: 0.25;
}
100% {
opacity: 0.25;
}
}
@-webkit-keyframes opacity-60-25-4-12 {
0% {
opacity: 0.25;
}
33.3433% {
opacity: 0.25;
}
33.3533% {
opacity: 1;
}
93.3433% {
opacity: 0.25;
}
100% {
opacity: 0.25;
}
}
@-webkit-keyframes opacity-60-25-5-12 {
0% {
opacity: 0.270958333333333;
}
41.6767% {
opacity: 0.25;
}
41.6867% {
opacity: 1;
}
1.67667% {
opacity: 0.25;
}
100% {
opacity: 0.270958333333333;
}
}
@-webkit-keyframes opacity-60-25-6-12 {
0% {
opacity: 0.375125;
}
50.01% {
opacity: 0.25;
}
50.02% {
opacity: 1;
}
10.01% {
opacity: 0.25;
}
100% {
opacity: 0.375125;
}
}
@-webkit-keyframes opacity-60-25-7-12 {
0% {
opacity: 0.479291666666667;
}
58.3433% {
opacity: 0.25;
}
58.3533% {
opacity: 1;
}
18.3433% {
opacity: 0.25;
}
100% {
opacity: 0.479291666666667;
}
}
@-webkit-keyframes opacity-60-25-8-12 {
0% {
opacity: 0.583458333333333;
}
66.6767% {
opacity: 0.25;
}
66.6867% {
opacity: 1;
}
26.6767% {
opacity: 0.25;
}
100% {
opacity: 0.583458333333333;
}
}
@-webkit-keyframes opacity-60-25-9-12 {
0% {
opacity: 0.687625;
}
75.01% {
opacity: 0.25;
}
75.02% {
opacity: 1;
}
35.01% {
opacity: 0.25;
}
100% {
opacity: 0.687625;
}
}
@-webkit-keyframes opacity-60-25-10-12 {
0% {
opacity: 0.791791666666667;
}
83.3433% {
opacity: 0.25;
}
83.3533% {
opacity: 1;
}
43.3433% {
opacity: 0.25;
}
100% {
opacity: 0.791791666666667;
}
}
@-webkit-keyframes opacity-60-25-11-12 {
0% {
opacity: 0.895958333333333;
}
91.6767% {
opacity: 0.25;
}
91.6867% {
opacity: 1;
}
51.6767% {
opacity: 0.25;
}
100% {
opacity: 0.895958333333333;
}
}
1.1 如果想用于移动端，需要引入淘宝的flexible.min.js，并用下面的css
css：
.weui_mask_transparent {
position: fixed;
z-index: 1001;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
.weui_loading_toast .weui_toast {
width: 2.5rem;
min-height: 2.5rem;
}
.weui_toast {
position: fixed;
z-index: 1003;
top: 50%;
left: 50%;
-webkit-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
background: rgba(40, 40, 40, 0.75);
text-align: center;
border-radius: 5px;
color: #FFFFFF;
}
.weui_toast_content {
margin: 0.234375rem 0;
}
.weui_loading_toast .weui_toast_content {
margin-top: 64%;
font-size: 0.35rem;
}
.weui_loading {
position: absolute;
width: 0px;
z-index: 2000000000;
left: 50%;
top: 38%;
}
.weui_loading_leaf {
position: absolute;
top: -0.015625rem;
opacity: 0.25;
}
.weui_loading_leaf:before {
content: " ";
position: absolute;
width: 0.2271875rem;
height: 0.0625rem;
background: #d1d1d5;
box-shadow: rgba(0, 0, 0, 0.0980392) 0px 0px 0.015625rem;
border-radius: -0.015625rem;
-webkit-transform-origin: left 50% 0px;
-ms-transform-origin: left 50% 0px;
transform-origin: left 50% 0px;
}
.weui_loading_leaf_0 {
-webkit-animation: opacity-60-25-0-12 1.25s linear infinite;
animation: opacity-60-25-0-12 1.25s linear infinite;
}
.weui_loading_leaf_0:before {
-webkit-transform: rotate(0deg) translate(0.12375rem, 0px);
-ms-transform: rotate(0deg) translate(0.12375rem, 0px);
transform: rotate(0deg) translate(0.12375rem, 0px);
}
.weui_loading_leaf_1 {
-webkit-animation: opacity-60-25-1-12 1.25s linear infinite;
animation: opacity-60-25-1-12 1.25s linear infinite;
}
.weui_loading_leaf_1:before {
-webkit-transform: rotate(30deg) translate(0.12375rem, 0px);
-ms-transform: rotate(30deg) translate(0.12375rem, 0px);
transform: rotate(30deg) translate(0.12375rem, 0px);
}
.weui_loading_leaf_2 {
-webkit-animation: opacity-60-25-2-12 1.25s linear infinite;
animation: opacity-60-25-2-12 1.25s linear infinite;
}
.weui_loading_leaf_2:before {
-webkit-transform: rotate(60deg) translate(0.12375rem, 0px);
-ms-transform: rotate(60deg) translate(0.12375rem, 0px);
transform: rotate(60deg) translate(0.12375rem, 0px);
}
.weui_loading_leaf_3 {
-webkit-animation: opacity-60-25-3-12 1.25s linear infinite;
animation: opacity-60-25-3-12 1.25s linear infinite;
}
.weui_loading_leaf_3:before {
-webkit-transform: rotate(90deg) translate(0.12375rem, 0px);
-ms-transform: rotate(90deg) translate(0.12375rem, 0px);
transform: rotate(90deg) translate(0.12375rem, 0px);
}
.weui_loading_leaf_4 {
-webkit-animation: opacity-60-25-4-12 1.25s linear infinite;
animation: opacity-60-25-4-12 1.25s linear infinite;
}
.weui_loading_leaf_4:before {
-webkit-transform: rotate(120deg) translate(0.12375rem, 0px);
-ms-transform: rotate(120deg) translate(0.12375rem, 0px);
transform: rotate(120deg) translate(0.12375rem, 0px);
}
.weui_loading_leaf_5 {
-webkit-animation: opacity-60-25-5-12 1.25s linear infinite;
animation: opacity-60-25-5-12 1.25s linear infinite;
}
.weui_loading_leaf_5:before {
-webkit-transform: rotate(150deg) translate(0.12375rem, 0px);
-ms-transform: rotate(150deg) translate(0.12375rem, 0px);
transform: rotate(150deg) translate(0.12375rem, 0px);
}
.weui_loading_leaf_6 {
-webkit-animation: opacity-60-25-6-12 1.25s linear infinite;
animation: opacity-60-25-6-12 1.25s linear infinite;
}
.weui_loading_leaf_6:before {
-webkit-transform: rotate(180deg) translate(0.12375rem, 0px);
-ms-transform: rotate(180deg) translate(0.12375rem, 0px);
transform: rotate(180deg) translate(0.12375rem, 0px);
}
.weui_loading_leaf_7 {
-webkit-animation: opacity-60-25-7-12 1.25s linear infinite;
animation: opacity-60-25-7-12 1.25s linear infinite;
}
.weui_loading_leaf_7:before {
-webkit-transform: rotate(210deg) translate(0.12375rem, 0px);
-ms-transform: rotate(210deg) translate(0.12375rem, 0px);
transform: rotate(210deg) translate(0.12375rem, 0px);
}
.weui_loading_leaf_8 {
-webkit-animation: opacity-60-25-8-12 1.25s linear infinite;
animation: opacity-60-25-8-12 1.25s linear infinite;
}
.weui_loading_leaf_8:before {
-webkit-transform: rotate(240deg) translate(0.12375rem, 0px);
-ms-transform: rotate(240deg) translate(0.12375rem, 0px);
transform: rotate(240deg) translate(0.12375rem, 0px);
}
.weui_loading_leaf_9 {
-webkit-animation: opacity-60-25-9-12 1.25s linear infinite;
animation: opacity-60-25-9-12 1.25s linear infinite;
}
.weui_loading_leaf_9:before {
-webkit-transform: rotate(270deg) translate(0.12375rem, 0px);
-ms-transform: rotate(270deg) translate(0.12375rem, 0px);
transform: rotate(270deg) translate(0.12375rem, 0px);
}
.weui_loading_leaf_10 {
-webkit-animation: opacity-60-25-10-12 1.25s linear infinite;
animation: opacity-60-25-10-12 1.25s linear infinite;
}
.weui_loading_leaf_10:before {
-webkit-transform: rotate(300deg) translate(0.12375rem, 0px);
-ms-transform: rotate(300deg) translate(0.12375rem, 0px);
transform: rotate(300deg) translate(0.12375rem, 0px);
}
.weui_loading_leaf_11 {
-webkit-animation: opacity-60-25-11-12 1.25s linear infinite;
animation: opacity-60-25-11-12 1.25s linear infinite;
}
.weui_loading_leaf_11:before {
-webkit-transform: rotate(330deg) translate(0.12375rem, 0px);
-ms-transform: rotate(330deg) translate(0.12375rem, 0px);
transform: rotate(330deg) translate(0.12375rem, 0px);
}
@-webkit-keyframes opacity-60-25-0-12 {
0% {
opacity: 0.25;
}
0.01% {
opacity: 0.25;
}
0.02% {
opacity: 1;
}
60.01% {
opacity: 0.25;
}
100% {
opacity: 0.25;
}
}
@-webkit-keyframes opacity-60-25-1-12 {
0% {
opacity: 0.25;
}
8.34333% {
opacity: 0.25;
}
8.35333% {
opacity: 1;
}
68.3433% {
opacity: 0.25;
}
100% {
opacity: 0.25;
}
}
@-webkit-keyframes opacity-60-25-2-12 {
0% {
opacity: 0.25;
}
16.6767% {
opacity: 0.25;
}
16.6867% {
opacity: 1;
}
76.6767% {
opacity: 0.25;
}
100% {
opacity: 0.25;
}
}
@-webkit-keyframes opacity-60-25-3-12 {
0% {
opacity: 0.25;
}
25.01% {
opacity: 0.25;
}
25.02% {
opacity: 1;
}
85.01% {
opacity: 0.25;
}
100% {
opacity: 0.25;
}
}
@-webkit-keyframes opacity-60-25-4-12 {
0% {
opacity: 0.25;
}
33.3433% {
opacity: 0.25;
}
33.3533% {
opacity: 1;
}
93.3433% {
opacity: 0.25;
}
100% {
opacity: 0.25;
}
}
@-webkit-keyframes opacity-60-25-5-12 {
0% {
opacity: 0.270958333333333;
}
41.6767% {
opacity: 0.25;
}
41.6867% {
opacity: 1;
}
1.67667% {
opacity: 0.25;
}
100% {
opacity: 0.270958333333333;
}
}
@-webkit-keyframes opacity-60-25-6-12 {
0% {
opacity: 0.375125;
}
50.01% {
opacity: 0.25;
}
50.02% {
opacity: 1;
}
10.01% {
opacity: 0.25;
}
100% {
opacity: 0.375125;
}
}
@-webkit-keyframes opacity-60-25-7-12 {
0% {
opacity: 0.479291666666667;
}
58.3433% {
opacity: 0.25;
}
58.3533% {
opacity: 1;
}
18.3433% {
opacity: 0.25;
}
100% {
opacity: 0.479291666666667;
}
}
@-webkit-keyframes opacity-60-25-8-12 {
0% {
opacity: 0.583458333333333;
}
66.6767% {
opacity: 0.25;
}
66.6867% {
opacity: 1;
}
26.6767% {
opacity: 0.25;
}
100% {
opacity: 0.583458333333333;
}
}
@-webkit-keyframes opacity-60-25-9-12 {
0% {
opacity: 0.687625;
}
75.01% {
opacity: 0.25;
}
75.02% {
opacity: 1;
}
35.01% {
opacity: 0.25;
}
100% {
opacity: 0.687625;
}
}
@-webkit-keyframes opacity-60-25-10-12 {
0% {
opacity: 0.791791666666667;
}
83.3433% {
opacity: 0.25;
}
83.3533% {
opacity: 1;
}
43.3433% {
opacity: 0.25;
}
100% {
opacity: 0.791791666666667;
}
}
@-webkit-keyframes opacity-60-25-11-12 {
0% {
opacity: 0.895958333333333;
}
91.6767% {
opacity: 0.25;
}
91.6867% {
opacity: 1;
}
51.6767% {
opacity: 0.25;
}
100% {
opacity: 0.895958333333333;
}
}
flexible.min.js地址：http://files.cnblogs.com/files/gaihongxu/flexible.min.js
以下转载自（http://www.cnblogs.com/jr1993/p/4622039.html ）
2.
<div class="loading">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
.loading{
width: 80px;
height: 40px;
margin: 0 auto;
margin-top:100px;
}
.loading span{
display: inline-block;
width: 8px;
height: 100%;
border-radius: 4px;
background: lightgreen;
-webkit-animation: load 1s ease infinite;
}
@-webkit-keyframes load{
0%,100%{
height: 40px;
background: lightgreen;
}
50%{
height: 70px;
margin: -15px 0;
background: lightblue;
}
}
.loading span:nth-child(2){
-webkit-animation-delay:0.2s;
}
.loading span:nth-child(3){
-webkit-animation-delay:0.4s;
}
.loading span:nth-child(4){
-webkit-animation-delay:0.6s;
}
.loading span:nth-child(5){
-webkit-animation-delay:0.8s;
}
3.
<div class="loading">
<span></span>
</div>
.loading{
width: 150px;
height: 4px;
border-radius: 2px;
margin: 0 auto;
margin-top:100px;
position: relative;
background: lightgreen;
-webkit-animation: changeBgColor 1.04s ease-in infinite alternate;
}
.loading span{
display: inline-block;
width: 16px;
height: 16px;
border-radius: 50%;
background: lightgreen;
position: absolute;
margin-top: -7px;
margin-left:-8px;
-webkit-animation: changePosition 1.04s ease-in infinite alternate;
}
@-webkit-keyframes changeBgColor{
0%{
background: lightgreen;
}
100%{
background: lightblue;
}
}
@-webkit-keyframes changePosition{
0%{
background: lightgreen;
}
100%{
margin-left: 142px;
background: lightblue;
}
}
4.
<div class="loading">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
.loading{
width: 150px;
height: 15px;
margin: 0 auto;
margin-top:100px;
}
.loading span{
display: inline-block;
width: 15px;
height: 100%;
margin-right: 5px;
border-radius: 50%;
background: lightgreen;
-webkit-animation: load 1.04s ease infinite;
}
.loading span:last-child{
margin-right: 0px;
}
@-webkit-keyframes load{
0%{
opacity: 1;
}
100%{
opacity: 0;
}
}
.loading span:nth-child(1){
-webkit-animation-delay:0.13s;
}
.loading span:nth-child(2){
-webkit-animation-delay:0.26s;
}
.loading span:nth-child(3){
-webkit-animation-delay:0.39s;
}
.loading span:nth-child(4){
-webkit-animation-delay:0.52s;
}
.loading span:nth-child(5){
-webkit-animation-delay:0.65s;
}
.loading{
width: 150px;
height: 15px;
margin: 0 auto;
margin-top:100px;
}
.loading span{
display: inline-block;
width: 15px;
height: 100%;
margin-right: 5px;
border-radius: 50%;
background: lightgreen;
-webkit-animation: load 1.04s ease infinite;
}
.loading span:last-child{
margin-right: 0px;
}
@-webkit-keyframes load{
0%{
opacity: 1;
-webkit-transform: scale(1.3);
}
100%{
opacity: 0.2;
-webkit-transform: scale(.3);
}
}
.loading span:nth-child(1){
-webkit-animation-delay:0.13s;
}
.loading span:nth-child(2){
-webkit-animation-delay:0.26s;
}
.loading span:nth-child(3){
-webkit-animation-delay:0.39s;
}
.loading span:nth-child(4){
-webkit-animation-delay:0.52s;
}
.loading span:nth-child(5){
-webkit-animation-delay:0.65s;
}
.loading{
width: 150px;
height: 15px;
margin: 0 auto;
position: relative;
margin-top:100px;
}
.loading span{
position: absolute;
width: 15px;
height: 100%;
border-radius: 50%;
background: lightgreen;
-webkit-animation: load 1.04s ease-in infinite alternate;
}
@-webkit-keyframes load{
0%{
opacity: 1;
-webkit-transform: translate(0px);
}
100%{
opacity: 0.2;
-webkit-transform: translate(150px);
}
}
.loading span:nth-child(1){
-webkit-animation-delay:0.13s;
}
.loading span:nth-child(2){
-webkit-animation-delay:0.26s;
}
.loading span:nth-child(3){
-webkit-animation-delay:0.39s;
}
.loading span:nth-child(4){
-webkit-animation-delay:0.52s;
}
.loading span:nth-child(5){
-webkit-animation-delay:0.65s;
}
5.
<div class="loading">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
.loading{
width: 150px;
height: 15px;
margin: 0 auto;
margin-top:100px;
text-align: center;
}
.loading span{
display: inline-block;
width: 15px;
height: 100%;
margin-right: 5px;
background: lightgreen;
-webkit-animation: load 1.04s ease infinite;
}
.loading span:last-child{
margin-right: 0px;
}
@-webkit-keyframes load{
0%{
opacity: 1;
}
100%{
opacity: 0;
}
}
.loading span:nth-child(1){
-webkit-animation-delay:0.13s;
}
.loading span:nth-child(2){
-webkit-animation-delay:0.26s;
}
.loading span:nth-child(3){
-webkit-animation-delay:0.39s;
}
.loading span:nth-child(4){
-webkit-animation-delay:0.52s;
}
.loading span:nth-child(5){
-webkit-animation-delay:0.65s;
}
.loading{
width: 150px;
height: 15px;
margin: 0 auto;
margin-top:100px;
}
.loading span{
display: inline-block;
width: 15px;
height: 100%;
margin-right: 5px;
background: lightgreen;
-webkit-transform-origin: right bottom;
-webkit-animation: load 1s ease infinite;
}
.loading span:last-child{
margin-right: 0px;
}
@-webkit-keyframes load{
0%{
opacity: 1;
}
100%{
opacity: 0;
-webkit-transform: rotate(90deg);
}
}
.loading span:nth-child(1){
-webkit-animation-delay:0.13s;
}
.loading span:nth-child(2){
-webkit-animation-delay:0.26s;
}
.loading span:nth-child(3){
-webkit-animation-delay:0.39s;
}
.loading span:nth-child(4){
-webkit-animation-delay:0.52s;
}
.loading span:nth-child(5){
-webkit-animation-delay:0.65s;
}
.loading{
width: 150px;
height: 15px;
margin: 0 auto;
margin-top:100px;
}
.loading span{
display: inline-block;
width: 15px;
height: 100%;
margin-right: 5px;
background: lightgreen;
-webkit-transform-origin: right bottom;
-webkit-animation: load 1s ease infinite;
}
.loading span:last-child{
margin-right: 0px;
}
@-webkit-keyframes load{
0%{
opacity: 1;
-webkit-transform: scale(1);
}
100%{
opacity: 0;
-webkit-transform: rotate(90deg) scale(.3);
}
}
.loading span:nth-child(1){
-webkit-animation-delay:0.13s;
}
.loading span:nth-child(2){
-webkit-animation-delay:0.26s;
}
.loading span:nth-child(3){
-webkit-animation-delay:0.39s;
}
.loading span:nth-child(4){
-webkit-animation-delay:0.52s;
}
.loading span:nth-child(5){
-webkit-animation-delay:0.65s;
}
6.
<div class="loadEffect">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
.loadEffect{
width: 100px;
height: 100px;
position: relative;
margin: 0 auto;
margin-top:100px;
}
.loadEffect span{
display: inline-block;
width: 16px;
height: 16px;
border-radius: 50%;
background: lightgreen;
position: absolute;
-webkit-animation: load 1.04s ease infinite;
}
@-webkit-keyframes load{
0%{
opacity:;
}
100%{
opacity: 0.2;
}
}
.loadEffect span:nth-child(1){
left:;
top: 50%;
margin-top:-8px;
-webkit-animation-delay:0.13s;
}
.loadEffect span:nth-child(2){
left: 14px;
top: 14px;
-webkit-animation-delay:0.26s;
}
.loadEffect span:nth-child(3){
left: 50%;
top:;
margin-left: -8px;
-webkit-animation-delay:0.39s;
}
.loadEffect span:nth-child(4){
top: 14px;
right:14px;
-webkit-animation-delay:0.52s;
}
.loadEffect span:nth-child(5){
right:;
top: 50%;
margin-top:-8px;
-webkit-animation-delay:0.65s;
}
.loadEffect span:nth-child(6){
right: 14px;
bottom:14px;
-webkit-animation-delay:0.78s;
}
.loadEffect span:nth-child(7){
bottom:;
left: 50%;
margin-left: -8px;
-webkit-animation-delay:0.91s;
}
.loadEffect span:nth-child(8){
bottom: 14px;
left: 14px;
-webkit-animation-delay:1.04s;
}
.loadEffect{
width: 100px;
height: 100px;
position: relative;
margin: 0 auto;
margin-top:100px;
}
.loadEffect span{
display: inline-block;
width: 20px;
height: 20px;
border-radius: 50%;
background: lightgreen;
position: absolute;
-webkit-animation: load 1.04s ease infinite;
}
@-webkit-keyframes load{
0%{
-webkit-transform: scale(1.2);
opacity:;
}
100%{
-webkit-transform: scale(.3);
opacity: 0.5;
}
}
.loadEffect span:nth-child(1){
left:;
top: 50%;
margin-top:-10px;
-webkit-animation-delay:0.13s;
}
.loadEffect span:nth-child(2){
left: 14px;
top: 14px;
-webkit-animation-delay:0.26s;
}
.loadEffect span:nth-child(3){
left: 50%;
top:;
margin-left: -10px;
-webkit-animation-delay:0.39s;
}
.loadEffect span:nth-child(4){
top: 14px;
right:14px;
-webkit-animation-delay:0.52s;
}
.loadEffect span:nth-child(5){
right:;
top: 50%;
margin-top:-10px;
-webkit-animation-delay:0.65s;
}
.loadEffect span:nth-child(6){
right: 14px;
bottom:14px;
-webkit-animation-delay:0.78s;
}
.loadEffect span:nth-child(7){
bottom:;
left: 50%;
margin-left: -10px;
-webkit-animation-delay:0.91s;
}
.loadEffect span:nth-child(8){
bottom: 14px;
left: 14px;
-webkit-animation-delay:1.04s;
}
CSS3实现Loading效果的更多相关文章
- CSS3自定义loading效果
效果: 使用CSS3完成loading的制作 css样式: <style type="text/css"> .mask { position: fixed; left: ...
- 应用css3制作loading效果
参考秒味课堂 代码发出来备忘 html <!DOCTYPE html> <html lang="en"> <head> <meta cha ...
- css3实现loading效果--当页面加载过程中显示Loading的进度条，全部加载完成之后进度条消失
一个页面等图片资源全部加载完成,会需要很长时间,用户体验会很差,所以我们需要loading来掩盖这个漫长的过程! emmm,定时器?写个定时器还要清除,万一造成内存泄露?定时器之间还会互相影响,呼呼呼 ...
- css3 实现loading效果
1 圆点渐入渐出 要点: 缩放和透明度的变化,循环变化 <div class="demo1"></div> .demo1{ width: 40px; hei ...
- JQuery+CSS3实现Ajax加载时loading效果
之前通过Ajax请求加载数据的时候,在数据还没有呈现出来前,为了更好的用户体验,总会弄个loading告诉用户其实内容正在加载,而不是网站崩了.但是貌似之前使用gif图片的情况比较多,可能是为了兼容各 ...
- animation & @keyframes 实现loading效果
效果图截图如下: 直接上代码: html <!DOCTYPE html> <html> <head> <meta charset="utf-8&qu ...
- 【转】 CSS3实现10种Loading效果
昨晚用CSS3实现了几种常见的Loading效果,虽然很简单,但还是分享一下,顺便也当是做做笔记…… PS:如需转载,请注明出处! 第1种效果: 代码如下: <div class="l ...
- CSS3轻松实现清新 Loading 效果
至今HTML5中国已经为大家分享过几百种基于 CSS3 的Loading加载动画,效果酷炫代码简洁,非常值得学习借鉴;今天就先给大家分享两个常用的CSS3的Loading的案例. 第一种效果: HTM ...
- CSS3实现10种Loading效果
昨晚用CSS3实现了几种常见的Loading效果,虽然很简单,但还是分享一下,顺便也当是做做笔记…… 第1种效果: 代码如下: <div class="loading"> ...
随机推荐
- Oracle补习班第一天
My life is a straight line, turning only for you. 我的人生是一条直线,为你转弯
- Android开发之百度地图--环境搭建
这篇文章总结自极客学院张浩老师的android教学课程,在此对张浩老师和崔爽老师表示非常感谢. (一)基础知识 在申请百度地图开发密钥的时候需要用到数字签名证书的内容,所以这里先对此做一下介绍. (1 ...
- MVC 访问IFrame页面Session过期后跳转到登录页面
Web端开发时,用户登录后往往会通过Session来保存用户信息,Session存放在服务器,当用户长时间不操作的时候,我们会希望服务器保存的Session过期,这个时候,因为Session中的用户信 ...
- javascript匿名函数应用
1.给指定对象新增一些属性的写法: /*给一个对象增加属性*/ var myDate=(function(obj){ obj.addName=function(name){ this.name=nam ...
- 如何通过JavaScript构建Asp.net服务端控件
摘要 虽然ASP.NET的服务器控件一直被大家所诟病,但是用户控件(ACSX)在某些场景下还是非常有用的. 在一些极特珠的情况下,我们会使用JavaScript动态的构建页面中的控件,但假设遇到了我要 ...
- 【原创翻译】初识Unity中的Compute Shader
一直以来都想试着自己翻译一些东西,现在发现翻译真的很不容易,如果你直接把作者的原文按照英文的思维翻译过来,你会发现中国人读起来很是别扭,但是如果你想完全利用中国人的语言方式来翻译,又怕自己理解的不到位 ...
- [python实现设计模式]-1. 单例模式
设计模式中,最简单的一个就是 “单例模式”, 那么首先,就实现一下单例模式. 那么根据个人的理解,很快就写出第一版. # -*- coding: utf-8 -*- class Singleton(o ...
- http://www.cnblogs.com/nullcnb/p/3653262.html
alert(hasPrototypeProperty(person,"name")); //false 来自原型 person1.name="mywei"; a ...
- C语言fmod()函数：对浮点数取模（求余）
头文件:#include <math.h> fmod() 用来对浮点数进行取模(求余),其原型为: double fmod (double x); 设返回值为 ret,那么 x = ...
- python 核心编程课后练习(chapter 3)
3-8 #3-8 "makeTextFile.py -- create text file" import os ls = os.linesep #get filename fna ...