会动的小球，设计html,css知识点，另外动画是完全用css做的，很简单便捷哦~这只是一个小小的案例 ，以后为大家提供更多的案例！！
会动的小球

成都创新互联服务项目包括资兴网站建设、资兴网站制作、资兴网页制作以及资兴网络营销策划等。多年来，我们专注于互联网行业，利用自身积累的技术优势、行业经验、深度合作伙伴关系等，向广大中小型企业、政府机构等提供互联网行业的解决方案，资兴网站推广取得了明显的社会效益与经济效益。目前，我们服务的客户以成都为中心已经辐射到资兴省份的部分城市，未来相信会继续扩大服务区域并继续获得客户的支持与信任！

**














```**``
css部分：
div#loading-3{
position: relative;
width: 160px;
height: 80px;
margin: 100px auto;
}
div#loading-3 span.item{
display: block;
position: absolute;
top: 25px;
width: 30px;
height: 30px;
border-radius: 50%;
animation-duration: 1.2s;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
animation-direction: alternate;
}
div#loading-3 span.item.item-1{
left: 25px;
background-color: #2ecc71;
animation-name: loading_green;
}
div#loading-3 span.item.item-2{
right: 25px;
background-color: #e74c3c;
animation-name: loading_red;
}
@keyframes loading_green{
0%{
left: 25px;
width: 30px;
height: 30px;
background-color: #2ecc71;
}
50%{
left: 100px;
width: 40px;
height: 40px;
background-color: #9b59b6;
}
100%{
left: 25px;
width: 30px;
height: 30px;
background-color: #e74c3c;
}
}
@keyframes loading_red{
0%{
right: 25px;
width: 30px;
height: 30px;
background-color: #e74c3c;
}
50%{
right: 100px;
width: 40px;
height: 40px;
background-color: #9b59b6;
}
100%{
right: 25px;
width: 30px;
height: 30px;
background-color: #2ecc71;
}
}

文章名称：纯CSS动画打造~会动的小球
转载来源：http://scyingshan.cn/article/ggjppg.html