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 ...
随机推荐
- SparkSql 不支持Date Format （支持Timestamp）
最近项目中需要用到sparksql ,需要查询sql Date类型, 无奈,官方现阶段 1.6.0 还不支持Date类型,不过支持Timestamp类型,所以问题可以解决了. 1.解析 SimpleD ...
- json不转化值是null的字段
今天写东西,发现JSONObject.fromObject(),方法,会把value是null的字段,转为0或"",就自己写了一个方法,如果value是null就不转换 packa ...
- Linux下查看nginx安装目录
输入命令行: ps -ef | grep nginx master process后边的目录即是.
- Effective Java 读书笔记之一 创建和销毁对象
一.考虑用静态工厂方法代替构造器 这里的静态工厂方法是指类中使用public static 修饰的方法,和设计模式的工厂方法模式没有任何关系.相对于使用共有的构造器来创建对象,静态工厂方法有几大优势: ...
- leetcode150 Evaluate Reverse Polish Notation
Evaluate the value of an arithmetic expression in Reverse Polish Notation. Valid operators are +, -, ...
- win32程序组成
程序代码+UI资源——RC编译器整合——>EXE档案. UI资源:二进制代码(借助工具产生,并以各种扩展名的文件存在),程序员必须在资源描述文档(.rc)中描述他们. RC编译器(RC.EXE) ...
- Linux之编译需要的文件变化时刻
- zencart安装后修改configure.php权限
刚安装完zencart的时候,打开前台页面会遇到下面的安全提示: “警告: 配置文件允许写入: E:\upupw\htdocs\mysite\includes\configure.php,存在安全隐患 ...
- hdu1520 树形dp Anniversary party
A - Anniversary party Time Limit:1000MS Memory Limit:32768KB 64bit IO Format:%I64d & %I6 ...
- Java Dao设计模式
一.信息系统的开发架构 客户层-------显示层-------业务层---------数据层---------数据库 1.客户层:客户层就是客户端,简单的来说就是浏览器. 2.显示层:JSP/S ...