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"> ...
随机推荐
- 树莓派开启root用户
树莓派系统使用的linux是debian系统,所以树莓派启用root和debian是相同的. debian里root账户默认没有密码,但账户锁定. 当需要root权限时,由默认账户经由sudo执行,R ...
- Tomcat Connector三种运行模式（BIO, NIO, APR）的比较和优化
Tomcat Connector的三种不同的运行模式性能相差很大,有人测试过的结果如下: 这三种模式的不同之处如下: BIO: 一个线程处理一个请求.缺点:并发量高时,线程数较多,浪费资源. Tomc ...
- 安装LockBox 3.7.0，用LockBox加密解密！
LockBox 官 方 网 站:http://lockbox.seanbdurkin.id.au/HomePage LockBox的Github 网址:https://github.com/S ...
- No.7__C#_Final
实习期的完结,暂时告一个段落了 现在是周五的晚上十点三刻,洗完澡后,决定先写一点.今天是实习的最后一天,平平淡淡的完成了实习作业.本以为周五会像往常那样迫不及待的离开,迎接自己的 周末.可是,今天下午 ...
- Esfog_UnityShader教程_遮挡描边(原理篇)
咳咳,有段时间没有更新了,最近有点懒!把不少精力都放在C++身上了.闲言少叙,今天要讲的可和之前的几篇有所不同了,这次是一个次综合应用.这篇内容中与之前不同主要体现在下面几点上. 1.之前我们写的都是 ...
- Tables without a clustered index are not supported in this version of SQL Server. Please create a clustered index and try again.
问题: Azure Sql 在插入数据是出现“Msg 40054, Level 16, State 1, Line 2 Tables without a clustered index are no ...
- .Net 连接字符串的解释
https://msdn.microsoft.com/zh-cn/library/cc716756.aspx 连接字符串参数 连接字符串的格式是使用分号分隔的键/值参数对列表: keyword1=va ...
- PHP5.6.15连接Sql Server 2008配置方案
php5.6的如果想连接Sql Server 2008数据库,需要手动配置扩展和安装一个驱动. 下载SQL Server Driver for PHP的扩展包,64位系统的官方不支持,找到一个非官方的 ...
- 百度地图api根据地图缩放等级显示不同的marker点，功能二
功能一里面有marker点后台的代码 根据地图的缩放等级显示不同marker点的坐标JSP代码 <%@ page language="java" contentType=&q ...
- jquery 获取日期时间
获取JavaScript 的时间使用内置的Date函数完成 var mydate = new Date();mydate.getYear(); //获取当前年份(2位)mydate.getFullYe ...