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"> ...
随机推荐
- linux 出core设置问题
我所在的环境是RedHat 1.第一步 修改/etc/security/limits.conf添加一行 user为生效的用户 user hard core unlimited 2.第二步 在普通用户的 ...
- STM32串口
状态寄存器USART_SR的复位值为0x00C0H:即 第七位发送寄存器空TXE=1和第六位发送完成TC=1寄存器为空, TC=1表明发送已完成.此时只要使能了发送空和发送完成中断就可进入中断ISR( ...
- 关于Android 打开新的Activity 虚拟键盘的弹出与不弹出
关于Android 打开新的Activity 虚拟键盘的弹出与不弹出 打开Activity 时 在相应的情况 弹出虚拟键盘 或者 隐藏虚拟键盘 会给用户非常好的用户体验 , 实现起来也比较简单 只需 ...
- asp.net webform 中使用Microsoft ASP.NET Web Optimization压缩js及css
使用静态资源压缩可以合并静态资源文件减少客户端请求数量,压缩文件大小,减少网络流量的损耗. 注:只有通过web.config关闭调试功能,压缩才会生效 <system.web> <c ...
- 网络爬虫（java）
陆陆续续做了有一个月,期间因为各种技术问题被多次暂停,最关键的一次主要是因为存储容器使用的普通二叉树,在节点权重相同的情况下导致树高增高,在进行遍历的时候效率大大降低,甚至在使用递归的时候导致栈 ...
- 常用PHP函数类目录
说明:用来记录我在开发过程中,经常用到的一些常用函数或者常用类. 常用函数 PHP常用函数 (1) 常用类 PHP表单数据校验类
- day10-rabbitmq
安装python rabbitMQ module pip instal pika 发布者: #!/usr/bin/env python #coding:utf8 import pika connect ...
- vs2012中添加lib，.h文件方法（原）
项目.属性.C/C++.附加包含目录:填写附加头文件(*.h)所在目录 分号间隔多项项目.属性.链接器.附加库目录:填写附加依赖库(*.lib)所在目录 分号间隔多项项目.属性.链接器(点前面的+展开 ...
- c# 文件及目录操作类
18位长度的计时周期数: DateTime.Now.Ticks.ToString() 多数是收集而来,加上测试感觉很不错,分享一下或许有些帮助吧: 引用: using System; using Sy ...
- reverse iterator
Problem 1: vector<int> coll = { 1, 2, 3, 4, 5, 6, 7, 8, 9 }; vector<int>::const_iterator ...