十年网站开发经验 + 多家企业客户 + 靠谱的建站团队
量身定制 + 运营维护+专业推广+无忧售后,网站问题一站解决
会动的小球,设计html,css知识点,另外动画是完全用css做的,很简单便捷哦~这只是一个小小的案例 ,以后为大家提供更多的案例!!
会动的小球
成都创新互联服务项目包括资兴网站建设、资兴网站制作、资兴网页制作以及资兴网络营销策划等。多年来,我们专注于互联网行业,利用自身积累的技术优势、行业经验、深度合作伙伴关系等,向广大中小型企业、政府机构等提供互联网行业的解决方案,资兴网站推广取得了明显的社会效益与经济效益。目前,我们服务的客户以成都为中心已经辐射到资兴省份的部分城市,未来相信会继续扩大服务区域并继续获得客户的支持与信任!
**
CSS3 loading图标
```**``
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;
}
}