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 ...
随机推荐
- 第五天 loadmore
mutating func loadFresh(completion: (result: APIResult<DeserializedType>) -> ()) -> Canc ...
- Centos ftp服务器安装配置
yum install vsftpd [root@localhost ftp]# /sbin/service vsftpd restart 查看FTP目录 # more /etc/passwd|gre ...
- git之remote repository create（远程仓库创建）
参考:Git教程 - 廖雪峰的官方网站 1.在Git bash窗口执行如下指令创建SSH KEY: ssh-keygen -t rsa -C "sunjf@biomarker.com.cn& ...
- springmvc之log4j
1.工程结构 2.所需jar包 3.web.xml <?xml version="1.0" encoding="UTF-8"?> <web-a ...
- C++中的单例模式（转）
单例模式也称为单件模式.单子模式,可能是使用最广泛的设计模式.其意图是保证一个类仅有一个实例,并提供一个访问它的全局访问点,该实例被所有程序模块共享.有很多地方需要这样的功能模块,如系统的日志输出,G ...
- NOSQL的学习
NoSQL(NoSQL = Not Only SQL ),意即"不仅仅是SQL",指的是非关系型的数据库.NoSQL用于超大规模数据的存储.(例如谷歌或Facebook每天为他们的 ...
- MyEclipse 优化
1.取消自动validation 有一堆,什么xml.jsp.jsf.js等等, 我们没有必要全部都去自动校验一下,只是需要的时候才会手工校验一下! 取消方法: windows-->perfer ...
- C++数学、信号处理相关库
1.Eigen 是一个线性算术的C++模板库,包括:vectors, matrices, 以及相关算法.功能强大.快速.优雅以及支持多平台. http://www.oschina.net/p/arma ...
- [20160731]read a file and print it on the screen
//read a file and print it on the screen import java.io.*; public class MyPrintStreamTest2{ public s ...
- spring3 的restful API RequestMapping介绍
原文链接:http://www.javaarch.net/jiagoushi/694.htm spring3 的restful API RequestMapping介绍 在spring mvc中 @R ...