加载动画

兔子零-A酱

于 2019-08-23 21:24:04 发布

阅读量106

点赞数

分类专栏： js

本文链接：https://blog.csdn.net/weixin_43764814/article/details/100046270

版权

js 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

在这里插入图片描述

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{margin:0;padding:0;}
.box{width: 100%;padding:3%;box-sizing:border-box;overflow: hidden;}
.box .loader{width: 30%;float: left;height: 200px;margin-right: 3%;border: 1px solid #ccc;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%,#333 30%,#333 100%);-webkit-animation:loading1 .6s linear infinite;}
@-webkit-keyframes loading1{
    0%{-webkit-transform:rotate(0deg); }
    50%{-webkit-transform:rotate(180deg); }
    100%{-webkit-transform:rotate(360deg); }
}
.loading-2 i{display: inline-block;width: 4px;height: 35px;border-radius:2px;background: #333;margin:0 2px;}
.loading-2 i:nth-child(1){-webkit-animation:loading2 1s linear .1s infinite;background: #0c9;}
.loading-2 i:nth-child(2){-webkit-animation:loading2 1s linear .2s infinite;background: #0cc;}
.loading-2 i:nth-child(3){-webkit-animation:loading2 1s linear .3s infinite;background: #f09;}
.loading-2 i:nth-child(4){-webkit-animation:loading2 1s linear .4s infinite;background: #00a1f5;}
.loading-2 i:nth-child(5){-webkit-animation:loading2 1s linear .5s infinite;background: green;}
@-webkit-keyframes loading2{
    0%{-webkit-transform:scale(1);}
    50%{-webkit-transform:scale(0.4);}
    100%{-webkit-transform:scale(1);}
}
.loading-3{position: relative;}
.loading-3 i{display: block;height: 15px;width:15px;border-radius: 50%;background:#333;position: absolute;}
.loading-3 i:nth-child(1){top:25px;left:0;-webkit-animation:loading3 1s ease 0s infinite;}
.loading-3 i:nth-child(2){top:17px;left:17px;-webkit-animation:loading3 1s ease -0.12s infinite;}
.loading-3 i:nth-child(3){top:0;left:25px;-webkit-animation:loading3 1s ease -0.24s infinite;}
.loading-3 i:nth-child(4){top:-17px;left:17px;-webkit-animation:loading3 1s ease -0.36s infinite;}
.loading-3 i:nth-child(5){top:-25px;left:0;-webkit-animation:loading3 1s ease -0.48s infinite;}
.loading-3 i:nth-child(6){top:-17px;left:-17px;-webkit-animation:loading3 1s ease -0.6s infinite;}
.loading-3 i:nth-child(7){top:0;left:-25px;-webkit-animation:loading3 1s ease -0.72s infinite;}
.loading-3 i:nth-child(8){top:17px;left:-17px;-webkit-animation:loading3 1s ease -0.84s infinite;}
@-webkit-keyframes loading3{
    50%{-webkit-transform:scale(0.4);opacity:.4;}
    100%{-webkit-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>

在这里插入图片描述

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{margin:0;padding: 0;}
.box{width: 100%;padding:3%;box-sizing:border-box;overflow: hidden;}
.box .loader{width: 30%;float: left;height: 200px;margin-right: 3%;border: 1px solid #ccc;box-sizing:border-box;display: flex;align-items:center;justify-content:center;}
.load1{
    width: 60px;
    height: 60px;
    position: relative;
}
.load1 i{
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: #0c9;
    position: absolute;
    left: 0;
    top:0;
    opacity: 0;
}
.load1 i:nth-child(1){
    -webkit-animation:load1 1s linear 0s infinite;
}
.load1 i:nth-child(2){
    -webkit-animation:load1 1s linear 0.2s infinite;
}
.load1 i:nth-child(3){
    -webkit-animation:load1 1s linear 0.4s infinite;
}
@-webkit-keyframes load1{
    0%{-webkit-transform:scale(0);opacity: 0;}
    50%{-webkit-transform:scale(0);opacity: 1;}
    100%{-webkit-transform:scale(1);opacity: 0;}
}
.load2{
    width: 40px;
    height: 40px;
    position: relative;
}
.load2 i{
    display: block;
    border:2px solid #00a1f5;
    border-color:transparent #00a1f5;
    position: absolute;
    border-radius: 50%;
}
.load2 i:first-child{
    width: 35px;
    height: 35px;
    left: 0;
    top: 0;
    -webkit-animation:load2 1s ease-in-out 0s infinite;
}
.load2 i:last-child{
    width: 15px;
    height: 15px;
    left: 10px;
    top: 10px;
    -webkit-animation:load2 1s ease-in-out 0.5s infinite reverse;
}
@-webkit-keyframes load2{
    0%{-webkit-transform:rotate(0deg) scale(1);}
    50%{-webkit-transform:rotate(180deg) scale(.6);}
    100%{-webkit-transform:rotate(360deg) scale(1);}
}
.load3{
    width: 80px;
    height: 20px;
    position: relative;
}
.load3 i{
    display: block;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #0cc;
    margin-right: 10px;
    position: absolute;
}
.load3 i:nth-of-type(1){
    -webkit-animation:load3 2s linear 0s infinite;
}
.load3 i:nth-of-type(2){
    -webkit-animation:load3 2s linear -0.4s infinite;
}
.load3 i:nth-of-type(3){
    -webkit-animation:load3 2s linear -0.8s infinite;
}
.load3 i:nth-of-type(4){
    -webkit-animation:load3 2s linear -1.2s infinite;
}
.load3 i:nth-of-type(5){
    -webkit-animation:load3 2s linear -1.6s infinite;
}
@-webkit-keyframes load3{
    0%{left:100px;top:0px;}
    80%{left:0px;top:0px;}
    85%{left:0px;top:-20px;width: 20px;height: 20px;}
    90%{width: 40px;height: 20px;}
    95%{left:100px;top:-20px;width: 20px;height: 20px;}
    100%{left:100px;top:0px;}
}
</style>
</head>
<body>
    <div class="box">
        <div class="loader">
            <div class="load1">
                <i></i>
                <i></i>
                <i></i>
            </div>
        </div>
        <div class="loader">
            <div class="load2">
                <i></i>
                <i></i>
            </div>
        </div>
        <div class="loader">
            <div class="load3">
                <i></i>
                <i></i>
                <i></i>
                <i></i>
                <i></i>
            </div>
        </div>
    </div>
</body>
</html>

兔子零-A酱

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
加载动画

<!doctype html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><style>*{margin:0;padding:0;}.box{width: 100%;padding:3%;box-sizing:...
复制链接

扫一扫

专栏目录