Javascript 如何创建自定义CSS3加载循环？

我想创建CSS3加载循环，如下所示：

内圈将使用定时器增长

问题是，我可以用什么技术来像这样增长内圈

我有这个CSS代码：

.circle {
width:100px;
height:100px;
border-radius:50px;
background:#fff;
}

.circle

只是一个

div

外圈可以用作背景图像，因为它是静态的。它永远不会改变，只有内部的会根据计时器而改变。

<style>
#floatingCirclesG{
position:relative;
width:128px;
height:128px;
-moz-transform:scale(0.6);
-webkit-transform:scale(0.6);
-ms-transform:scale(0.6);
-o-transform:scale(0.6);
transform:scale(0.6);
}

.f_circleG{
position:absolute;
background-color:#FFFFFF;
height:23px;
width:23px;
-moz-border-radius:12px;
-moz-animation-name:f_fadeG;
-moz-animation-duration:1.04s;
-moz-animation-iteration-count:infinite;
-moz-animation-direction:linear;
-webkit-border-radius:12px;
-webkit-animation-name:f_fadeG;
-webkit-animation-duration:1.04s;
-webkit-animation-iteration-count:infinite;
-webkit-animation-direction:linear;
-ms-border-radius:12px;
-ms-animation-name:f_fadeG;
-ms-animation-duration:1.04s;
-ms-animation-iteration-count:infinite;
-ms-animation-direction:linear;
-o-border-radius:12px;
-o-animation-name:f_fadeG;
-o-animation-duration:1.04s;
-o-animation-iteration-count:infinite;
-o-animation-direction:linear;
border-radius:12px;
animation-name:f_fadeG;
animation-duration:1.04s;
animation-iteration-count:infinite;
animation-direction:linear;
}

#frotateG_01{
left:0;
top:52px;
-moz-animation-delay:0.39s;
-webkit-animation-delay:0.39s;
-ms-animation-delay:0.39s;
-o-animation-delay:0.39s;
animation-delay:0.39s;
}

#frotateG_02{
left:15px;
top:15px;
-moz-animation-delay:0.52s;
-webkit-animation-delay:0.52s;
-ms-animation-delay:0.52s;
-o-animation-delay:0.52s;
animation-delay:0.52s;
}

#frotateG_03{
left:52px;
top:0;
-moz-animation-delay:0.65s;
-webkit-animation-delay:0.65s;
-ms-animation-delay:0.65s;
-o-animation-delay:0.65s;
animation-delay:0.65s;
}

#frotateG_04{
right:15px;
top:15px;
-moz-animation-delay:0.78s;
-webkit-animation-delay:0.78s;
-ms-animation-delay:0.78s;
-o-animation-delay:0.78s;
animation-delay:0.78s;
}

#frotateG_05{
right:0;
top:52px;
-moz-animation-delay:0.91s;
-webkit-animation-delay:0.91s;
-ms-animation-delay:0.91s;
-o-animation-delay:0.91s;
animation-delay:0.91s;
}

#frotateG_06{
right:15px;
bottom:15px;
-moz-animation-delay:1.04s;
-webkit-animation-delay:1.04s;
-ms-animation-delay:1.04s;
-o-animation-delay:1.04s;
animation-delay:1.04s;
}

#frotateG_07{
left:52px;
bottom:0;
-moz-animation-delay:1.17s;
-webkit-animation-delay:1.17s;
-ms-animation-delay:1.17s;
-o-animation-delay:1.17s;
animation-delay:1.17s;
}

#frotateG_08{
left:15px;
bottom:15px;
-moz-animation-delay:1.3s;
-webkit-animation-delay:1.3s;
-ms-animation-delay:1.3s;
-o-animation-delay:1.3s;
animation-delay:1.3s;
}

@-moz-keyframes f_fadeG{
0%{
background-color:#000000}

100%{
background-color:#FFFFFF}

}

@-webkit-keyframes f_fadeG{
0%{
background-color:#000000}

100%{
background-color:#FFFFFF}

}

@-ms-keyframes f_fadeG{
0%{
background-color:#000000}

100%{
background-color:#FFFFFF}

}

@-o-keyframes f_fadeG{
0%{
background-color:#000000}

100%{
background-color:#FFFFFF}

}

@keyframes f_fadeG{
0%{
background-color:#000000}

100%{
background-color:#FFFFFF}

}

</style>
<div id="floatingCirclesG">
<div class="f_circleG" id="frotateG_01">
</div>
<div class="f_circleG" id="frotateG_02">
</div>
<div class="f_circleG" id="frotateG_03">
</div>
<div class="f_circleG" id="frotateG_04">
</div>
<div class="f_circleG" id="frotateG_05">
</div>
<div class="f_circleG" id="frotateG_06">
</div>
<div class="f_circleG" id="frotateG_07">
</div>
<div class="f_circleG" id="frotateG_08">
</div>
</div>

#浮圈{
位置：相对位置；
宽度：128px；
高度：128px；
-moz变换：比例（0.6）；
-webkit变换：比例（0.6）；
-ms变换：标度（0.6）；
-o变换：标度（0.6）；
变换：比例（0.6）；
}
f_圈腿{
位置：绝对位置；
背景色：#FFFFFF；
高度：23px；
宽度：23px；
-moz边界半径：12px；
-moz动画名称：f_fadeG；
-moz动画持续时间：1.04s；
-moz动画迭代次数：无限；
-moz动画方向：线性；
-webkit边界半径：12px；
-webkit动画名称：f_fadeG；
-webkit动画持续时间：1.04秒；
-webkit动画迭代计数：无限；
-webkit动画方向：线性；
-ms边界半径：12px；
-ms动画名称：f_fadeG；
-ms动画持续时间：1.04s；
-ms动画迭代次数：无限；
-ms动画方向：线性；
-o-边界半径：12px；
-o-animation-name:f_fadeG；
-o-动画持续时间：1.04s；
-o-动画-迭代-计数：无限；
-o方向：线性；
边界半径：12px；
动画名称：f_fadeG；
动画持续时间：1.04秒；
动画迭代次数：无限；
动画方向：线性；
}
#frotateG_01{
左：0；
顶部：52px；
-moz动画延迟：0.39s；
-webkit动画延迟：0.39s；
-ms动画延迟：0.39s；
-o-动画延迟：0.39s；
动画延迟：0.39s；
}
#frotateG_02{
左：15px；
顶部：15px；
-moz动画延迟：0.52s；
-webkit动画延迟：0.52s；
-ms动画延迟：0.52s；
-o-动画延迟：0.52s；
动画延迟：0.52s；
}
#frotateG_03{
左：52px；
排名：0；
-moz动画延迟：0.65s；
-webkit动画延迟：0.65s；
-ms动画延迟：0.65s；
-o-动画延迟：0.65s；
动画延迟：0.65s；
}
#frotateG_04{
右：15px；
顶部：15px；
-moz动画延迟：0.78s；
-webkit动画延迟：0.78s；
-ms动画延迟：0.78s；
-o-动画延迟：0.78s；
动画延迟：0.78s；
}
#frotateG_05{
右：0；
顶部：52px；
-moz动画延迟：0.91s；
-webkit动画延迟：0.91s；
-ms动画延迟：0.91s；
-o-动画延迟：0.91s；
动画延迟：0.91s；
}
#frotateG_06{
右：15px；
底部：15px；
-moz动画延迟：1.04s；
-webkit动画延迟：1.04s；
-毫秒动画延迟：1.04s；
-o-动画延迟：1.04s；
动画延迟：1.04s；
}
#frotateG_07{
左：52px；
底部：0；
-moz动画延迟：1.17s；
-webkit动画延迟：1.17s；
-ms动画延迟：1.17s；
-o-动画延迟：1.17s；
动画延迟：1.17秒；
}
#frotateG_08{
左：15px；
底部：15px；
-moz动画延迟：1.3s；
-webkit动画延迟：1.3s；
-ms动画延迟：1.3s；
-o-动画延迟：1.3s；
动画延迟：1.3s；
}
@-moz关键帧f_fadeG{
0%{
背景色：#000000}
100%{
背景色：#FFFFFF}
}
@-webkit关键帧f_fadeG{
0%{
背景色：#000000}
100%{
背景色：#FFFFFF}
}
@-ms关键帧f_fadeG{
0%{
背景色：#000000}
100%{
背景色：#FFFFFF}
}
@-f_fadeG的o-关键帧{
0%{
背景色：#000000}
100%{
背景色：#FFFFFF}
}
@f_fadeG的关键帧{
0%{
背景色：#000000}
100%{
背景色：#FFFFFF}
}

要创建这样的加载程序，您可以尝试HTML

在第一个示例中，仅创建两个div，由于边界半径属性，它们将采用圆形

<div class="ball"></div>
<div class="ball1"></div>

第二个示例CSS3加载动画循环 HTML

第二个示例与标记的示例相同，主要区别在于CSS

<div class="circle"></div>
<div class="circle1"></div>

第三个示例CSS3加载动画循环 HTML

在这个最新的示例中，我们发现了一个简单的循环，该循环由于transform:scale属性而设置了动画。 标记比它的前一个标记长，但这可能因要插入的块而异

<div id="block_1" class="barlittle"></div>
<div id="block_2" class="barlittle"></div>
<div id="block_3" class="barlittle"></div>
<div id="block_4" class="barlittle"></div>
<div id="block_5" class="barlittle"></div>

结论

---

我希望通过本教程，您学习了如何仅使用CSS3属性创建简单的动画循环。

您可能能够适应CSS技巧演示@andyb非常感谢，这就是我要找的

.circle {
    background-color: rgba(0,0,0,0);
    border: 5px solid rgba(0,183,229,0.9);
    opacity: .9;
    border-right: 5px solid rgba(0,0,0,0);
    border-left: 5px solid rgba(0,0,0,0);
    border-radius: 50px;
    box-shadow: 0 0 35px #2187e7;
    width: 50px;
    height: 50px;
    margin: 0 auto;
    -moz-animation: spinPulse 1s infinite ease-in-out;
    -webkit-animation: spinPulse 1s infinite linear;
}

.circle1 {
    background-color: rgba(0,0,0,0);
    border: 5px solid rgba(0,183,229,0.9);
    opacity: .9;
    border-left: 5px solid rgba(0,0,0,0);
    border-right: 5px solid rgba(0,0,0,0);
    border-radius: 50px;
    box-shadow: 0 0 15px #2187e7;
    width: 30px;
    height: 30px;
    margin: 0 auto;
    position: relative;
    top: -50px;
    -moz-animation: spinoffPulse 1s infinite linear;
    -webkit-animation: spinoffPulse 1s infinite linear;
}

@-moz-keyframes spinPulse {
    0% {
        -moz-transform: rotate(160deg);
        opacity: 0;
        box-shadow: 0 0 1px #2187e7;
    }

    50% {
        -moz-transform: rotate(145deg);
        opacity: 1;
    }

    100% {
        -moz-transform: rotate(-320deg);
        opacity: 0;
    };
}

@-moz-keyframes spinoffPulse {
    0% {
        -moz-transform: rotate(0deg);
    }

    100% {
        -moz-transform: rotate(360deg);
    };
}

@-webkit-keyframes spinPulse {
    0% {
        -webkit-transform: rotate(160deg);
        opacity: 0;
        box-shadow: 0 0 1px #2187e7;
    }

    50% {
        -webkit-transform: rotate(145deg);
        opacity: 1;
    }

    100% {
        -webkit-transform: rotate(-320deg);
        opacity: 0;
    };
}

@-webkit-keyframes spinoffPulse {
    0% {
        -webkit-transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
    };
}

<div id="block_1" class="barlittle"></div>
<div id="block_2" class="barlittle"></div>
<div id="block_3" class="barlittle"></div>
<div id="block_4" class="barlittle"></div>
<div id="block_5" class="barlittle"></div>

.barlittle {
    background-color: #2187e7;
    background-image: -moz-linear-gradient(45deg, #2187e7 25%, #a0eaff);
    background-image: -webkit-linear-gradient(45deg, #2187e7 25%, #a0eaff);
    border-left: 1px solid #111;
    border-top: 1px solid #111;
    border-right: 1px solid #333;
    border-bottom: 1px solid #333;
    width: 10px;
    height: 10px;
    float: left;
    margin-left: 5px;
    opacity: 0.1;
    -moz-transform: scale(0.7);
    -webkit-transform: scale(0.7);
    -moz-animation: move 1s infinite linear;
    -webkit-animation: move 1s infinite linear;
}

#block_1 {
    -moz-animation-delay: .4s;
    -webkit-animation-delay: .4s;
}

#block_2 {
    -moz-animation-delay: .3s;
    -webkit-animation-delay: .3s;
}

#block_3 {
    -moz-animation-delay: .2s;
    -webkit-animation-delay: .2s;
}

#block_4 {
    -moz-animation-delay: .3s;
    -webkit-animation-delay: .3s;
}

#block_5 {
    -moz-animation-delay: .4s;
    -webkit-animation-delay: .4s;
}

@-moz-keyframes move {
    0% {
        -moz-transform: scale(1.2);
        opacity: 1;
    }

    100% {
        -moz-transform: scale(0.7);
        opacity: 0.1;
    };
}

@-webkit-keyframes move {
    0% {
        -webkit-transform: scale(1.2);
        opacity: 1;
    }

    100% {
        -webkit-transform: scale(0.7);
        opacity: 0.1;
    };
}