web前端开发:css3实现loading
web前端开发:css3实现loading
有大量web前端开发工具及学习资料，可以搜群【 web前端学习部落22群 】进行下载，遇到学习问题也可以问群内专家以及课程老师哟
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>loading</title>
<style>
.container{width: 300px;height: 300px;position: relative;margin:50px auto;}
.circle{width: 100px;height: 100px;position: absolute;border-radius: 50%;}
#one{left: 0;top: 0;background:#f00;animation: move1 2s ease-in-out infinite;
-webkit-animation: move1 2s ease-in-out infinite;/*infinite动画无限播放*/
-moz-animation: move1 2s ease-in-out infinite;
-ms-animation: move1 2s ease-in-out infinite;
}
#two{right: 0;top: 0;background:#000;animation: move2 2s ease-in-out infinite;
-webkit-animation: move2 2s ease-in-out infinite;/*infinite动画无限播放*/
-moz-animation: move2 2s ease-in-out infinite;
-ms-animation: move2 2s ease-in-out infinite;
}
#three{left: 0;bottom: 0;background:blue;animation: move3 2s ease-in-out infinite;
-webkit-animation: move3 2s ease-in-out infinite;/*infinite动画无限播放*/
-moz-animation: move3 2s ease-in-out infinite;
-ms-animation: move3 2s ease-in-out infinite;
}
#four{right: 0;bottom: 0;background:yellow;animation: move4 2s ease-in-out infinite;
-webkit-animation: move4 2s ease-in-out infinite;/*infinite动画无限播放*/
-moz-animation: move4 2s ease-in-out infinite; -ms-animation: move4 2s ease-in-out infinite;
}
/*动画*/
@keyframes move1{
0%{transform: translate(0,0)}
50%{transform: translate(200px,200px)}
100%{transform: translate(0,0)}
}
-webkit-@keyframes move1{
0%{transform: translateX(0) translateY(0)}
50%{transform: translateX(200px) translateY(200px)}
100%{transform: translateX(0) translateY(0)}
}
@keyframes move2{
0%{transform: translate(0,0)}
50%{transform: translate(-200px,200px)}
100%{transform: translate(0,0)}
}
-webkit-@keyframes move2{
0%{transform: translateX(0) translateY(0)}
50%{transform: translateX(-200px) translateY(200px)}
100%{transform: translateX(0) translateY(0)}
}
@keyframes move3{
0%{transform: translate(0,0)}
50%{transform: translate(200px,-200px)}
100%{transform: translate(0,0)}
}
-webkit-@keyframes move3{
0%{transform: translateX(0) translateY(0)}
50%{transform: translateX(200px) translateY(-200px)}
100%{transform: translateX(0) translateY(0)}
}
@keyframes move4{
0%{transform: translate(0,0)}
50%{transform: translate(-200px,-200px)}
100%{transform: translate(0,0)}
}
-webkit-@keyframes move4{
0%{transform: translateX(0) translateY(0)}
50%{transform: translateX(-200px) translateY(-200px)}
100%{transform: translateX(0) translateY(0)}
}
-o-@keyframes move4{
0%{transform: translateX(0) translateY(0)}
50%{transform: translateX(-200px) translateY(-200px)}
100%{transform: translateX(0) translateY(0)}
}
-ms-@keyframes move4{
0%{transform: translateX(0) translateY(0)}
50%{transform: translateX(-200px) translateY(-200px)}
100%{transform: translateX(0) translateY(0)}
}
</style>
</head>
<body>
<div class="container">
<div class="circle" id="one"></div>
<div class="circle" id="two"></div>
<div class="circle" id="three"></div>
<div class="circle" id="four"></div>
</div>
</body>
</html>
有大量web前端开发工具及学习资料，可以搜群【 web前端学习部落22群 】进行下载，遇到学习问题也可以问群内专家以及课程老师哟
web前端开发:css3实现loading的更多相关文章
- 1+x 证书 Web 前端开发 CSS3 专项练习
官方QQ群 1+x 证书 Web 前端开发 CSS3 专项练习 http://blog.zh66.club/index.php/archives/196/
- 1+x证书Web前端开发CSS3详细教程
web 前端开发之 CSS3 新特性 http://blog.zh66.club/index.php/archives/189/ web 前端开发之 html5 新特性 http://blog.zh6 ...
- 1+x 证书 web 前端开发初级对应课程分析
响应国家号召 1+X 证书 Web 前端开发考试样题 官方QQ群 1+x 证书 web 前端开发初级对应课程分析 http://blog.zh66.club/index.php/archives/19 ...
- 响应国家号召 1+X 证书 Web 前端开发考试模拟题
1+x证书Web前端开发初级理论考试样题2019 http://blog.zh66.club/index.php/archives/149/ 1+x证书Web前端开发初级实操考试样题2019 http ...
- Web 前端开发精华文章推荐（HTML5、CSS3、jQuery）【系列二十三】
<Web 前端开发精华文章推荐>2014年第2期(总第23期)和大家见面了.梦想天空博客关注 前端开发 技术,分享各类能够提升网站用户体验的优秀 jQuery 插件,展示前沿的 HTML5 ...
- Web 前端开发精华文章推荐（jQuery、HTML5、CSS3）【系列十二】
2012年12月12日,[<Web 前端开发人员和设计师必读文章>系列十二]和大家见面了.梦想天空博客关注 前端开发 技术,分享各种增强网站用户体验的 jQuery 插件,展示前沿的 HT ...
- Web 前端开发精华文章集锦（jQuery、HTML5、CSS3）【系列十七】
<Web 前端开发精华文章推荐>2013年第五期(总第十七期)和大家见面了.梦想天空博客关注 前端开发 技术,分享各种增强网站用户体验的 jQuery 插件,展示前沿的 HTML5 和 C ...
- Web 前端开发精华文章推荐（HTML5、CSS3、jQuery）【系列二十二】
<Web 前端开发精华文章推荐>2014年第一期(总第二十二期)和大家见面了.梦想天空博客关注 前端开发 技术,分享各类能够提升网站用户体验的优秀 jQuery 插件,展示前沿的 HTML ...
- Web 前端开发精华文章集锦（jQuery、HTML5、CSS3）【系列二十】
<Web 前端开发精华文章推荐>2013年第八期(总第二十期)和大家见面了.梦想天空博客关注 前端开发 技术,分享各种增强网站用户体验的 jQuery 插件,展示前沿的 HTML5 和 C ...
随机推荐
- C语言中可变参数函数实现原理
C函数调用的栈结构 可变参数函数的实现与函数调用的栈结构密切相关,正常情况下C的函数参数入栈规则为__stdcall, 它是从右到左的,即函数中的最右边的参数最先入栈.例如,对于函数: void fu ...
- SQL Server 查询、搜索命令、语句
--查询所有表 SELECT NAME,* FROM SYSOBJECTS WHERE XTYPE='U' order by SYSOBJECTS.name --查询所有存储过程 select * f ...
- 0821找不到Command Line Utility的解决方案
在Object-C基础教程中写到,要求选择Xcode中Mac OS X - Command Line Utility - Foundation Tool 但在Xcode4.5中Mac OS X中没有C ...
- gc是什么，什么时候需要gc
Java是由C++发展来的. 它摈弃了C++中一些繁琐容易出错的东西.其中有一条就是这个GC. 写C/C++程序,程序员定义了一个变量,就是在内存中开辟了一段相应的空间来存值.内存再大也是有限的,所以 ...
- Unity手游之路<四>3d旋转-四元数,欧拉角和变幻矩阵
http://blog.csdn.net/janeky/article/details/17272625 今天我们来谈谈关于Unity中的旋转.主要有三种方式.变换矩阵,四元数和欧拉角. 定义 变换矩 ...
- tab切换，滑动门
<SCRIPT type=text/javascript> jQuery(document).ready(function () { changediv([" ...
- sqlmap笔记本
/* 转载请注明出处 ID:珍惜少年时 */ 相关命令--current-user #当前数据库用户--privileges #查看当前数据库权限--dbms=mssql #指定数据库的类型--os- ...
- C++内存分配方式
参考:http://www.cnblogs.com/daocaoren/archive/2011/06/29/2092957.html http://www.cnblogs.com/skydesign ...
- xdebug调试php程序
相关设置 xdebug.default_enable=1 默认是1,当错误出现时,堆栈跟踪会激活.可以在代码中通过xdebug_disable()来关闭它. xdebug.force_display_ ...
- Java计算程序运行时间
public static void main(String[] args) { // TODO Auto-generated method stub long nd = 1000 * 24 * 60 ...