css3loading状态3
2016-06-22 16:48
405 查看
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .demo{ width:400px; margin: 50px auto; position: relative; } .demo i{ display: block; width:20px; height: 20px; background:#333; border-radius:50%; position: absolute; } .demo i:nth-child(1){animation:loading-3 2s linear 0s infinite;} .demo i:nth-child(2){animation:loading-3 2s linear -.4s infinite;} .demo i:nth-child(3){animation:loading-3 2s linear -.8s infinite;} .demo i:nth-child(4){animation:loading-3 2s linear -1.2s infinite;} .demo i:nth-child(5){animation:loading-3 2s linear -1.6s infinite;} @keyframes loading-3{ 0%{ left:100px; top:0; } 80%{ left:0px; top:0; } 85%{ left:0px; top:-20px; width:20px; height: 20px; } 90%{ width:40px; height: 20px; } 95%{ width: 20px; height: 20px; top:-20px; left:100px; } 100%{ left:100px; top:0px; } } </style> </head> <body> <div class="demo"> <i></i> <i></i> <i></i> <i></i> <i></i> </div> </body> </html>
相关文章推荐
- css3loading 状态4
- DIV六种实现元素水平居中
- CSS中的绝对定位与相对定位
- css设置placeholder
- ASM disk header 备份与恢复、单机ASM下CSS进程无法启动
- 第二章 CSS工作原理(伪类与伪元素)
- github 各种控件样式(动画效果)
- 第二章 CSS工作原理(ID属性和类选择符)
- CSS3 2D转换
- css3 div 居中
- CSS基础及选择器
- CSS3 选择器
- CSS3 Transitions, Transforms和Animation使用简介
- 第二章 CSS工作原理(剖析CSS规则)
- 网页学习之div,span,CSS
- 解决css中input输入框点击时去掉外边框方法【outline:medium;】
- JS获取最终样式
- CSS中的像素px转换成rem的注意点
- CSS中什么时候用id什么时候用class
- CSS介绍、选择器