Rumah > Artikel > hujung hadapan web > 分享CSS3中3个Loading 设计的实例代码（二）
分享CSS3中3个Loading 设计的实例代码（二）
- 零下一度asal
- 2017-05-05 15:20:591527semak imbas
这是 CSS Loading 设计的第二篇文章，其实很多内容都包含在第一篇中，所以这篇文章中对属性的介绍也会相对少些，如果碰到不明白的属性，请参考上一篇文章中的内容。
CSS Loading 设计（一）
Loading one
Paste_Image.png
这样看起来没有任何动画效果，如果在这里展示我还要用屏幕录制视屏，然后转化为图片，感觉太过于麻烦，不知道有没有什么简便的方法，如果有，请教教我。好了，下面我们看看这个动画效果该怎么做，首先还是来看看 Html 代码
<p class="box">
<p class="loader">
<i></i>
<i></i>
<i></i>
</p>
</p>可见，这指示两个 p 标签的嵌套，十分的简单，下面就看看 CSS 代码
.box {
width: 100%;
padding: 3%;
}
.loader {
width: 30%;
height: 200px;
margin: 50px auto;
border: 1px solid chocolate;
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: center;
position: relative;
}
.loader i {
width: 60px;
height: 60px;
border-radius: 50%;
background-color: #333333;
position: absolute;
opacity:0;
}可见，这些代码和第一篇文章中的几乎一模一样，其实不止是这个效果，接下来的三个效果也都是这么设计的，唯一不同的地方就是动画的设计不同。
@-webkit-keyframes loading {
0%{
transform: scale(0);
opacity: 0;
}
5%{
opacity: 1;
}
100%{
transform: scale(1);
opacity:0;
}
}下面我来解释一下这个动画到底是什么意思。
1. 0% ： 这个时候将我们画的圆形缩放为 0%，透明度也是 0 2. 5% ： 这个时候将透明度设置为 1 ，也就是图形是出于可见的状态， 但是这个时候图形已经被缩放为 0，所以还是什么东西都看不到。 3. 100% : 注意在 100 % 的状态下，图形被缩放为原始状态，但是透明度为0，这说明了什么？ 这说明在 5% - 100% 过程中，图形逐渐出现，但是透明度逐渐降低，这样就会出现一个动画效果。
好了，既然动画效果已经定义好了，那就去给我们的 i 标签设置吧。
.loader i:nth-child(1){
-webkit-animation: loading 1s linear 0s infinite;
}
.loader i:nth-child(2){
-webkit-animation: loading 1s linear 0.2s infinite;
}
.loader i:nth-child(3){
-webkit-animation: loading 1s linear 0.4s infinite;
}好了，到这里第一个动画效果就出现了。建议亲自实践一下，看一下具体的效果，个人感觉这个动画还是挺好看的。
Loading two
Paste_Image.png
说实话，这是本人最喜欢的一个动画效果，十分有趣。看 Html 代码
<p class="box">
<p class="loader">
<p class="loader-child">
<i></i>
<i></i>
</p>
</p>
</p>这里的 CSS 代码和上面就有一点差异了，下面我来分析一下
.box {
width: 100%;
padding: 3%;
}
.loader {
width: 30%;
height: 200px;
margin: 50px auto;
border: 1px solid chocolate;
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: center;
}
.loader-child {
width: 40px;
height: 40px;
position: relative;
}
.loader-child i {
display: block;
border: 2px solid #333333;
border-color: transparent #333333;
border-radius: 50%;
position: absolute;
}
.loader-child i:first-child {
width: 35px;
height: 35px;
top: 0;
left: 0;
-webkit-animation: loading 1s ease-in-out 0s infinite;
}
.loader-child i:last-child {
width: 15px;
height: 15px;
top: 10px;
left: 10px;
-webkit-animation: loading 1s ease-in-out 0.5s infinite reverse;
}可见在第四个块中有这么一行代码 border-color: transparent #333333; 本来我们设定的是画一个圆形，由于我们需要的并不是一个圆形，设置了这行属性之后，就会每隔 1/4 个圆弧变换颜色属性，也就是透明和 #333333 进行变化，就达到了我们想要的图形效果。
还有，我们针对每个 i 标签设置了 top,left 属性，这两个属性需要配合 position 进行使用，具体怎么使用我们也在上一篇文章做了介绍，设置了这么两个属性之后，达到的效果就是一个大圆包含一个小圆，也就是图片中的效果。
注意看 last-child 动画效果，我们在末尾加上了一个 reverse, 意思就是逆时针执行。
好了，下面我们来看看动画
@-webkit-keyframes loading {
0% {
transform: rotate(0deg) scale(1);
}
50% {
transform: rotate(180deg) scale(0.6);
}
100% {
transform: rotate(360deg) scale(1);
}
}动画是怎么样一个效果，结合我上面对动画的执行分析，你可能就已经能模拟出这个动画的效果了，是的，非常炫酷的一个效果。
Loading three
Paste_Image.png
这个动画我感觉非常的难，由于我接触 CSS 也才几天光景，很多属性的设置我都不明所以然，一直在网上搜寻各种资料，直到现在理解的也不是很透彻，下面就将我所掌握的分享一下，至于那些我也不太清楚地属性，还希望各路大仙教教我。还是老样子，先来看看 HTML 代码
<p class="box">
<p class="loader">
<p class="loader-child">
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
</p>
</p>
</p>可以很明显的看到，这里多包涵了一层 p 标签，主要是为了配合 position 属性的使用。
.box{
width: 100%;
padding: 3%;
}
.loader{
width:30%;
height: 200px;
border: 1px solid chocolate;
box-sizing: border-box;
margin: 50px auto;
display: flex;
align-items: center;
justify-content: center;
}
.loader-child{
width: 80px;
height: 20px;
position: relative;
}
.loader-child i{
display: block;
width: 20px;
height: 20px;
border-radius: 50%;
background-color: #333333;
margin-right: 10px;
position: absolute;
}这个时候我们虽然有 5 个 i 标签，但是却只能看到一个圆形，不是预期的 5 个，这是这么回事？我也不太清楚。
下面来看看动画效果
@-webkit-keyframes loading {
0%{
left: 100px;
top: 0;
}
80%{
left:0;
top:0;
}
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:0;
}
}1. 0% - 80% ： 图形从距离父元素左边距为 100 px 的位置移动到 0 px，上边距不变，也就是水平移动。 2. 80% - 85% ： 图形的左边距不变，但是上移 20 px，而且图形的宽高设置为 20px 3. 85% - 90% : 图形的位置不变化，但是此时图形的宽拓宽到 40px 4. 90% - 95% ： 图形开始向右移动，移动100 px并且将宽复原为 20px 5. 95% - 100% ： 图形回到起始位置。
下面就是对每个元素设置动画效果
.loader-child i:nth-child(1){
-webkit-animation: loading 2s linear 0s infinite;
}
.loader-child i:nth-child(2){
-webkit-animation: loading 2s linear -0.4s infinite;
}
.loader-child i:nth-child(3){
-webkit-animation: loading 2s linear -0.8s infinite;
}
.loader-child i:nth-child(4){
-webkit-animation: loading 2s linear -1.2s infinite;
}
.loader-child i:nth-child(5){
-webkit-animation: loading 2s linear -1.6s infinite;
}好了，就讲到这里，欢迎反馈，互相学习。
【相关推荐】
1. 免费css在线视频教程
2. css在线手册
Atas ialah kandungan terperinci 分享CSS3中3个Loading 设计的实例代码（二）. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!