每日小練習之css3的loading（part4）
2019-04-03 15:31
169 查看
純 css3編寫loading功能
[code]<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>loading</title>
</head>
<style>
.loading {
width: 100%;
height: 100%;
overflow: hidden;
}
.loader {
display: flex;
margin: 10px;
height: 200px;
border: 1px solid #A52A2A;
align-items: center;
justify-content: center;
}
.loader_1 {
width: 35px;
height: 35px;
position: relative;
}
.loader_1>i {
border-radius: 50%;
display: block;
width: 100%;
height: 100%;
background: -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(70%, transparent), color-stop(30%, #333), to(#333));
background: -webkit-linear-gradient(transparent 0%, transparent 70%, #333 30%, #333 100%);
background: -o-linear-gradient(transparent 0%, transparent 70%, #333 30%, #333 100%);
background: linear-gradient(transparent 0%, transparent 70%, #333 30%, #333 100%);
-webkit-animation: loading-1 .6s linear 0s infinite;
animation: loading-1 .6s linear 0s infinite;
}
@-webkit-keyframes loading-1 {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
50% {
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes loading-1 {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
50% {
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
.loader_2>i {
width: 2px;
border-radius: 2px;
margin: 0 2px;
background: #333;
height: 35px;
display: inline-block;
}
.loader_2>i:nth-child(1) {
-webkit-animation: loading-2 .6s linear 0s infinite;
animation: loading-2 .6s linear 0s infinite;
}
.loader_2>i:nth-child(2) {
-webkit-animation: loading-2 .6s linear .1s infinite;
animation: loading-2 .6s linear .1s infinite;
}
.loader_2>i:nth-child(3) {
-webkit-animation: loading-2 .6s linear .2s infinite;
animation: loading-2 .6s linear .2s infinite;
}
.loader_2>i:nth-child(4) {
-webkit-animation: loading-2 .6s linear .3s infinite;
animation: loading-2 .6s linear .3s infinite;
}
.loader_2>i:nth-child(5) {
-webkit-animation: loading-2 .6s linear .4s infinite;
animation: loading-2 .6s linear .4s infinite;
}
@-webkit-keyframes loading-2 {
0% {
-webkit-transform: scaleY(1);
transform: scaleY(1);
}
50% {
-webkit-transform: scaleY(0.4);
transform: scaleY(0.4);
}
100% {
-webkit-transform: scaleY(1);
transform: scaleY(1);
}
}
@keyframes loading-2 {
0% {
-webkit-transform: scaleY(1);
transform: scaleY(1);
}
50% {
-webkit-transform: scaleY(0.4);
transform: scaleY(0.4);
}
100% {
-webkit-transform: scaleY(1);
transform: scaleY(1);
}
}
.loader_3 {
position: relative;
}
.loader_3>i {
width: 15px;
height: 15px;
border-radius: 50%;
position: absolute;
display: block;
background-color: #333;
}
@-webkit-keyframes loading-3 {
50% {
opacity: 0.5;
-webkit-transform: scale(0.5);
transform: scale(0.5);
}
100% {
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1);
}
}
@keyframes loading-3 {
50% {
opacity: 0.3;
-webkit-transform: scale(0.5);
transform: scale(0.5);
}
100% {
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1);
}
}
.loader_3>i:nth-child(1) {
top: 25px;
left: 0px;
-webkit-animation: loading-3 1s ease 0s infinite;
animation: loading-3 1s ease 0s infinite;
}
.loader_3>i:nth-child(2) {
top: 17px;
left: 17px;
-webkit-animation: loading-3 1s ease -.12s infinite;
animation: loading-3 1s ease -.12s infinite;
}
.loader_3>i:nth-child(3) {
top: 0px;
left: 25px;
-webkit-animation: loading-3 1s ease -.24s infinite;
animation: loading-3 1s ease -.24s infinite;
}
.loader_3>i:nth-child(4) {
top: -17px;
left: 17px;
-webkit-animation: loading-3 1s ease -.36s infinite;
animation: loading-3 1s ease -.36s infinite;
}
.loader_3>i:nth-child(5) {
top: -25px;
left: 0px;
-webkit-animation: loading-3 1s ease -.48s infinite;
animation: loading-3 1s ease -.48s infinite;
}
.loader_3>i:nth-child(6) {
top: -17px;
left: -17px;
-webkit-animation: loading-3 1s ease -.6s infinite;
animation: loading-3 1s ease -.6s infinite;
}
.loader_3>i:nth-child(7) {
top: 0px;
left: -25px;
-webkit-animation: loading-3 1s ease -.72s infinite;
animation: loading-3 1s ease -.72s infinite;
}
.loader_3>i:nth-child(8) {
top: 17px;
left: -17px;
-webkit-animation: loading-3 1s ease -.84s infinite;
animation: loading-3 1s ease -.84s infinite;
}
.loader_4 {
width: 60px;
height: 60px;
position: relative;
}
.loader_4>i {
width: 60px;
height: 60px;
display: block;
position: absolute;
left: 0;
top: 0;
opacity: 0;
background: #333;
border-radius: 50%;
}
@-webkit-keyframes loading-4 {
0% {
-webkit-transform: scale(.4);
transform: scale(.4);
}
5% {
opacity: 1;
}
100% {
-webkit-transform: scale(1);
transform: scale(1);
opacity: 0;
}
}
@keyframes loading-4 {
0% {
-webkit-transform: scale(.4);
transform: scale(.4);
}
5% {
opacity: 1;
}
100% {
-webkit-transform: scale(1);
transform: scale(1);
opacity: 0;
}
}
.loader_4>i:nth-child(1) {
-webkit-animation: loading-4 1s linear 0s infinite;
animation: loading-4 1s linear 0s infinite;
}
.loader_4>i:nth-child(2) {
-webkit-animation: loading-4 1s linear .2s infinite;
animation: loading-4 1s linear .2s infinite;
}
.loader_4>i:nth-child(3) {
-webkit-animation: loading-4 1s linear .4s infinite;
animation: loading-4 1s linear .4s infinite;
}
.loader_5 {
width: 40px;
height: 40px;
position: relative;
}
.loader_5>i {
border-radius: 50%;
border: 2px solid #333;
border-color: transparent #333;
display: block;
position: absolute;
}
.loader_5>i:first-child {
width: 35px;
height: 35px;
left: 0;
top: 0;
-webkit-animation: loading-5 1s ease-in-out 0s infinite;
animation: loading-5 1s ease-in-out 0s infinite;
}
.loader_5>i:last-child {
top: 10px;
width: 15px;
height: 15px;
left: 10px;
-webkit-animation: loading-5 1s ease-in-out .5s infinite reverse;
animation: loading-5 1s ease-in-out .5s infinite reverse;
}
@-webkit-keyframes loading-5 {
0% {
-webkit-transform: rotate(0deg) scale(1);
transform: rotate(0deg) scale(1);
}
50% {
-webkit-transform: rotate(180deg) scale(.5);
transform: rotate(180deg) scale(.5);
}
100% {
-webkit-transform: rotate(360deg) scale(1);
transform: rotate(360deg) scale(1);
}
}
@keyframes loading-5 {
0% {
-webkit-transform: rotate(0deg) scale(1);
transform: rotate(0deg) scale(1);
}
50% {
-webkit-transform: rotate(180deg) scale(.5);
transform: rotate(180deg) scale(.5);
}
100% {
-webkit-transform: rotate(360deg) scale(1);
transform: rotate(360deg) scale(1);
}
}
.loader_6 {
width: 80px;
height: 20px;
position: relative;
}
.loader_6>i {
position: absolute;
width: 20px;
height: 20px;
margin-right: 10px;
border-radius: 50%;
background: #333;
display: block;
}
.loader_6>i:nth-child(1) {
-webkit-animation: loading-6 2s linear 0s infinite;
animation: loading-6 2s linear 0s infinite;
}
.loader_6>i:nth-child(2) {
-webkit-animation: loading-6 2s linear -0.4s infinite;
animation: loading-6 2s linear -0.4s infinite;
}
.loader_6>i:nth-child(3) {
-webkit-animation: loading-6 2s linear -0.8s infinite;
animation: loading-6 2s linear -0.8s infinite;
}
.loader_6>i:nth-child(4) {
-webkit-animation: loading-6 2s linear -1.2s infinite;
animation: loading-6 2s linear -1.2s infinite;
}
.loader_6>i:nth-child(5) {
-webkit-animation: loading-6 2s linear -1.6s infinite;
animation: loading-6 2s linear -1.6s infinite;
}
@-webkit-keyframes loading-6 {
0% {
left: 100px;
top: 0;
}
80% {
left: 0;
top: 0;
}
85% {
left: 0;
top: -20px;
width: 20px;
height: 20px;
}
90% {
width: 40px;
height: 20px;
}
95% {
left: 100px;
top: -20px;
width: 20px;
height: 20px;
}
100% {
left: 100px;
top: 0;
}
}
@keyframes loading-6 {
0% {
left: 100px;
top: 0;
}
80% {
left: 0;
top: 0;
}
85% {
left: 0;
top: -20px;
width: 20px;
height: 20px;
}
90% {
width: 40px;
height: 20px;
}
95% {
left: 100px;
top: -20px;
1fff8
width: 20px;
height: 20px;
}
100% {
left: 100px;
top: 0;
}
}
</style>
<body>
<div class="loading">
<div class="loader ">
<div class="loader_1">
<i></i>
</div>
</div>
<div class="loader">
<div class="loader_2">
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
</div>
</div>
<div class="loader">
<div class="loader_3">
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
</div>
</div>
<div class="loader">
<div class="loader_4">
<i></i>
<i></i>
<i></i>
</div>
</div>
<div class="loader">
<div class="loader_5">
<i></i>
<i></i>
</div>
</div>
<div class="loader">
<div class="loader_6">
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
</div>
</div>
</div>
</body>
</html>
結果：
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- CSS3 Loading效果
- CSS3的颜色透明度 ajax请求时loading
- 18种CSS3loading效果完整版，兼容各大主流浏览器，提供在线小工具使用
- CSS3动画实现loading加载图标
- css3实现6种loading效果
- loading css3动画
- css3动画实现loading
- CSS3 圆形loading效果
- css3loading状态3
- CSS3动画之loading-1
- 纯CSS3实现饼状loading效果
- CSS3 几步即可实现loading动画效果
- CSS3动画——五个圆球的动画及音乐播放器和Loading图标
- jQuery & CSS3实现loading按钮
- css3 loading 效果
- 53种纯CSS3炫酷loading指示器动画特效
- 30种CSS3炫酷页面预加载loading动画特效
- CSS3-loading动画（四）
- 分针网——每日分享：CSS3之径向渐变(radial-gradient)
- 用CSS3实现loading动画效果