仅用CSS3创建h5预加载跳动圈
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#box{
width: 400px;
height: 400px;
margin: 100px auto 0;
position: relative;
}
span{
position: absolute;
width: 16px;
height: 16px;
border-radius: 50%;
background: #fff;
-webkit-animation: a 1s infinite linear;
}
span:nth-child(1){
left: 0px;
-webkit-animation-delay: 0s;
}
span:nth-child(2){
left: 20px;
-webkit-animation-delay: 0.25s;
}
span:nth-child(3){
left: 40px;
-webkit-animation-delay: 0.5s;
}
span:nth-child(4){
left: 60px;
-webkit-animation-delay: 0.75s;
}
span:nth-child(5){
left: 80px;
-webkit-animation-delay: 1s;
}
@-webkit-keyframes a{
0%{-webkit-transform: translateY(0px); opacity: 0.5;}
50%{-webkit-transform: translateY(-30px); opacity: 1;}
100%{-webkit-transform: translateY(0px); opacity: 0.5;}
}
</style>
</head>
<body style="background-color: royalblue;">
<div id="box">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</body>
最新文章
- ORA-01652：无法通过128(在表空间temp中)扩展temp段 解决方法
- Nginx的安装配置
- mysql备份还原
- CSS选择器和jQuery选择器的区别与联系之一
- MATLAB学习笔记（六）——MATLAB数据分析与多项式计算
- 斜率dp cdq 分治
- latex之设置字体大小
- hdu 2059(dp)
- Nginx的session一致性问题
- 【转】C#.net拖拽实现获得文件路径
- Sql Server中三种字符串合并方法的性能比较
- java多线程设计模式
- "双非"应届生校招如何获得大厂青睐?（内附技术岗超全求职攻略）
- Windows环境下安装配置Mosquitto服务及入门操作介绍
- properties文件读取工具类
- html5与css3面试题（1）
- Jquery的window.onload实现
- windows下端口映射（端口转发）
- Fiddler 简单介绍
- js传入和传出参数乱码