<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CSS3实现加载数据动画</title> <style type="text/css"> .box{ width: 100%; padding: 3%; /*设置margin与padding的值包含在所设置的宽高之中*/ -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; /*设置隐藏移除部分*/ overflow: hidden; } .box .loader{ width: 30%; float: left; height: 200px; margin-right: 3%; border: 1px #cccccc solid; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; /*设置对象显示为伸缩盒（弹性盒）模型*/ display: flex; /*设置弹性盒子元素在侧轴（纵轴）方向上的对齐方式*/ align-items: center; /*设置弹性盒子元素在主轴（横轴）方向上的对齐方式*/ justify-content: center; } .loading-1{ width: 35px; height: 35px; position: relative; } .loading-1 i{ display: block; width: 100%; height: 100%; border-radius: 50%; background: linear-gradient(transparent 0%, transparent 70%, #333333 30%, #333333 100%); background: -webkit-linear-gradient(transparent 0%, transparent 70%, #333333 30%, #333333 100%); background: -moz-linear-gradient(transparent 0%, transparent 70%, #333333 30%, #333333 100%); background: -ms-linear-gradient(transparent 0%, transparent 70%, #333333 30%, #333333 100%); background: -o-linear-gradient(transparent 0%, transparent 70%, #333333 30%, #333333 100%); -webkit-animation: loading-1 .5s linear infinite; -moz-animation: loading-1 .5s linear infinite; -o-animation: loading-1 .5s linear infinite; animation: loading-1 .5s linear infinite; } @-webkit-keyframes loading-1{ 0%{ transform: rotate(0deg); } 50%{ transform: rotate(180deg); } 100%{ transform: rotate(360deg); } } @-moz-keyframes loading-1{ 0%{ transform: rotate(0deg); } 50%{ transform: rotate(180deg); } 100%{ transform: rotate(360deg); } } @-o-keyframes loading-1{ 0%{ transform: rotate(0deg); } 50%{ transform: rotate(180deg); } 100%{ transform: rotate(360deg); } } @keyframes loading-1{ 0%{ transform: rotate(0deg); } 50%{ transform: rotate(180deg); } 100%{ transform: rotate(360deg); } } .loading-2 i{ /*设置为内联元素，可以使元素在同一行显示*/ display: inline-block; width: 4px; height: 35px; border-radius: 2px; margin: 0 2px; background-color: #333333; } .loading-2 i:nth-child(1){ -webkit-animation: loading-2 1s linear .1s infinite; -moz-animation: loading-2 1s linear .1s infinite; -o-animation: loading-2 1s linear .1s infinite; animation: loading-2 1s linear .1s infinite; } .loading-2 i:nth-child(2){ -webkit-animation: loading-2 1s linear .2s infinite; -moz-animation: loading-2 1s linear .2s infinite; -o-animation: loading-2 1s linear .2s infinite; animation: loading-2 1s linear .2s infinite; } .loading-2 i:nth-child(3){ -webkit-animation: loading-2 1s linear .3s infinite; -moz-animation: loading-2 1s linear .3s infinite; -o-animation: loading-2 1s linear .3s infinite; animation: loading-2 1s linear .3s infinite; } .loading-2 i:nth-child(4){ -webkit-animation: loading-2 1s linear .4s infinite; -moz-animation: loading-2 1s linear .4s infinite; -o-animation: loading-2 1s linear .4s infinite; animation: loading-2 1s linear .4s infinite; } .loading-2 i:nth-child(5){ -webkit-animation: loading-2 1s linear .5s infinite; -moz-animation: loading-2 1s linear .5s infinite; -o-animation: loading-2 1s linear .5s infinite; animation: loading-2 1s linear .5s infinite; } @-webkit-keyframes loading-2 { 0%{ transform: scaleY(1); } 50%{ transform: scaleY(.4); } 100%{ transform: scaleY(1); } } @-moz-keyframes loading-2 { 0%{ transform: scaleY(1); } 50%{ transform: scaleY(.4); } 100%{ transform: scaleY(1); } } @-o-keyframes loading-2 { 0%{ transform: scaleY(1); } 50%{ transform: scaleY(.4); } 100%{ transform: scaleY(1); } } @keyframes loading-2 { 0%{ transform: scaleY(1); } 50%{ transform: scaleY(.4); } 100%{ transform: scaleY(1); } } .loading-3{ position: relative; } .loading-3 i{ display: block; width: 15px; height: 15px; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; background-color: #333333; position: absolute; } .loading-3 i:nth-child(1){ top: 25px; left: 0; -webkit-animation: loading-3 1s ease 0s infinite; -o-animation: loading-3 1s ease 0s infinite; -moz-animation: loading-3 1s ease 0s infinite; animation: loading-3 1s ease 0s infinite; } .loading-3 i:nth-child(2){ top: 17px; left: 17px; /*这里延迟-0.12s是因为在布局时，位置是逆时针，要使动画顺时针变换，则这里需要设置负的延迟时间*/ -webkit-animation: loading-3 1s ease -0.12s infinite; -o-animation: loading-3 1s ease -0.12s infinite; -moz-animation: loading-3 1s ease -0.12s infinite; animation: loading-3 1s ease -0.12s infinite; } .loading-3 i:nth-child(3){ top: 0; left: 25px; -webkit-animation: loading-3 1s ease -0.24s infinite; -o-animation: loading-3 1s ease -0.24s infinite; -moz-animation: loading-3 1s ease -0.24s infinite; animation: loading-3 1s ease -0.24s infinite; } .loading-3 i:nth-child(4){ top: -17px; left: 17px; -webkit-animation: loading-3 1s ease -0.36s infinite; -o-animation: loading-3 1s ease -0.36s infinite; -moz-animation: loading-3 1s ease -0.36s infinite; animation: loading-3 1s ease -0.36s infinite; } .loading-3 i:nth-child(5){ top: -25px; left: 0; -webkit-animation: loading-3 1s ease -0.48s infinite; -o-animation: loading-3 1s ease -0.48s infinite; -moz-animation: loading-3 1s ease -0.48s infinite; animation: loading-3 1s ease -0.48s infinite; } .loading-3 i:nth-child(6){ top: -17px; left: -17px; -webkit-animation: loading-3 1s ease -0.6s infinite; -o-animation: loading-3 1s ease -0.6s infinite; -moz-animation: loading-3 1s ease -0.6s infinite; animation: loading-3 1s ease -0.6s infinite; } .loading-3 i:nth-child(7){ top: 0; left: -25px; -webkit-animation: loading-3 1s ease -0.72s infinite; -o-animation: loading-3 1s ease -0.72s infinite; -moz-animation: loading-3 1s ease -0.72s infinite; animation: loading-3 1s ease -0.72s infinite; } .loading-3 i:nth-child(8){ top: 17px; left: -17px; -webkit-animation: loading-3 1s ease -0.84s infinite; -o-animation: loading-3 1s ease -0.84s infinite; -moz-animation: loading-3 1s ease -0.84s infinite; animation: loading-3 1s ease -0.84s infinite; } @-webkit-keyframes loading-3 { 50%{ transform: scale(.4); /*设置透明度为*/ opacity: .3; } 100%{ transform: scale(1); /*设置透明度为*/ opacity: 1; } } @-o-keyframes loading-3 { 50%{ transform: scale(.4); /*设置透明度为*/ opacity: .3; } 100%{ transform: scale(1); /*设置透明度为*/ opacity: 1; } } @-moz-keyframes loading-3 { 50%{ transform: scale(.4); /*设置透明度为*/ opacity: .3; } 100%{ transform: scale(1); /*设置透明度为*/ opacity: 1; } } @keyframes loading-3 { 50%{ transform: scale(.4); /*设置透明度为*/ opacity: .3; } 100%{ transform: scale(1); /*设置透明度为*/ opacity: 1; } } </style> </head> <body> <div class="box"> <div class="loader"> <div class="loading-1"><i></i></div> </div> <div class="loader"> <div class="loading-2"> <i></i> <i></i> <i></i> <i></i> <i></i> </div> </div> <div class="loader"> <div class="loading-3"> <i></i> <i></i> <i></i> <i></i> <i></i> <i></i> <i></i> <i></i> </div> </div> </div> </body> </html>
