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 ...
随机推荐
- vim颜色选择＋按<F9>自动编译运行＋其他基本配置(ubuntu)
(以下是ubuntu上的配置........ 但如果你是在window上的,直接用一下配置吧(懒得介绍了)=.= syntax on filetype indent plugin on set rul ...
- Hadoop 面试题之storm 3个
Hadoop 面试题之八 355.metaq 消息队列 zookeeper 集群 storm集群(包括 zeromq,jzmq,和 storm 本身)就可以完成对商城推荐系统功能吗?还有其他的中间件? ...
- JAVA操作ORACLE数据库的存储过程
一.任务提出 JAVA操作oracle11g存储过程实验需要完成以下几个实例: 1.调用没有返回参数的过程(插入记录.更新记录) 2.有返回参数的过程 3.返回列表的过程 4.返回带分页的列表的过程. ...
- 为在韶大痛苦而不能用手机、Pad等上网的同志造福！
目标:共享咱们校园网,让更多的人或更多的设备冲浪去! 基本条件:一台带无线功能的笔记本,一个可以上网的账号与pwd,最好为Windows7以上的操作系统,如果是XP,则需要打个.net framewo ...
- statusbar 样式
1:statusBar字体为白色 在plist里面设置View controller-based status bar appearance 为 NO:设置statusBarStyle 为 UISta ...
- hiho #1305 区间求差
#1305 : 区间求差 时间限制:10000ms 单点时限:1000ms 内存限制:256MB 描述 给定两个区间集合 A 和 B,其中集合 A 包含 N 个区间[ A1, A2 ], [ A3, ...
- Configuration
package edu.fzu.ir.util; import java.io.File; import java.io.FileInputStream; import java.io.FileNot ...
- Python统计百分比及排序
source.txt: 60行 89 91 93 90 92 92 94 92 89 95 93 92 90 92 93 94 94 92 90 92 92 92 ... 统计各个值的百分比,并排序 ...
- 介绍 .Net工具Code Snippet 与 Sql Server2008工具SSMS Tools Pack
不久前,某某在微软写了一个很酷的工具:Visual Stuido2008可视化代码片断工具,这个工具可以在http://www.codeplex.com/SnippetDesigner上免费下载,用它 ...
- phpstorm+Xdebug断点调试PHP
运行环境: PHPSTORM版本 : 8.0.1 PHP版本 : 5.6.2 xdebug版本:php_xdebug-2.2.5-5.6-vc11-x86_64.dll ps : php版本和xdeb ...