CSS3综合动画应用

这里我们主要是使用到的是css3的一部分动画效果。

主要是用到了animation属性比较多。然后这里每个外层的盒子的背景颜色和宽高等基本属性就可以自己随意设置，所以在下面的代码中就不在讲到。（下面我们挑选其中的几个来讲解）

播放器效果1

HTML：
这里行内式就是设置的动画的延迟时间和第一个div距离外层框架的距离。

<div id="box1">
    <div style="margin-top: 10%;"></div>
    <div style="animation-delay: 0.2s;"></div>
    <div style="animation-delay: 0.6s;"></div>
    <div style="animation-delay: 0.4s;"></div>
    <div style="animation-delay: 0.3s;"></div>
    <div style="animation-delay: 0.7s;"></div>
    loading……
   </div>

CSS：
这里我们设置好里面的div的宽为10%，然后通过animation和@keyframes属性来设置当其为100%时的宽度为70%，过度时间为1秒，无限循环。前面我们在行内式中已经设置了动画的不同延迟，所以最后实现的效果如上图。

#box1{
 background-color: lightseagreen;
 text-align: center;
 color: white;
}
#box1 div{
 margin-top: 3%;
 width: 10%;
 height: 7%;
 background-color: white;
 animation: one 1s infinite linear;
}
@keyframes one{
 0%{width: 10%;}
 100%{width: 70%;}
}

播放器效果2

这个类似于声音播放器效果，其实和第一个的方法类似，只是这里设置的高度。
HTML：

<div id="box5">
    <div style="margin-left: 25%;"></div>
    <div style="animation-delay: 0.5s;"></div>
    <div style="animation-delay: 0.1s;"></div>
    <div style="animation-delay: 0.3s;"></div>
    <div style="animation-delay: 0.7s;"></div>
    <div style="animation-delay: 0.2s;"></div>
   </div>

CSS：

#box5 div{
 width: 6px;
 height: 40px;
 background-color: white;
 margin: 0 4px;
 border-radius: 10px;
 animation: five 0.8s infinite;
}
@keyframes five{
 0%{height: 0}
 50%{height: 30%}
 100%{height: 10%;}
}

圆圈

这两个的方法类似，下面我们具体来看看吧。
第一个：
这里是通过设置两个div，一个是外层的圆圈，一个是只有一个边框的¼的圆.然后通过设置rotate属性来实现他的转圈。
HTML：

<div id="box6">
    <div id="circle6">loading……</div>
   </div>

CSS：

#circle6{
 position: relative;
 top: 20%;
 left: 26%;
 width: 40%;
 height: 40%;
 border: white 5px solid;
 border-radius: 50%;
 color: white;
 text-align: center;
 font-size: 13px;
 line-height: 160px;
}
#circle6:before{
 content: '';
 position: absolute;
 top: -9%;
 left: -9%;
 width: 100%;
 height: 100%;
 border: 5px solid transparent;
 border-top: lightgrey 5px solid;
 border-radius: 50%;
  animation: box6 1s infinite linear;
}
@keyframes box6{
 0%{transform: rotate(0deg);}
 100%{transform: rotate(360deg);}
}

第二个：
这一个最外层的圆圈和上一个做法一样，不同的是这里的before设置的样式不是线条，而是一个小球。然后娶她部分和上面都是一样的。
HTML：

<div id="box7">
    <div id="circle7">
     	loading…
     	<span id="block2"></span>
    </div>
 </div>

CSS：
这里用到的动画效果和上面的是同一个所以这里的keyframes和circle部分的样式的代码没有给出。

#block2{
 position: absolute;
 top: calc(50% - 2px);
 left: 50%;
 width: 50%;
 height: 7px;
 background-color: transparent;
 transform-origin: left;
 animation: box6 1.5s infinite linear;
}

//这里是转动的小球的样式设置
#block2::before{
 content: '';
 position: absolute;
 width: 16px;
 height: 16px;
 border-radius: 50%;
 background-color: white;
 top: -6px;
 right: -10px;
}

进度条

这里是通过设置了3个div标记，分别标志进度未满的时候的颜色、进度走过后的颜色和文字。
HTML：

<div id="box9">
    <div class="bg1"></div>
    <div id="bg2"></div>
    <div id="text9">loading……</div>
  </div>

CSS：

.bg1,#bg2,#text9{
 position: relative;
 left: 15%;
 top: 46%;
}
.bg1{
 width: 70%;
 height: 8%;
 background-color: black;
}
#text9,#bg2{margin-top: -8%;}
#text9{
 font-size: 10px;
 text-align: center;
 color: white;
 width: 70%;
 height: 8%;
}
#bg2{
 background-color: darkseagreen;
 width: 10%;
 height: 8%;
 animation: box9 1s infinite;
}
@keyframes box9{
 0%{width: 10%;}
 100%{width: 70%;}
}