又在荒芜中度过一天，收获一点点的东西。时间过得很快，暑假留校的最后一个周，不知道是归心似箭，还是学习太懒散。每天做的东西就很简单，也不想去看书啥的，就做做简单的小动画。
学的不多，但是总结很重要。
今天就写了简单的三种加载方式的动画，下来来总结一下吧。
实现关键：
- css3的动画
- 计时器的控制
- 动画时间跟动画消失时间以及重新加载动画时间的关系
1.下面介绍第一种：直线加载
描述：就类似于手机上那种加载的进度提示，点击加载，屏幕上会出现一条线，一直延长，与屏幕宽度相同时，小时。再点击加载，就重新实现效果。
那先看下效果吧，因为是动态的，截图就不是太明显
点击加载后，会出现一条线不断延长
加载完成，一条线，然后消失，回到原始状态，再次点击加载，会重新加载
效果很简单，下来看下代码的实现吧：
<style>
*{
margin: 0;
padding: 0;
border:0;
}
html,body{
width: 100%;
height: 100%;
overflow:hidden;
}
div{
width: 0;
height: 4px;
background-color: #25AEEA;
margin-top: 200px;
}
#next{
width: 100px;
height: 35px;
border: none;
border-radius: 5px;
background-color: #333333;
color: #FFFFFF;
cursor: pointer;
text-align: center;
margin:80px 800px ;
}
@keyframes mymove {
from {width: 0;}
to {width: 1706px;}
}
</style>
</head>
<body>
<div id="container"> </div>
<input type="button" value="点击加载" id="next" onclick="next()">
<script>
var container = document.getElementById("container");
function next() {
container.style.animation = "mymove 3s linear "; //动画时间为三秒
//若要回到原始状态，就得清除三秒的动画内容。用计时器三秒后删掉增加的样式，就回到了加载前的状态。
setTimeout(
function () {
container.removeAttribute("style");
},3000);
}
</script>
</body>
2.第二种：圆点加载
描述：加载过程中，圆点逐渐变为蓝色并放大，表现出加载效果，完成一次加载后，回复原来状态，点击重新加载，则重新进行加载。
还是先看效果：
点击加载后，圆圈会逐渐放大变成蓝色 点击加载后，圆圈会逐渐放大变成蓝色
加载完成时，都会变成蓝色。随机都恢复原来状态，点击重新加载，则继续重复进行加载
效果就是这样，看下代码实现吧：
<style>
*{
margin: 0;
padding: 0;
}
html,body{
width: 100%;
height: 100%;
background-color: #444444;
}
#container{
margin: 100px 750px ;
}
ul{
list-style-type: none;
}
ul li{
float: left;
position: relative;
width: 20px;
height: 20px;
margin-left: 15px;
}
.light{
width: 20px;
height: 20px;
border-radius: 50%;
border: 1px solid #444444;
box-shadow: 0 0 8px #333333;
}
.ball{
width: 20px;
height: 20px;
position: absolute;
border-radius: 50%;
border: none;
top:1px;
left: 1px;
box-shadow: 0 0 3px #00c6ff;
}
#start{
width: 100px;
height: 30px;
background-color: #333333;
color: #FFFFFF;
text-align: center;
border: none;
border-radius: 5px;
margin: 30px 40px;
}
@keyframes mymoves {
from{
transform:scale(0);
opacity: 0;
}
to{
transform:scale(1);
opacity: 1;
}
}
</style>
</head>
<body>
<div id="container">
<ul>
<li>
<div class="light"></div>
<div class="ball"> </div>
</li>
<li>
<div class="light"></div>
<div class="ball"> </div>
</li>
<li>
<div class="light"></div>
<div class="ball"> </div>
</li>
<li>
<div class="light"></div>
<div class="ball"> </div>
</li>
<li>
<div class="light"></div>
<div class="ball"> </div>
</li>
</ul>
<input type="button" value="开始加载" id="start" onclick="next()">
</div>
<script>
var divs = document.getElementsByClassName("ball");
var input = document.getElementById("start");
function next() {
var i=0;
var t=setInterval(function(){ //控制动画的产生，每秒一个圆点实现动画
divs[i].style.animation = "mymoves 1s ease-out";
divs[i].style.background="#448fea";
i++;
//如果加载完成，则在下一秒全部清空动画，回到原始状态。
if(i === divs.length){
clearInterval(t);
setTimeout(function(){
for( i = 0;i < divs.length; i++){
divs[i].style.backgroundColor="";
divs[i].style.animation = "";
}
i=0;
},1000);
}
},1000);
if(input.value == "开始加载"){
input.value = "重新加载";
}
}
</script>
3.第三种：方格加载
描述：与圆点加载是类似的，只是形状的变化，点击加载后，方格一格格的填充，加载完成后，恢复原始状态。就看下效果吧，代码与圆点加载类似，就不在展示了。
点击加载后，方格逐渐变成蓝色
加载完成，恢复默认的状态，点击重新加载，就会再次进行加载
代码类似，不在展示。
学习不是一件容易的事情。还是需要反复的练习，积累经验，其次不断的学习新的东西。马上结束了，加油！
给你小心心