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 ...
随机推荐
- centos 6.5 zabbix3.0.4 监控apache
开启apache的server-status httpd.conf 末尾添加 [root@test3 /]# vim /usr/local/httpd-/conf/httpd.conf Extende ...
- IOS学习目录
一.UI 1.基础控件 2.高级控件 二.多线程网络 1.网络请求.网络安全 2.
- Knockout.Js案例三单页面应用程序
<ul data-bind="foreach: folders"> <li data-bind="text: $data">& ...
- Lua模块测试
Lua模块 ---------------------------------------------------------- ----------------------- 模块测试module_ ...
- iOS开发——高级篇——UIDynamic 物理引擎
一.UIDynamic 1.简介什么是UIDynamicUIDynamic是从iOS 7开始引入的一种新技术,隶属于UIKit框架可以认为是一种物理引擎,能模拟和仿真现实生活中的物理现象重力.弹性碰撞 ...
- 剑指Offer 左旋转字符串
题目描述 汇编语言中有一种移位指令叫做循环左移(ROL),现在有个简单的任务,就是用字符串模拟这个指令的运算结果.对于一个给定的字符序列S,请你把其循环左移K位后的序列输出.例如,字符序列S=”abc ...
- php处理数据库数据，每处理一个数据返回客户端显示当前状态的方法。
php处理大量数据,每处理一个数据返回客户端显示当前状态的方法. 类似于dedecms生成静态页 想法: 客户端发送请求 服务器端接受请求,开始统计所需处理的数据量 将所需处理数据按一定规则排列,发送 ...
- qt-4.8.5 显示图片居中笔记
已经太久没有写过qt的程序了,所以导致的后果就是一个很简单的程序写了老半天还没写完整. 今天想实现的功能在原来软件的基础上显示他的版本. 因为想在该界面显示一个logo,一开始在pc机上跑发现图片一直 ...
- 37 网络相关函数(五)——live555源码阅读(四)网络
37 网络相关函数(五)——live555源码阅读(四)网络 37 网络相关函数(五)——live555源码阅读(四)网络 简介 10)MAKE_SOCKADDR_IN构建sockaddr_in结构体 ...
- CTSC2016游记
打了几天酱油.. day1 3分滚..考场上打了5+0+3,5文件名挂了. (因为5那题我会nlog^3n做法,然而只是暴力分而已.(被KDTree艹过去的一题)) 提答xjb玩了三分,原因是exgc ...